/* =====================================================================
   pixCMS – Basis-Stylesheet
   Senior Web Programmer: Daniel Beck / Pixlwerk
   Dieses Stylesheet liefert das Grunddesign der Demo-/Startseite.
   Farben können später über die CMS-Einstellungen (Farbverlauf 1/2)
   angepasst und per Inline-Variable überschrieben werden.
   ===================================================================== */

/* ----------------------------------------------------------------------
   1. Design-Tokens / CSS-Variablen
   ---------------------------------------------------------------------- */
:root {
	/* ── Praxis-CI: Himmelblau/Türkis. #227c9d ist auf Weiß WCAG-AA-tauglich
	      (Kontrast 4,5:1) – bitte nicht aufhellen. ───────────────────────── */
	--primary-ci:      #227c9d;   /* Hauptfarbe (Akzent)            */
	--primary-dark:    #1a6480;   /* dunklere Variante (Hover etc.) */
	--primary-light:   #e6f5fb;   /* sehr helle Flächenfarbe        */
	--gradient-1:      #227c9d;
	--gradient-2:      #2ba9c4;
	--primary-gradient: linear-gradient(135deg, var(--gradient-1) 0%, var(--gradient-2) 100%);

	--body-color:      #556b76;   /* Standard-Textfarbe             */
	--heading-color:   #0a364a;   /* Überschriften (dunkles Petrol) */
	--bg-soft:         #f4f7f6;   /* zarter Seitenhintergrund       */
	--card-radius:     1.25rem;
	--shadow-soft:     0 10px 30px rgba(34, 124, 157, 0.10);
	--shadow-hover:    0 18px 45px rgba(34, 124, 157, 0.18);

	/* ── Zweitnamen für dieselben Werte. Die Seiten-Templates und einige
	      CMS-Module sprechen die Tokens unter diesen Namen an; ohne sie
	      bleiben z.B. dunkle Karten ohne Hintergrund (weiß auf weiß). ───── */
	--primary:         var(--primary-ci);
	--brand-primary:   var(--primary-ci);
	--text-dark:       var(--heading-color);
	--text-main:       var(--heading-color);
	--text-muted:      var(--body-color);
	--bg-card:         #ffffff;
	--card-bg:         #ffffff;
	--bg-page:         var(--bg-soft);

	--font-base: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ----------------------------------------------------------------------
   2. Grundlayout
   ---------------------------------------------------------------------- */
* { scroll-behavior: smooth; }

body {
	font-family: var(--font-base);
	color: var(--body-color);
	background-color: #ffffff;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Mobil wirkt overflow-x nur am body nicht: seitlich einfliegende Blöcke
   (AOS fade-left/right) und die Hero-Blobs verbreitern sonst die Seite. */
html, body { overflow-x: hidden; }
@supports (overflow: clip) {
	html, body { overflow-x: clip; }
}

h1, h2, h3, h4, h5, h6 {
	color: var(--heading-color);
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* Standard-Linkfarbe = Praxisfarbe (23.08.2026)
   Ohne diese Zeilen fiel jeder <a> ohne eigene Klasse auf Bootstraps Blau
   (#0d6efd) zurueck - sichtbar bei "Datenschutzerklaerung" im Karten-Hinweis
   und auf der Hilfeseite, und bei allem, was Safari auf dem iPhone selbst
   verlinkt. Ueber die Bootstrap-Variablen statt einer a-Regel, damit keine
   Spezifitaet ins Spiel kommt: Komponenten mit eigener Farbe bleiben, wie
   sie sind; nur das Erbe aendert sich. */
:root {
	--bs-link-color: #227c9d;                 /* Bootstrap 5.0-5.2 */
	--bs-link-hover-color: #1a6580;
	--bs-link-color-rgb: 34, 124, 157;        /* Bootstrap 5.3: = --primary-ci */
	--bs-link-hover-color-rgb: 26, 101, 128;  /* eine Stufe dunkler */
}
a { transition: color .2s ease, opacity .2s ease; }
/* Links ohne Klasse im Fliesstext: ruhigere Unterstreichung */
a:not([class]) {
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	text-decoration-color: rgba(34, 124, 157, 0.45);
}
a:not([class]):hover { text-decoration-color: currentColor; }
/* Sicherheitsnetz fuer In-App-Browser/Mail, die trotz Meta-Tag Nummern,
   Adressen oder Daten verlinken: wie der umgebende Text aussehen lassen */
a[x-apple-data-detectors] {
	color: inherit !important;
	text-decoration: none !important;
	font: inherit !important;
}

main { min-height: 60vh; }

/* Utility-Klassen --------------------------------------------------- */
.text-primary-ci { color: var(--primary-ci) !important; }
.bg-primary-ci   { background-color: var(--primary-ci) !important; }
.bg-soft         { background-color: var(--bg-soft) !important; }

/* Skip-Link (Barrierefreiheit) ------------------------------------- */
.skip-link {
	position: absolute;
	left: -999px;
	top: 0;
	z-index: 2000;
	background: var(--primary-ci);
	color: #fff;
	padding: .75rem 1.25rem;
	border-radius: 0 0 .5rem 0;
	text-decoration: none;
	font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ----------------------------------------------------------------------
   3. Navigation
   ---------------------------------------------------------------------- */
.navbar {
	padding: 1.1rem 0;
	background-color: rgba(255, 255, 255, 0.85);
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	transition: padding .3s ease, box-shadow .3s ease, background-color .3s ease;
}
.navbar-scrolled {
	padding: .65rem 0;
	background-color: rgba(255, 255, 255, 0.97);
	box-shadow: 0 4px 25px rgba(0, 0, 0, 0.06);
}
.navbar-brand .fs-5 { color: var(--heading-color); font-weight: 700; }

.navbar .nav-link {
	color: var(--body-color);
	font-weight: 600;
	padding: .5rem 1rem !important;
	border-radius: .6rem;
	transition: color .2s ease, background-color .2s ease;
	/* Zweiwortige Punkte („Über uns") brechen sonst mitten im Menü um, sobald
	   die Leiste eng wird – ab lg klappt die Navigation ohnehin ins Burger-Menü. */
	white-space: nowrap;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus { color: var(--primary-ci); }
.navbar .nav-link.active {
	color: var(--primary-ci);
	background-color: var(--primary-light);
}
.navbar-toggler { border: 0; color: var(--primary-ci); }
.navbar-toggler:focus { box-shadow: none; }

/* ----------------------------------------------------------------------
   4. Buttons (Pill-Stil)
   ---------------------------------------------------------------------- */
.btn-pill {
	border-radius: 50rem;
	padding: .7rem 1.6rem;
	font-weight: 600;
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn-pill:hover { transform: translateY(-2px); }

.btn-ci {
	background: var(--primary-gradient);
	border: none;
	color: #fff;
	box-shadow: 0 8px 20px rgba(34, 124, 157, 0.25);
}
.btn-ci:hover, .btn-ci:focus {
	color: #fff;
	box-shadow: 0 12px 28px rgba(34, 124, 157, 0.35);
}

.btn-outline-ci {
	border: 2px solid var(--primary-ci);
	color: var(--primary-ci);
	background: transparent;
}
.btn-outline-ci:hover, .btn-outline-ci:focus {
	background: var(--primary-ci);
	color: #fff;
}

/* ----------------------------------------------------------------------
   5. Badges & Akzente
   ---------------------------------------------------------------------- */
.badge-ci {
	display: inline-block;
	background-color: var(--primary-light);
	color: var(--primary-dark);
	padding: .45rem 1rem;
	border-radius: 50rem;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .02em;
}

/* ----------------------------------------------------------------------
   6. Hero-Bereich
   ---------------------------------------------------------------------- */
.hero-section {
	position: relative;
	padding: 3rem 0 4rem;
	background:
		radial-gradient(circle at 0% 0%, var(--primary-light) 0%, transparent 45%),
		radial-gradient(circle at 100% 100%, var(--primary-light) 0%, transparent 45%);
}
.hero-title {
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	line-height: 1.1;
}
.hero-img-wrapper img {
	width: 100%;
	height: auto;
	border-radius: var(--card-radius);
	box-shadow: var(--shadow-soft);
	object-fit: cover;
}

/* ----------------------------------------------------------------------
   7. Karten (Bento-Stil) & Icon-Boxen
   ---------------------------------------------------------------------- */
.bento-card {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.05);
	border-radius: var(--card-radius);
	padding: 2rem;
	box-shadow: var(--shadow-soft);
	transition: transform .25s ease, box-shadow .25s ease;
}
.bento-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-hover);
}

/* Ruhige, helle Kachel mit farbigem Symbol – beim Überfahren der Karte
   dreht sich das Verhältnis um. So wie im Praxis-Entwurf. */
.icon-box {
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	margin-bottom: 1.5rem;
	font-size: 1.5rem;
	background-color: var(--primary-light);
	color: var(--primary-ci);
	flex-shrink: 0;
	transition: background-color .3s ease, color .3s ease, transform .3s ease;
}

.bento-card:hover .icon-box {
	background-color: var(--primary-ci);
	color: #fff;
	transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
	.icon-box { transition: none; }
	.bento-card:hover .icon-box { transform: none; }
}

/* ----------------------------------------------------------------------
   8. Footer
   ---------------------------------------------------------------------- */
footer {
	background-color: var(--bg-soft);
	border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.footer-link:hover { color: var(--primary-ci) !important; }

/* ----------------------------------------------------------------------
   9. Hilfs-Animationen / Reduced Motion
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ----------------------------------------------------------------------
   10. Responsive Feinschliff
   ---------------------------------------------------------------------- */
@media (max-width: 991.98px) {
	.navbar {
		background-color: rgba(255, 255, 255, 0.98);
		box-shadow: 0 4px 25px rgba(0, 0, 0, 0.06);
	}
	.hero-section { padding-top: 1.5rem; }
}

/* ----------------------------------------------------------------------
   11. Seitenbausteine der Praxis-Seiten
   Die Navigation liegt fest am oberen Rand (fixed-top). Alles, was oben
   auf einer Seite beginnt, braucht deshalb einen eigenen Abstand – sonst
   verschwindet der Seitenanfang hinter der Leiste.
   ---------------------------------------------------------------------- */

/* Sprungmarken landen sonst unter der festen Leiste */
html { scroll-padding-top: 90px; }

/* Seitenkopf der Unterseiten – gleiche Bildsprache wie der Hero der Startseite:
   weicher Verlauf statt Volltonfläche, zwei Farbflächen als Tiefenebene. */
.page-hero {
	margin-top: 86px;              /* Höhe der festen Navigation */
	padding: 4.5rem 0 3.75rem;
	background: linear-gradient(170deg, var(--primary-light) 0%, rgba(230, 245, 251, 0.45) 58%, var(--bg-body) 100%);
	border-bottom: none;
	position: relative;
	overflow: hidden;
}

/* Die beiden Farbflächen kommen aus dem Stylesheet – so bekommt jede
   Unterseite sie, ohne dass das Markup angefasst werden muss. */
.page-hero::before,
.page-hero::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	pointer-events: none;
	z-index: 0;
}

.page-hero::before {
	width: 420px; height: 420px;
	top: -190px; right: -120px;
	background: radial-gradient(circle, rgba(34, 124, 157, 0.20) 0%, rgba(34, 124, 157, 0) 70%);
}

.page-hero::after {
	width: 320px; height: 320px;
	bottom: -170px; left: -110px;
	background: radial-gradient(circle, rgba(47, 157, 196, 0.16) 0%, rgba(47, 157, 196, 0) 70%);
}

/* Kopfzeile: Auszeichnung, Titel und Beitext in ruhigem Rhythmus */
.page-hero .badge-ci { margin-bottom: 1.1rem; }

.page-hero .section-title {
	text-wrap: balance;            /* Überschriften brechen gleichmäßig um */
	margin-bottom: 0.85rem;
}

.page-hero .lead {
	max-width: 46rem;
	margin-inline: auto;
	font-size: 1.06rem;
}

@media (max-width: 991.98px) {
	.page-hero {
		margin-top: 76px;
		padding: 3rem 0 2.5rem;
	}
	.page-hero::before,
	.page-hero::after { display: none; }
}

.section-title {
	font-size: clamp(1.9rem, 4vw, 2.5rem);
	margin-bottom: 1rem;
}

/* Heller Lichtpunkt im Seitenkopf. Die farbigen Flächen liefert .page-hero
   selbst (::before/::after) – dieser Kreis setzt nur ein weiches Licht darüber. */
.bg-blob {
	position: absolute;
	width: 380px;
	height: 380px;
	background: #ffffff;
	border-radius: 50%;
	filter: blur(65px);
	opacity: 0.42;
	z-index: 0;
	top: -120px;
	left: 22%;
	animation: pix-float 8s ease-in-out infinite;
	pointer-events: none;
}

@keyframes pix-float {
	0%   { transform: translateY(0) scale(1); }
	50%  { transform: translateY(-20px) scale(1.05); }
	100% { transform: translateY(0) scale(1); }
}

/* Wer Bewegung reduziert haben möchte, bekommt sie nicht */
@media (prefers-reduced-motion: reduce) {
	.bg-blob { animation: none; }
}

/* Aufzählungen mit Häkchen-Pfeil statt Punkt */
.service-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.service-list li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: 0.5rem;
	color: var(--text-muted);
}

.service-list li::before {
	content: '\f054';                        /* fa-chevron-right */
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	position: absolute;
	left: 0;
	top: 2px;
	font-size: 0.7rem;
	color: var(--primary-ci);
}

/* ----------------------------------------------------------------------
   12. Bootstrap-Komponenten auf die Praxis-CI bringen
   Ohne diese Regeln greifen die Bootstrap-Standardfarben (Blau-Lila) –
   sichtbar bei FAQ-Akkordeon, Formularfeldern und Fokusrahmen.
   ---------------------------------------------------------------------- */

/* FAQ-Akkordeon */
.accordion-item {
	border: none;
	background: transparent;
	margin-bottom: 1rem;
}

.accordion-button {
	border-radius: 20px !important;
	background-color: var(--bg-card);
	box-shadow: 0 4px 15px rgba(10, 54, 74, 0.03);
	font-weight: 600;
	color: var(--text-dark);
	padding: 1.2rem 1.5rem;
	border: 1px solid rgba(10, 54, 74, 0.03);
	transition: background-color .3s ease, color .3s ease;
}

.accordion-button:not(.collapsed) {
	background-color: var(--primary-light);
	color: var(--primary-ci);
	box-shadow: none;
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.accordion-button:focus {
	box-shadow: none;
	border-color: transparent;
}

/* Pfeil rechts: Bootstrap liefert ein fest eingefärbtes SVG mit – hier in CI */
.accordion-button::after {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230a364a'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button:not(.collapsed)::after {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23227c9d'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-body {
	background-color: var(--bg-card);
	border-radius: 0 0 20px 20px;
	padding: 1.5rem;
	color: var(--text-muted);
	box-shadow: 0 8px 20px rgba(10, 54, 74, 0.04);
	border: 1px solid rgba(10, 54, 74, 0.03);
	border-top: none;
}

/* Formularfelder (Kontaktformular) */
.form-control,
.form-select {
	border-radius: 12px;
	border: 1px solid rgba(10, 54, 74, 0.12);
	padding: 0.8rem 1rem;
	color: var(--text-dark);
	background-color: var(--bg-card);
}

.form-control:focus,
.form-select:focus {
	border-color: var(--primary-ci);
	box-shadow: 0 0 0 0.2rem rgba(34, 124, 157, 0.15);
	color: var(--text-dark);
}

.form-control::placeholder { color: #9aa8b0; }

.form-check-input:checked {
	background-color: var(--primary-ci);
	border-color: var(--primary-ci);
}

.form-check-input:focus {
	border-color: var(--primary-ci);
	box-shadow: 0 0 0 0.2rem rgba(34, 124, 157, 0.15);
}

/* Sichtbarer Fokusrahmen für die Tastaturbedienung (BFSG) */
:focus-visible {
	outline: 3px solid var(--primary-ci);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Fußzeilen-Links */
footer .footer-link {
	color: var(--text-muted);
	text-decoration: none;
	transition: color .3s ease;
}

footer .footer-link:hover {
	color: var(--primary-ci);
}

.pix-herz { color: #e0345a; }

/* ----------------------------------------------------------------------
   13. Textlogo mit Arzt-Symbol (Navigation und Fußzeile)
   ---------------------------------------------------------------------- */
.praxis-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	text-decoration: none;
	padding: 0;
}

.praxis-logo-mark {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 13px;
	background: linear-gradient(135deg, var(--primary-ci) 0%, #2f9dc4 100%);
	color: #fff;
	font-size: 1.05rem;
	box-shadow: 0 6px 16px rgba(34, 124, 157, 0.28);
	transition: transform .3s ease, box-shadow .3s ease;
}

.praxis-logo:hover .praxis-logo-mark {
	transform: translateY(-2px) rotate(-6deg);
	box-shadow: 0 10px 22px rgba(34, 124, 157, 0.34);
}

.praxis-logo-text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
	min-width: 0;
}

.praxis-logo-name {
	font-family: var(--font-heading, inherit);
	font-weight: 700;
	font-size: 1.02rem;
	color: var(--heading-color);
	letter-spacing: -0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.praxis-logo-sub {
	font-size: 0.68rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--primary-ci);
	margin-top: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Fußzeilen-Variante: etwas größer, Unterzeile dezenter */
.praxis-logo--footer { display: flex; }
.praxis-logo--footer .praxis-logo-mark { width: 48px; height: 48px; border-radius: 15px; font-size: 1.2rem; }
.praxis-logo--footer .praxis-logo-name { font-size: 1.1rem; }
.praxis-logo--footer .praxis-logo-sub { color: var(--text-muted); }

/* Bildlogo aus dem CMS: Breite bestimmt die Größe, Höhe folgt dem Seitenverhältnis */
.praxis-logo-bild {
	display: block;
	width: 290px;
	max-width: calc(100vw - 110px);
	height: auto;
}
.praxis-logo--footer .praxis-logo-bild { width: 270px; max-width: 100%; }
/* Auf dem dunklen Abschluss einfarbig weiß – außer es ist ein eigenes Footer-Logo gepflegt */
.praxis-footer .praxis-logo-bild:not(.praxis-logo-bild--eigen) { filter: brightness(0) invert(1); }

/* Auf schmalen Bildschirmen darf der Praxisname umbrechen statt abzuschneiden */
@media (max-width: 420px) {
	.praxis-logo-mark { width: 38px; height: 38px; border-radius: 12px; font-size: 0.95rem; }
	.praxis-logo-name { font-size: 0.9rem; white-space: normal; }
	.praxis-logo-sub  { font-size: 0.62rem; white-space: normal; }
}

/* ----------------------------------------------------------------------
   14. pixSelect – einheitliche Dropdowns statt der Browser-Standardliste
   Markup erzeugt assets/js/pixselect.js; das native <select> bleibt als
   Datenquelle erhalten (.pixsel-native).
   ---------------------------------------------------------------------- */
.pixsel { position: relative; width: 100%; }

.pixsel-native {
	position: absolute !important; inset: 0; width: 100%; height: 100%;
	margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none;
}

.pixsel-trigger {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	width: 100%; background: var(--bg-card);
	border: 1px solid rgba(10, 54, 74, 0.12); border-radius: 12px;
	padding: 0.8rem 1rem; font-size: 1rem; line-height: 1.3; text-align: left;
	color: var(--text-dark); cursor: pointer; font-family: inherit;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.pixsel-trigger:hover { border-color: rgba(34, 124, 157, 0.45); }

.pixsel.is-open > .pixsel-trigger,
.pixsel-trigger:focus-visible {
	border-color: var(--primary-ci); outline: none;
	box-shadow: 0 0 0 0.2rem rgba(34, 124, 157, 0.15);
}

.pixsel-trigger.is-placeholder .pixsel-value { color: #9aa8b0; }

.pixsel-trigger:disabled { background: #f3f4f6; color: #9aa0a6; cursor: not-allowed; opacity: .75; }

.pixsel-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pixsel-arrow { flex-shrink: 0; width: 13px; height: 13px; transition: transform .2s ease; }

.pixsel.is-open > .pixsel-trigger .pixsel-arrow { transform: rotate(180deg); }

/* Panel hängt am <body> und ist fixiert – wird von Kacheln nicht abgeschnitten */
.pixsel-panel {
	position: fixed; z-index: 2000; min-width: 160px; background: var(--bg-card);
	border: 1px solid rgba(10, 54, 74, 0.08); border-radius: 14px; padding: 6px;
	box-shadow: 0 14px 38px rgba(10, 54, 74, 0.16); max-height: 280px; overflow-y: auto;
	overscroll-behavior: contain; opacity: 0; transform: translateY(-6px);
	transition: opacity .14s ease, transform .14s ease;
}

.pixsel-panel.is-visible { opacity: 1; transform: translateY(0); }

.pixsel-opt {
	display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px;
	font-size: 0.94rem; color: var(--text-dark); cursor: pointer; transition: background .12s ease;
}

.pixsel-opt.is-active { background: var(--primary-light); }

.pixsel-opt.is-selected { font-weight: 700; color: var(--primary-ci); }

.pixsel-opt.is-selected::after { content: "\2713"; margin-left: auto; font-weight: 900; }

.pixsel-opt.is-disabled { opacity: .4; cursor: not-allowed; }

.pixsel-optgroup-label {
	padding: 8px 12px 4px; font-size: 0.7rem; text-transform: uppercase;
	letter-spacing: .5px; color: var(--text-muted); font-weight: 800;
}

.pixsel-empty { padding: 14px 12px; text-align: center; color: #adb5bd; font-size: 0.85rem; }

/* ----------------------------------------------------------------------
   16. Feinschliff der Unterseiten
   ---------------------------------------------------------------------- */

/* Symbolkachel wie im Logo: CI-Verlauf statt Vollton, weicher Farbschatten.
   WICHTIG: nur dort, wo die Stelle keine eigene Farbe mitbringt. Artikel-Kategorien
   (Aktuelles) und ähnliche Fälle setzen ihre Farbe per style-Attribut – ein Verlauf
   aus der Klasse würde als Bild darüberliegen und sie unsichtbar machen, während
   die Icon-Farbe inline bestehen bleibt. Deshalb der :not()-Ausschluss. */
.icon-box:not([style*="background"]) {
	background: linear-gradient(135deg, var(--primary-ci) 0%, #2f9dc4 100%);
	color: #fff;
	box-shadow: 0 8px 18px rgba(34, 124, 157, 0.22);
}

.bento-card:hover .icon-box:not([style*="background"]) {
	background: linear-gradient(135deg, #1d6c8a 0%, var(--primary-ci) 100%);
	color: #fff;
	transform: translateY(-2px) scale(1.04);
	box-shadow: 0 12px 24px rgba(34, 124, 157, 0.3);
}

/* Farbig gesetzte Kacheln behalten ihre Farbe und bekommen nur den weichen Rahmen */
.icon-box[style*="background"] { box-shadow: 0 6px 14px rgba(10, 54, 74, 0.08); }

/* Karten: ruhiger Rand, spürbarer aber unaufdringlicher Hover */
.bento-card {
	border-color: rgba(10, 54, 74, 0.06);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.bento-card:hover { border-color: rgba(34, 124, 157, 0.18); }

/* Aufzählungen etwas luftiger und mit ruhigerem Trennrhythmus */
.service-list li + li { margin-top: 0.55rem; }

/* Kategorie-Auszeichnungen (Aktuelles, Karriere) */
.badge-ci {
	background: var(--primary-light);
	color: var(--primary-ci);
	border: 1px solid rgba(34, 124, 157, 0.16);
}

/* Abschnittsköpfe innerhalb der Seiten – gleiche Hierarchie wie im Seitenkopf */
section .section-title { text-wrap: balance; }

/* Ein feiner Abschluss zwischen Seitenkopf und Inhalt statt harter Kante */
.page-hero + section { padding-top: 3.25rem; }

/* Rechtsseiten (Impressum, Datenschutz, Barrierefreiheit) bringen ihr Karten-CSS
   selbst mit, hatten aber keinen Seitenkopf. Damit sie sich nicht wie ein Fremdkörper
   anfühlen, bekommen sie dieselbe Kopffläche – als Ebene hinter dem Inhalt, damit
   das mitgelieferte Stylesheet unangetastet bleibt. */
.legal-page {
	position: relative;
	padding-top: 3.5rem !important;
}

.legal-page::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 430px;
	/* Oben satt wie bei .page-hero, dann weich in den Seitengrund auslaufend */
	background: linear-gradient(180deg,
		var(--primary-light) 0%,
		var(--primary-light) 34%,
		rgba(230, 245, 251, 0.55) 66%,
		var(--bg-body) 100%);
	pointer-events: none;
	z-index: 0;
}

.legal-page > .container { position: relative; z-index: 1; }

.legal-page > .container > h1 { text-wrap: balance; }

/* Leerzustände („noch keine Downloads/Stellen") bekommen mehr Präsenz –
   eine 50px-Kachel wirkt auf einer sonst leeren Seite verloren. */
.bento-card.text-center > .icon-box.mx-auto {
	width: 76px;
	height: 76px;
	border-radius: 20px;
	font-size: 2rem;
	margin-bottom: 1.4rem;
}

.bento-card.text-center { padding-block: 2.75rem; }

/* ----------------------------------------------------------------------
   17. Artikel-, Stellen- und Download-Ansichten
   Diese Klassen kommen aus den übernommenen Views. Ihre Regeln lagen im
   alten Entwurf und fehlten hier – die Seiten waren dadurch ungestaltet.
   ---------------------------------------------------------------------- */

/* Zurück-Verweis über der Überschrift */
.back-link {
	display: inline-flex;
	align-items: center;
	font-weight: 600;
	color: var(--text-muted);
	text-decoration: none;
	transition: color .3s ease;
}

.back-link:hover { color: var(--primary-ci); }
.back-link i { margin-right: 0.6rem; font-size: 0.9rem; transition: transform .3s ease; }
.back-link:hover i { transform: translateX(-4px); }

/* Große Symbolkachel im Kopf einer Detailseite */
.article-icon-header {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	background: linear-gradient(135deg, var(--primary-ci) 0%, #2f9dc4 100%);
	color: #fff;
	border-radius: 22px;
	font-size: 2.3rem;
	box-shadow: 0 12px 26px rgba(34, 124, 157, 0.26);
	margin-bottom: 1.5rem;
}

/* Datumsangabe über Artikeln */
.news-date {
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--primary-ci);
	margin-bottom: 0.6rem;
	display: inline-block;
}

/* Fließtext eines Artikels bzw. Stellenangebots */
.article-content p {
	margin-bottom: 1.4rem;
	color: var(--text-muted);
	font-size: 1.05rem;
	line-height: 1.75;
}

.article-content h2 { font-size: 1.7rem; margin-top: 2.5rem; margin-bottom: 1rem; }
.article-content h3 { font-size: 1.35rem; margin-top: 2rem; margin-bottom: 0.9rem; }
.article-content > :first-child { margin-top: 0; }

/* Editor-Inhalte (pix-rte) in Artikeln: Listen, Zitate, Links – bewusst nur
   klassenlose Listen, damit .service-list (eigene Optik) unberuehrt bleibt */
.article-content :is(ul, ol):not([class]) {
	margin: 0 0 1.4rem;
	padding-left: 1.4rem;
	color: var(--text-muted);
	font-size: 1.05rem;
	line-height: 1.75;
}
.article-content :is(ul, ol):not([class]) li + li { margin-top: 0.35rem; }
.article-content blockquote {
	margin: 0 0 1.4rem;
	padding: 0.9rem 1.25rem;
	border-left: 4px solid var(--primary-ci);
	background: var(--primary-light);
	border-radius: 0 12px 12px 0;
	color: var(--text-main);
}
.article-content blockquote p:last-child { margin-bottom: 0; }
.article-content p a:not(.btn), .article-content li a:not(.btn) { font-weight: 600; }
/* kleine Editor-Textbloecke ausserhalb von Artikeln (z. B. Team-Langtext) */
.rte-text > :last-child { margin-bottom: 0; }
.rte-text :is(ul, ol):not([class]) { padding-left: 1.25rem; }

.article-hero-img {
	width: 100%;
	height: auto;
	border-radius: 20px;
	box-shadow: var(--shadow-soft);
	margin-bottom: 2rem;
}

/* Vorschaubild in der Artikelliste */
.news-thumb {
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: 16px;
	flex-shrink: 0;
}

/* Verweise in der Seitenleiste: ganze Zeile reagiert auf den Zeiger */
.group-hover:hover .text-dark { color: var(--primary-ci) !important; transition: color .3s ease; }
.group-hover:hover .icon-box  { filter: brightness(0.92); transition: filter .3s ease; }
.hover-primary:hover { color: var(--primary-ci) !important; }

/* Seitenweiterschaltung der Artikelliste */
.pix-pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	list-style: none;
	padding: 0;
	margin: 3rem 0 0;
}

.pix-pagination li a,
.pix-pagination li span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	background-color: var(--bg-card);
	border-radius: 12px;
	font-weight: 700;
	color: var(--text-dark);
	text-decoration: none;
	border: 1px solid rgba(10, 54, 74, 0.06);
	box-shadow: 0 4px 10px rgba(10, 54, 74, 0.03);
	transition: transform .25s ease, background-color .25s ease, color .25s ease, box-shadow .25s ease;
}

.pix-pagination li a:hover {
	transform: translateY(-2px);
	background-color: var(--primary-light);
	color: var(--primary-ci);
	border-color: rgba(34, 124, 157, 0.22);
	box-shadow: 0 8px 16px rgba(34, 124, 157, 0.14);
}

.pix-pagination li.active span {
	background-color: var(--primary-ci);
	color: #fff;
	border-color: var(--primary-ci);
	transform: none;
}

.pix-pagination li.disabled span {
	opacity: 0.4;
	cursor: not-allowed;
	background-color: var(--bg-page);
	box-shadow: none;
}

/* Downloadliste: Gruppenkopf + Einträge.
   Der ganze Eintrag ist ein <a> – große Trefferfläche, ein Tabstopp statt zwei.
   Der „Download"-Knopf ist deshalb ein <span> und nur Optik. */
.dl-gruppe-kopf {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	margin-bottom: 1.35rem;
}

.dl-gruppe-icon {
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border-radius: 13px;
	background: linear-gradient(135deg, var(--primary-ci) 0%, #2f9dc4 100%);
	color: #fff;
	font-size: 1.15rem;
	box-shadow: 0 8px 18px rgba(34, 124, 157, 0.26);
}

.dl-gruppe-titel {
	font-size: 1.2rem;
	font-weight: 800;
	color: var(--heading-color);
	margin: 0;
	line-height: 1.25;
}

.dl-gruppe-anzahl {
	font-size: 0.78rem;
	color: var(--text-muted);
}

.dl-liste {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}

.download-item {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.15rem;
	background: var(--bg-card);
	border: 1px solid rgba(34, 124, 157, 0.16);
	border-radius: 14px;
	text-decoration: none;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.download-item:hover,
.download-item:focus-visible {
	border-color: var(--primary-ci);
	box-shadow: 0 10px 24px rgba(34, 124, 157, 0.14);
	transform: translateY(-2px);
	text-decoration: none;
}

/* Dateityp-Kachel */
.dl-typ {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 12px;
	background: var(--primary-light);
	color: #1b6a87;
	font-size: 1.25rem;
}

.dl-text {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;              /* lässt lange Titel umbrechen statt die Zeile zu sprengen */
	flex: 1 1 auto;
}

.dl-titel {
	font-weight: 700;
	color: var(--heading-color);
	line-height: 1.35;
}

.dl-besch {
	font-size: 0.87rem;
	color: var(--text-muted);
	line-height: 1.45;
}

.dl-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 0.15rem;
}

.dl-tag,
.dl-groesse {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	padding: 0.15rem 0.55rem;
	border-radius: 50px;
}

.dl-tag {
	color: #1b6a87;
	background: var(--primary-light);
}

.dl-groesse {
	color: var(--text-muted);
	background: rgba(10, 54, 74, 0.06);
	font-weight: 600;
}

/* Nur Optik – der Klick gilt der ganzen Zeile */
.dl-knopf {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.82rem;
	font-weight: 700;
	color: #1b6a87;
	background: var(--bg-card);
	border: 1px solid rgba(34, 124, 157, 0.35);
	padding: 0.5rem 1.05rem;
	border-radius: 50px;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.download-item:hover .dl-knopf,
.download-item:focus-visible .dl-knopf {
	background: var(--primary-ci);
	border-color: var(--primary-ci);
	color: #fff;
}

@media (max-width: 575.98px) {
	.download-item { flex-wrap: wrap; }
	.dl-knopf { width: 100%; justify-content: center; margin-top: 0.35rem; }
}

/* ----------------------------------------------------------------------
   18. Hinweiskarte („Infos" aus dem CMS)
   Bewusst flacher als eine .bento-card: es ist ein Hinweis, keine Kachel
   mit eigenem Thema – er soll den festen Seiteninhalt nicht überstrahlen.
   ---------------------------------------------------------------------- */
.hinweis-karte {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	height: 100%;
	padding: 1.35rem 1.5rem;
	border-radius: 16px;
	background: var(--primary-light);
	border: 1px solid rgba(34, 124, 157, 0.14);
}

.hinweis-karte-icon {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--bg-card);
	color: var(--primary-ci);
	font-size: 1rem;
	box-shadow: 0 4px 10px rgba(10, 54, 74, 0.06);
}

.hinweis-karte-text { min-width: 0; }
.hinweis-karte-text h3 { color: var(--heading-color); }

/* Der Text kommt aus dem Editor – die üblichen Auszeichnungen mitnehmen */
.hinweis-karte-text p {
	color: var(--text-muted);
	font-size: 0.9rem;
	line-height: 1.6;
	margin-bottom: 0.6rem;
}

.hinweis-karte-text p:last-child { margin-bottom: 0; }

.hinweis-karte-text ul,
.hinweis-karte-text ol {
	margin: 0 0 0.6rem;
	padding-left: 1.15rem;
	color: var(--text-muted);
	font-size: 0.9rem;
	line-height: 1.6;
}

.hinweis-karte-text li { margin-bottom: 0.3rem; }
.hinweis-karte-text h3:not(:first-child),
.hinweis-karte-text h4,
.hinweis-karte-text h5 {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--heading-color);
	margin: 0.9rem 0 0.4rem;
}

.hinweis-karte-text a { color: var(--primary-ci); font-weight: 600; }
.hinweis-karte-text strong { color: var(--text-dark); }

/* Mit „!!" ausgezeichnete Zeile – der Merksatz eines Hinweises */
.hinweis-karte-text .hinweis-karte-merk {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	margin: 0.7rem 0 0;
	padding: 0.7rem 0.85rem;
	border-radius: 11px;
	background: var(--bg-card);
	color: var(--text-dark);
	font-weight: 600;
}

.hinweis-karte-text .hinweis-karte-merk i { color: var(--primary-ci); margin-top: 0.15rem; }

/* ----------------------------------------------------------------------
   18b. Urlaubshinweis mit Vertretungsärzten (Startseite)
   ---------------------------------------------------------------------- */
/* Die Leiste steht auf jeder Seite als erstes Element in <main> und muss deshalb
   die feste Navigation (86px) selbst freihalten. Der folgende Hero rückt dafür
   entsprechend nach oben, damit oben keine doppelte Lücke entsteht. */
.urlaub-leiste { padding-top: 94px; }

/* Der Banner bringt seinen eigenen Abstand mit; in der Leiste übernimmt den
   Abstand nach unten der folgende Hero, sonst addieren sich beide. */
.urlaub-leiste .urlaub-banner { margin-bottom: 0; }

/* Geschwister-Selektor mit ~, NICHT + : zwischen Leiste und Hero stehen noch der
   Dialog und das <script>, damit ist der Hero kein DIREKTES Geschwister. */
.urlaub-leiste ~ .page-hero { margin-top: 0; padding-top: 2rem; }
.urlaub-leiste ~ .hero-praxis { padding-top: 2rem; }

@media (max-width: 991.98px) {
	.urlaub-leiste { padding-top: 86px; }
	.urlaub-leiste ~ .page-hero,
	.urlaub-leiste ~ .hero-praxis { padding-top: 1.5rem; }
}

/* Schmale Hinweiszeile auf der Seite – die Details liegen im Dialog */
.urlaub-banner {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	border-radius: 14px;
	padding: 0.7rem 1.1rem;
	margin-bottom: 1.75rem;
	font-size: 0.9rem;
	color: var(--text-muted);
}

.urlaub-banner i:first-child { color: var(--primary-ci); flex-shrink: 0; }
.urlaub-banner strong { color: var(--text-dark); }

/* Vorabphase: bewusst zurückhaltend – weißer Grund, gestrichelte Kante */
.urlaub-banner--vorab {
	background: var(--bg-card);
	border: 1px dashed rgba(34, 124, 157, 0.35);
}

.urlaub-banner-x {
	margin-left: auto;
	border: 0;
	background: transparent;
	color: var(--text-muted);
	padding: 0.25rem 0.45rem;
	border-radius: 8px;
	cursor: pointer;
	flex-shrink: 0;
}

.urlaub-banner-x:hover { color: var(--text-dark); background: var(--primary-light); }

/* Aktiver Urlaub: etwas präsenter, aber weiter eine schlanke Zeile */
.urlaub-banner--aktiv {
	background: var(--primary-light);
	border: 1px solid rgba(34, 124, 157, 0.22);
	border-left: 4px solid var(--primary-ci);
	color: var(--text-dark);
}

.urlaub-banner-btn {
	margin-left: auto;
	flex-shrink: 0;
	border: 1px solid rgba(34, 124, 157, 0.35);
	background: var(--bg-card);
	color: var(--primary-ci);
	font-weight: 700;
	font-size: 0.8rem;
	padding: 0.4rem 1rem;
	border-radius: 50px;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}

.urlaub-banner-btn:hover { background: var(--primary-ci); border-color: var(--primary-ci); color: #fff; }

@media (max-width: 575.98px) {
	.urlaub-banner { flex-wrap: wrap; }
	/* min-width:0 lässt den Text umbrechen, statt das Symbol auf eine eigene Zeile zu drücken */
	.urlaub-banner > span { flex: 1 1 0; min-width: 0; }
	.urlaub-banner-btn { margin-left: 0; width: 100%; text-align: center; }
}

/* Dialog übernimmt die Kartenoptik */
/* Schlicht weiß, ohne Verlauf und ohne Transparenz: ruhiger Grund, überall
   derselbe Kontrast. (Der frühere Verlauf hatte einen Alpha-Stopp – der Seiten-
   inhalt schien durch und der Text stand auf wechselndem Untergrund.) */
#urlaubModal .modal-content.urlaub-modal {
	position: relative;
	background: #ffffff;
	border: 1px solid rgba(27, 106, 135, 0.30);
	border-left: 4px solid var(--primary-ci);
	border-radius: 20px;
	box-shadow: 0 24px 60px rgba(10, 54, 74, 0.35);
}

/* Hintergrund kräftiger abdunkeln: hebt den Dialog klar ab und nimmt Unruhe
   aus dem Umfeld – hilfreich bei eingeschränktem Sehvermögen. */
body:has(#urlaubModal.show) .modal-backdrop.show { opacity: 0.65; }

#urlaubModal .modal-body { padding: 1.75rem 2rem; }

#urlaubModal .urlaub-modal-x {
	position: absolute;
	top: 1.1rem;
	right: 1.1rem;
	padding: 0.5rem;
	z-index: 2;
}

.urlaub-kopf {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
}

.urlaub-icon {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 15px;
	background: linear-gradient(135deg, var(--primary-ci) 0%, #2f9dc4 100%);
	color: #fff;
	font-size: 1.3rem;
	box-shadow: 0 8px 18px rgba(34, 124, 157, 0.26);
}

.urlaub-titelblock {
	display: flex;
	align-items: center;
	gap: 0.4rem 1rem;
	flex-wrap: wrap;
}

.urlaub-titel {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--heading-color);
	margin: 0;
}

.urlaub-zeitpille {
	display: inline-flex;
	align-items: center;
	background: var(--bg-card);
	border: 1px solid rgba(34, 124, 157, 0.22);
	color: var(--primary-ci);
	font-weight: 700;
	font-size: 0.88rem;
	padding: 0.35rem 0.9rem;
	border-radius: 50px;
	white-space: nowrap;
}

.urlaub-text {
	color: var(--text-muted);
	margin: 0 0 0.5rem;
}

.urlaub-abschnitt {
	font-size: 0.78rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #1b6a87;                 /* dunkler als CI: 5.7:1 statt 4.45:1 (kleine Versalien) */
	margin: 1.1rem 0 0.75rem;
}

/* Vertreter als kompakte Karten – so viele nebeneinander, wie Platz ist */
.urlaub-vertreter {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 0.9rem;
	margin-bottom: 0.5rem;
}

.vertreter-karte {
	background: #f6fbfd;            /* zart getönt – auf dem weißen Dialog sonst unsichtbar */
	border: 1px solid rgba(34, 124, 157, 0.22);
	border-radius: 14px;
	padding: 1rem 1.15rem;
	max-width: 420px;   /* ein einzelner Vertreter streckt sich sonst über die volle Breite */
}

.vertreter-name {
	font-weight: 700;
	color: var(--heading-color);
	margin-bottom: 0.25rem;
}

.vertreter-zeit {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 700;
	color: #1b6a87;                 /* dunkler als CI: 5.4:1 statt 4.24:1 auf der hellen Pille */
	background: var(--primary-light);
	padding: 0.18rem 0.6rem;
	border-radius: 50px;
	margin-bottom: 0.6rem;
}

.vertreter-zeile {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	font-size: 0.85rem;
	color: var(--text-muted);
	line-height: 1.45;
	margin-top: 0.35rem;
}

.vertreter-zeile i {
	color: var(--primary-ci);
	width: 15px;
	text-align: center;
	margin-top: 0.2rem;
	flex-shrink: 0;
}

.vertreter-zeile a {
	color: var(--text-dark);
	font-weight: 600;
	text-decoration: none;
}

.vertreter-zeile a:hover { color: var(--primary-ci); }

/* Rückkehr-Zeile: bewusst als eigener Abschluss */
.urlaub-zurueck {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(34, 124, 157, 0.15);
	color: var(--text-dark);
	font-size: 0.95rem;
}

.urlaub-zurueck i { color: #1a7a3c; font-size: 1.1rem; }

@media (max-width: 575.98px) {
	#urlaubModal .modal-body { padding: 1.35rem 1.25rem; }
	.urlaub-zeitpille { white-space: normal; }
}

/* ----------------------------------------------------------------------
   19. Fußzeile
   Dunkler Seitenabschluss. Die CTA-Karte schwebt über der Kante zwischen
   Seiteninhalt und Fußzeile; darunter vier Spalten auf dunklem Blau.
   Symbole auf dem dunklen Grund in #7ec4dd (~6,8:1) statt CI-Türkis.
   ---------------------------------------------------------------------- */
/* Die alte Basisregel `footer { background-color: var(--bg-soft) }` stammt vom
   früheren hellen Footer. Sie erzeugte oberhalb des dunklen Bereichs – dort, wo
   die CTA-Karte sitzt – einen grauen Balken samt Trennlinie. Der neue Footer
   bringt seine Flächen selbst mit, deshalb hier zurücksetzen. */
.praxis-footer {
	margin-top: 6.5rem;
	background-color: transparent;
	border-top: none;
}

/* CTA-Karte */
.footer-cta {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem 2.5rem;
	flex-wrap: wrap;
	background: linear-gradient(135deg, var(--primary-ci) 0%, #2f9dc4 100%);
	border-radius: 24px;
	padding: 2.25rem 2.5rem;
	box-shadow: 0 24px 50px rgba(34, 124, 157, 0.35);
	/* Die Karte sitzt überwiegend IM dunklen Bereich und taucht nur mit ihrem
	   oberen Viertel ins Helle. Läuft die Kante mittig durch, wirkt sie
	   aufgeklebt statt eingebettet. Gegenstück: padding-top von .footer-main. */
	margin-bottom: -118px;
}

.footer-cta-text h2 {
	color: #fff;
	font-size: clamp(1.35rem, 2.6vw, 1.7rem);
	font-weight: 700;
	margin-bottom: 0.35rem;
}

.footer-cta-text p {
	color: rgba(255, 255, 255, 0.88);
	margin: 0;
	max-width: 34rem;
}

.footer-cta-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; }

.footer-cta-btn {
	background: #fff;
	color: var(--primary-ci);
	font-weight: 700;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	white-space: nowrap;
}

.footer-cta-btn:hover,
.footer-cta-btn:focus { background: var(--primary-light); color: #1d6c8a; }

.footer-cta-btn--ghost {
	background: transparent;
	color: #fff;
	border: 2px solid rgba(255, 255, 255, 0.65);
}

.footer-cta-btn--ghost:hover,
.footer-cta-btn--ghost:focus { background: rgba(255, 255, 255, 0.14); color: #fff; border-color: #fff; }

/* Hauptteil */
.footer-main {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, #0c405a 0%, var(--text-dark) 45%, #082c3d 100%);
	padding: 188px 0 3.5rem;   /* = |margin-bottom der CTA-Karte| + 70px Luft */
	color: rgba(255, 255, 255, 0.72);
}

/* Weiches Licht oben rechts – gibt der Fläche Tiefe */
.footer-main::before {
	content: '';
	position: absolute;
	width: 520px; height: 520px;
	top: -200px; right: -140px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(126, 196, 221, 0.14) 0%, rgba(126, 196, 221, 0) 70%);
	pointer-events: none;
}

.footer-main .container { position: relative; z-index: 1; }

/* Markenspalte: Logo-Farben auf dunklem Grund */
.praxis-footer .praxis-logo-name { color: #fff; }
.praxis-footer .praxis-logo-sub  { color: #7ec4dd; }

.footer-text {
	color: rgba(255, 255, 255, 0.68);
	font-size: 0.92rem;
	line-height: 1.7;
	margin-bottom: 1.1rem;
}

/* Live-Status auf dunklem Grund */
.praxis-footer .status-pille--offen { background: rgba(66, 200, 130, 0.16); color: #8fe6b4; }
.praxis-footer .status-pille--zu    { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.75); }

/* Spaltenüberschriften */
.footer-titel {
	font-size: 0.72rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: #7ec4dd;
	margin-bottom: 1.1rem;
}

/* Sprechzeiten */
.footer-zeiten { list-style: none; margin: 0; padding: 0; font-size: 0.9rem; }

.footer-zeiten li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.45rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-zeiten li:last-child { border-bottom: none; }
.footer-zeiten .tage { color: #fff; font-weight: 600; white-space: nowrap; }
.footer-zeiten .zeit { color: rgba(255, 255, 255, 0.66); text-align: right; }
.footer-zeiten .ist-zu { color: #ff9daa; }

/* Navigation */
.footer-nav { list-style: none; margin: 0; padding: 0; }

/* Der Hover-Pfeil liegt ABSOLUT über dem Text – als Flex-Kind würde er auch
   unsichtbar Platz belegen und die Links gegenüber der Spaltenüberschrift
   einrücken. Beim Überfahren rückt der Text nach rechts und gibt ihn frei. */
.footer-nav a {
	position: relative;
	display: inline-block;
	padding: 0.28rem 0;
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
	transition: color .2s ease, padding-left .2s ease;
}

.footer-nav a::before {
	content: '\f054';                        /* fa-chevron-right */
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	font-size: 0.58rem;
	color: #7ec4dd;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0;
	transition: opacity .2s ease;
}

.footer-nav a:hover,
.footer-nav a:focus-visible { color: #fff; padding-left: 14px; }

.footer-nav a:hover::before,
.footer-nav a:focus-visible::before { opacity: 1; }

/* Kontakt */
.footer-kontakt { list-style: none; margin: 0; padding: 0; font-size: 0.92rem; }

.footer-kontakt li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-bottom: 0.85rem;
	line-height: 1.55;
}

.footer-kontakt i { color: #7ec4dd; margin-top: 0.22rem; width: 16px; text-align: center; flex-shrink: 0; }

.footer-kontakt a {
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
	transition: color .2s ease;
}

.footer-kontakt a:hover { color: #fff; }

/* Notfall-Hinweis: zwei getrennte, anwählbare Zeilen (Notfall / Bereitschaft) */
.footer-notfall {
	margin-top: 1.2rem;
	padding: 0.35rem 1rem;
	border: 1px solid rgba(255, 154, 144, 0.35);
	border-radius: 12px;
}

.footer-notfall-zeile {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.6rem 0;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	transition: color .2s ease;
}

.footer-notfall-zeile + .footer-notfall-zeile { border-top: 1px solid rgba(255, 154, 144, 0.2); }

.footer-notfall-zeile i {
	color: #ff9a90;
	width: 16px;
	text-align: center;
	flex-shrink: 0;
}

.footer-notfall-zeile span { flex: 1; min-width: 0; }

.footer-notfall-zeile strong {
	color: #fff;
	font-size: 0.95rem;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.footer-notfall-zeile:hover,
.footer-notfall-zeile:focus-visible { color: #fff; }
.footer-notfall-zeile:hover strong,
.footer-notfall-zeile:focus-visible strong { color: #ff9a90; }

/* Schlusszeile */
.footer-bottom { background: #071f2c; padding: 1.1rem 0; }

.footer-bottom .container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.55);
}

.footer-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-legal a {
	color: rgba(255, 255, 255, 0.62);
	text-decoration: none;
	transition: color .2s ease;
}

.footer-legal a:hover { color: #fff; }

.praxis-footer .pix-herz { color: #ff8095; }

.footer-credit { color: #7ec4dd; font-weight: 600; text-decoration: none; }
.footer-credit:hover { color: #fff; }

.footer-top-btn {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: transparent;
	color: #fff;
	display: grid;
	place-items: center;
	transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}

.footer-top-btn:hover {
	background: var(--primary-ci);
	border-color: var(--primary-ci);
	transform: translateY(-2px);
}

@media (max-width: 991.98px) {
	/* Gestapelt ist die Karte deutlich höher – ein fester Überhang von 118px
	   würde sie fast ganz ins Dunkle ziehen. Deshalb hier flacher eintauchen. */
	.footer-cta { padding: 1.75rem; margin-bottom: -70px; }
	.footer-main { padding-top: 140px; }
	.footer-bottom .container { justify-content: center; text-align: center; }
}

/* ----------------------------------------------------------------------
   20. Hero-Ausbau: Verlaufs-Akzentwort, Schnellzugriff, EKG-Linie
   ---------------------------------------------------------------------- */

/* Inhalt liegt über den Deko-Ebenen (Blobs, EKG-Linie) */
.hero-praxis > .container { position: relative; z-index: 1; }

/* Akzentwort der Überschriften im CI-Verlauf. WICHTIG: background-image
   statt background-Shorthand, und nur wenn der Browser Text-Clipping kann –
   sonst stünde ein Farbkasten hinter unsichtbarem Text. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.hero-title .text-primary-ci,
	.page-hero .section-title .text-primary-ci {
		background-image: linear-gradient(120deg, var(--primary-ci) 0%, #2f9dc4 55%, #1d6c8a 100%);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}

/* Weicher Lichtschein hinter dem Hero-Bild */
.hero-bild::before {
	content: '';
	position: absolute;
	inset: -30px;
	background: radial-gradient(circle at 65% 35%, rgba(47, 157, 196, 0.18), transparent 60%);
	filter: blur(10px);
	z-index: 0;
	pointer-events: none;
}

/* Schnellzugriff: die drei häufigsten Anliegen als Karten unter dem Hero */
.hero-schnellzugriff {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1rem;
	margin-top: 3rem;
}

.hero-schnell-karte {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	background: rgba(255, 255, 255, 0.75);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(34, 124, 157, 0.14);
	border-radius: 16px;
	padding: 0.95rem 1.15rem;
	text-decoration: none;
	box-shadow: 0 8px 24px rgba(10, 54, 74, 0.06);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
}

.hero-schnell-karte:hover,
.hero-schnell-karte:focus-visible {
	transform: translateY(-3px);
	background: #fff;
	border-color: rgba(34, 124, 157, 0.32);
	box-shadow: 0 14px 30px rgba(34, 124, 157, 0.14);
}

.hero-schnell-icon {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 13px;
	background: linear-gradient(135deg, var(--primary-ci) 0%, #2f9dc4 100%);
	color: #fff;
	font-size: 1.05rem;
	box-shadow: 0 6px 14px rgba(34, 124, 157, 0.24);
}

/* Notfall-Karte: rote Kachel, damit sie sofort ins Auge fällt */
.hero-schnell-icon--notfall {
	background: linear-gradient(135deg, #c53030 0%, #e05252 100%);
	box-shadow: 0 6px 14px rgba(197, 48, 48, 0.24);
}

.hero-schnell-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.hero-schnell-text strong { color: var(--heading-color); font-size: 0.95rem; }
.hero-schnell-text span   { color: var(--text-muted); font-size: 0.78rem; }

.hero-schnell-pfeil {
	margin-left: auto;
	color: var(--primary-ci);
	font-size: 0.8rem;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity .25s ease, transform .25s ease;
}

.hero-schnell-karte:hover .hero-schnell-pfeil,
.hero-schnell-karte:focus-visible .hero-schnell-pfeil { opacity: 1; transform: none; }

/* EKG-Linie am unteren Hero-Rand: ruhige Grundlinie, darüber wandert
   alle paar Sekunden ein Puls durch (nur ohne Reduzierte-Bewegung-Wunsch) */
.hero-ekg {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 8px;
	width: 100%;
	height: 58px;
	z-index: 0;
	pointer-events: none;
}

.hero-ekg path {
	fill: none;
	stroke: var(--primary-ci);
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.hero-ekg-linie { opacity: 0.10; }

.hero-ekg-puls {
	opacity: 0.35;
	stroke-dasharray: 90 1600;
	stroke-dashoffset: 1690;
	animation: hero-ekg-wandern 7s linear infinite;
}

@keyframes hero-ekg-wandern {
	to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.hero-ekg-puls { display: none; }
}

@media (max-width: 991.98px) {
	.hero-schnellzugriff { margin-top: 2.25rem; }
	.hero-ekg { height: 40px; bottom: 4px; }
}

/* Auf dem Handy stehen „Termin" und „Rezept" nebeneinander, „Notfall" nimmt die
   volle Breite. Bei drei gleich breiten Spalten bliebe rechts sonst eine Lücke. */
@media (max-width: 767.98px) {
	.hero-schnellzugriff {
		grid-template-columns: 1fr 1fr;
		gap: 0.75rem;
	}

	.hero-schnell-karte {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.6rem;
		padding: 0.9rem;
	}

	/* Die Notfall-Karte (letzte) über beide Spalten und wieder waagerecht.
	   Direktes Kind des Rasters ist das <a> selbst, nicht ein <div>. */
	.hero-schnellzugriff > :last-child {
		grid-column: 1 / -1;
		flex-direction: row;
		align-items: center;
		gap: 0.9rem;
	}

	.hero-schnell-text strong { font-size: 0.88rem; }
	.hero-schnell-text span   { font-size: 0.72rem; }
	.hero-schnell-pfeil { display: none; }
	.hero-schnellzugriff > :last-child .hero-schnell-pfeil { display: block; }
}

/* ----------------------------------------------------------------------
   21. Sprechzeiten-Karte und Neuigkeiten-Kacheln (Startseite)
   ---------------------------------------------------------------------- */

/* Sprechzeiten: Akzentkante oben, kompakte Status-Pille im Kopf */
.sz-karte { border-top: 4px solid var(--primary-ci); }

.sz-status { font-size: 0.72rem; padding: 0.3rem 0.7rem; }

.sz-liste {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

.sz-liste li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 0.65rem 0.75rem;
	border-radius: 12px;
}

.sz-liste li + li { margin-top: 0.25rem; }

.sz-tage {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 700;
	color: var(--text-dark);
	white-space: nowrap;
}

.sz-zeit { color: var(--text-muted); text-align: right; }
.sz-hinweis { display: block; font-size: 0.78rem; color: var(--text-muted); }

/* geschlossene Tage in ruhigem Rot */
.sz-zu .sz-tage,
.sz-zu .sz-zeit { color: #c94f5f; }

/* Zeile des heutigen Wochentags */
.sz-heute { background: var(--primary-light); }
.sz-heute .sz-zeit { color: var(--primary-ci); font-weight: 600; }

.sz-heute-chip {
	font-size: 0.62rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	background: var(--primary-ci);
	color: #fff;
	border-radius: 50px;
	padding: 0.14rem 0.5rem;
}

.sz-heute.sz-zu { background: rgba(201, 79, 95, 0.08); }
.sz-heute.sz-zu .sz-heute-chip { background: #c94f5f; }
.sz-heute.sz-zu .sz-zeit { color: #c94f5f; }

/* Telefonzeile: ganze Fläche klickbar */
.sz-telefon {
	display: flex;
	align-items: center;
	gap: 1rem;
	background: #f8f9fa;
	border: 1px solid rgba(34, 124, 157, 0.14);
	border-radius: 14px;
	padding: 0.9rem 1.1rem;
	text-decoration: none;
	transition: background-color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.sz-telefon:hover,
.sz-telefon:focus-visible {
	background: var(--primary-light);
	border-color: rgba(34, 124, 157, 0.32);
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(34, 124, 157, 0.12);
}

.sz-telefon-icon {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 13px;
	background: linear-gradient(135deg, var(--primary-ci) 0%, #2f9dc4 100%);
	color: #fff;
	font-size: 1.05rem;
	box-shadow: 0 6px 14px rgba(34, 124, 157, 0.24);
}

.sz-telefon-text { display: flex; flex-direction: column; line-height: 1.3; }
.sz-telefon-text span { font-size: 0.78rem; color: var(--text-muted); }
.sz-telefon-text strong { font-size: 1.08rem; color: var(--heading-color); letter-spacing: 0.01em; }

.sz-telefon-pfeil {
	margin-left: auto;
	color: var(--primary-ci);
	font-size: 0.8rem;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity .25s ease, transform .25s ease;
}

.sz-telefon:hover .sz-telefon-pfeil,
.sz-telefon:focus-visible .sz-telefon-pfeil { opacity: 1; transform: none; }

/* Neuigkeiten: ganze Kachel ist der Link */
.news-kachel {
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
	padding: 1rem 1.1rem;
	border-radius: 16px;
	background: #f8f9fa;
	border: 1px solid transparent;
	text-decoration: none;
	transition: background-color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.news-kachel--hervor { background: var(--primary-light); }

.news-kachel:hover,
.news-kachel:focus-visible {
	background: #fff;
	border-color: rgba(34, 124, 157, 0.25);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(34, 124, 157, 0.12);
}

.news-kachel-icon {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: var(--bg-card);
	color: var(--primary-ci);
	font-size: 1rem;
	box-shadow: 0 4px 10px rgba(10, 54, 74, 0.06);
}

.news-kachel--hervor .news-kachel-icon {
	background: linear-gradient(135deg, var(--primary-ci) 0%, #2f9dc4 100%);
	color: #fff;
	box-shadow: 0 6px 14px rgba(34, 124, 157, 0.24);
}

.news-kachel-text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.news-kachel-kopf {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.2rem 0.9rem;
}

.news-kachel-kopf strong { color: var(--heading-color); font-size: 0.95rem; line-height: 1.35; }

.news-kachel-datum {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--primary-ci);
	white-space: nowrap;
}

.news-kachel-untertitel { color: var(--text-muted); font-size: 0.85rem; line-height: 1.55; }

.news-kachel-pfeil {
	margin-left: auto;
	align-self: center;
	flex-shrink: 0;
	color: var(--primary-ci);
	font-size: 0.8rem;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity .25s ease, transform .25s ease;
}

.news-kachel:hover .news-kachel-pfeil,
.news-kachel:focus-visible .news-kachel-pfeil { opacity: 1; transform: none; }

/* ----------------------------------------------------------------------
   22. Kontaktabschnitt (auf jeder Seite über der Fußzeile)
   ---------------------------------------------------------------------- */

/* Notfallkarte: rot getönte Fläche, Nummern als klickbare Pillen */
.notfall-karte {
	display: flex;
	align-items: flex-start;
	gap: 1.1rem;
	background: #fdf2f3;
	border: 1px solid rgba(197, 48, 48, 0.18);
	border-radius: var(--card-radius, 20px);
	padding: 1.5rem 1.6rem;
}

.notfall-icon {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: linear-gradient(135deg, #c53030 0%, #e05252 100%);
	color: #fff;
	font-size: 1.2rem;
	box-shadow: 0 8px 18px rgba(197, 48, 48, 0.25);
}

.notfall-text h3 {
	font-size: 1.05rem;
	font-weight: 700;
	color: #9c2b33;
	margin-bottom: 0.65rem;
}

.notfall-nummern { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.notfall-nummer {
	display: inline-flex;
	align-items: baseline;
	gap: 0.45rem;
	background: var(--bg-card);
	border: 1px solid rgba(197, 48, 48, 0.22);
	border-radius: 50px;
	padding: 0.45rem 1rem;
	text-decoration: none;
	transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}

.notfall-nummer strong { color: #b03038; font-size: 1.05rem; letter-spacing: 0.01em; }
.notfall-nummer small  { color: var(--text-muted); font-size: 0.72rem; font-weight: 600; }

.notfall-nummer:hover,
.notfall-nummer:focus-visible {
	background: #b03038;
	border-color: #b03038;
	transform: translateY(-2px);
}

.notfall-nummer:hover strong,
.notfall-nummer:hover small,
.notfall-nummer:focus-visible strong,
.notfall-nummer:focus-visible small { color: #fff; }

/* Praxisdaten: Zeilen mit heller Symbolkachel */
.k-zeile { display: flex; align-items: flex-start; gap: 0.95rem; }
.k-zeile + .k-zeile { margin-top: 1.1rem; }

.k-zeile-icon {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--primary-light);
	color: var(--primary-ci);
	font-size: 0.95rem;
}

/* Formularkarte: gleiche Akzentkante wie die Sprechzeiten-Karte der Startseite */
.kontakt-form-karte { border-top: 4px solid var(--primary-ci); }

/* Kontaktweg-Karten (Kontaktseite): ganze Fläche klickbar, gleiche Höhe */
.weg-karte {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	height: 100%;
	background: var(--bg-card);
	border: 1px solid rgba(10, 54, 74, 0.06);
	border-radius: var(--card-radius, 20px);
	padding: 1.75rem;
	text-decoration: none;
	box-shadow: var(--shadow-soft);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.weg-karte:hover,
.weg-karte:focus-visible {
	transform: translateY(-4px);
	border-color: rgba(34, 124, 157, 0.22);
	box-shadow: var(--shadow-hover);
}

.weg-icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 15px;
	background: linear-gradient(135deg, var(--primary-ci) 0%, #2f9dc4 100%);
	color: #fff;
	font-size: 1.25rem;
	margin-bottom: 1.25rem;
	box-shadow: 0 8px 18px rgba(34, 124, 157, 0.22);
	transition: transform .3s ease;
}

.weg-karte:hover .weg-icon { transform: translateY(-2px) scale(1.04); }

.weg-karte h3 {
	font-size: 0.74rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--primary-ci);
	margin-bottom: 0.35rem;
}

.weg-wert {
	font-size: 1.16rem;
	font-weight: 700;
	color: var(--heading-color);
	margin-bottom: 0.6rem;
	line-height: 1.3;
}

.weg-text {
	color: var(--text-muted);
	font-size: 0.88rem;
	line-height: 1.6;
	margin-bottom: 1.1rem;
}

/* Fußzeile der Karte sitzt immer unten – Karten bleiben optisch gleich hoch */
.weg-karte .status-pille,
.weg-hinweis { margin-top: auto; }

.weg-hinweis {
	display: inline-flex;
	align-items: center;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--primary-ci);
}

/* Dunkle Karte (z.B. „24-Std. Blutdruck"). Das CI-Türkis erreicht auf diesem
   dunklen Grund nur ~2,8:1 – zu wenig, um die Symbole sicher zu erkennen.
   Auf dunklem Grund deshalb eine aufgehellte Variante (~6,8:1). */
.bento-card--dunkel {
	background-color: var(--text-dark);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.08);
}

/* .text-primary-ci setzt seine Farbe mit !important – hier muss dieselbe
   Stärke gegengehalten werden, sonst bleibt das Symbol im dunklen Blau. */
.bento-card--dunkel .text-primary-ci,
.bento-card--dunkel .text-primary-ci i,
.bento-card--dunkel i.text-primary-ci { color: #7ec4dd !important; }

.bento-card--dunkel .text-white-50 { color: rgba(255, 255, 255, 0.72) !important; }

.bento-card--dunkel:hover { border-color: rgba(126, 196, 221, 0.35); }

/* Praxisteam: Portrait bzw. Initialen in gleicher Bildsprache wie die Symbolkacheln */
.team-portrait,
.team-initialen {
	width: 148px;
	height: 148px;
	border-radius: 50%;
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .3s ease, box-shadow .3s ease;
}

.team-portrait {
	object-fit: cover;
	box-shadow: 0 10px 24px rgba(10, 54, 74, 0.14);
	border: 3px solid #fff;
	outline: 2px solid rgba(34, 124, 157, 0.18);
	outline-offset: 1px;
}

.team-initialen {
	background: linear-gradient(135deg, var(--primary-ci) 0%, #2f9dc4 100%);
	color: #fff;
	font-weight: 700;
	font-size: 2.1rem;
	letter-spacing: 0.02em;
	box-shadow: 0 10px 24px rgba(34, 124, 157, 0.26);
}

.bento-card:hover .team-portrait,
.bento-card:hover .team-initialen {
	transform: translateY(-3px) scale(1.03);
	box-shadow: 0 14px 30px rgba(34, 124, 157, 0.3);
}

/* ----------------------------------------------------------------------
   15. Hero der Startseite
   ---------------------------------------------------------------------- */
.hero-praxis {
	position: relative;
	margin-top: 0;
	padding: 7.5rem 0 4rem;
	overflow: hidden;
	background: linear-gradient(170deg, var(--primary-light) 0%, rgba(230, 245, 251, 0.35) 46%, var(--bg-body) 100%);
}

/* Zwei weiche Farbflächen im Hintergrund – geben Tiefe, ohne abzulenken */
.hero-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	pointer-events: none;
	z-index: 0;
}

.hero-blob--1 {
	width: 460px; height: 460px;
	top: -170px; right: -110px;
	background: radial-gradient(circle, rgba(34, 124, 157, 0.22) 0%, rgba(34, 124, 157, 0) 70%);
}

.hero-blob--2 {
	width: 380px; height: 380px;
	bottom: -160px; left: -120px;
	background: radial-gradient(circle, rgba(47, 157, 196, 0.16) 0%, rgba(47, 157, 196, 0) 70%);
}

.hero-kopfzeile {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	justify-content: center;
}

@media (min-width: 992px) {
	.hero-kopfzeile { justify-content: flex-start; }
}

/* Live-Status der Sprechzeiten */
.status-pille {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.4rem 0.9rem;
	border-radius: 50px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.status-pille--offen { background: #e7f6ec; color: #1a7a3c; }
.status-pille--zu    { background: #f1f3f5; color: #6c757d; }

.status-punkt {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}

.status-pille--offen .status-punkt { animation: status-puls 2s ease-in-out infinite; }

@keyframes status-puls {
	0%, 100% { box-shadow: 0 0 0 0 rgba(26, 122, 60, 0.5); }
	50%      { box-shadow: 0 0 0 6px rgba(26, 122, 60, 0); }
}

/* Die beiden Hero-Schaltflächen sollen nebeneinander bleiben, solange es
   die Spaltenbreite zulässt – knappes Padding statt Umbruch bei 5 Pixeln. */
.hero-praxis .btn-pill { padding-left: 1.5rem; padding-right: 1.5rem; }

/* Telefon als gleichwertiger zweiter Weg neben der Terminanfrage */
.btn-telefon {
	background: var(--bg-card);
	color: var(--primary-ci);
	border: 1px solid rgba(34, 124, 157, 0.25);
	box-shadow: 0 6px 18px rgba(10, 54, 74, 0.06);
	font-weight: 700;
}

.btn-telefon:hover,
.btn-telefon:focus {
	background: var(--primary-light);
	color: var(--primary-ci);
	border-color: var(--primary-ci);
}

/* Leistungsuebersicht (view_leistungen.inc.php), Stand 23.08.2026
   Zwei breite Spalten ab 992px, darunter eine. Drei schmale Spalten passten
   nicht zu Kategorien mit 2 bis 13 Punkten: entweder Loecher unter den kurzen
   Kacheln oder (als Mauerwerk) eine zerrissene Reihenfolge. Breite Kacheln
   brechen seltener um, die Zeilenhoehen liegen naeher beieinander; die Reihen
   sind oben und unten buendig (Standard-Stretch des Rasters).
   -------------------------------------------------------------------- */
.leistungen-raster {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
.leistungen-kachel .lk-karte { height: 100%; }

/* Kopfzeile: Symbol neben dem Titel (wie Sprechzeiten/Praxisdaten) */
.lk-kopf {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.25rem;
}
.lk-kopf .icon-box { flex-shrink: 0; }
.lk-kopf-text { min-width: 0; }
.lk-kopf-text h2 { text-wrap: balance; }

/* Mehrspaltige Listen: jeder Punkt bleibt beisammen */
.lk-karte .service-list li { break-inside: avoid; }

@media (min-width: 992px) {
	.leistungen-raster { grid-template-columns: repeat(2, 1fr); }

	/* Letzte Kachel allein in ihrer Reihe -> volle Breite, Liste zweispaltig.
	   nth-child(odd) trifft bei 2 Spalten genau die Kachel, die sonst links
	   neben einer Luecke stuende. Kommt im CMS eine 10. Kategorie dazu, greift
	   die Regel automatisch nicht mehr - nichts zu pflegen. */
	.leistungen-raster > .leistungen-kachel:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.leistungen-raster > .leistungen-kachel:last-child:nth-child(odd) .service-list {
		columns: 2;
		column-gap: 2.5rem;
	}
	/* In Spalten greift li+li-margin-top nur innerhalb einer Spalte; damit die
	   erste Zeile jeder Spalte buendig startet, Abstand einheitlich nach unten */
	.leistungen-raster > .leistungen-kachel:last-child:nth-child(odd) .service-list li { margin-top: 0; margin-bottom: 0.55rem; }
}
@media (min-width: 1200px) {
	.leistungen-raster > .leistungen-kachel:last-child:nth-child(odd) .service-list { columns: 3; }
}

/* Telefonnummern im Zustand „gerade geschlossen" (Wunsch 23.08.2026)
   Gleiche Sprache wie der Navigationsknopf .btn-anruf--zu: Rot + Hoerer mit
   Schraegstrich. Die Links bleiben ueberall waehlbar – die Nummer soll
   erreichbar sein (Anrufbeantworter, Notfall) – nur die Einladung zum Anrufen
   faellt weg. Rot hier gedeckt (#c0392b), weil diese Flaechen auf hellem Grund
   liegen; der gefuellte Navigationsknopf braucht den kraeftigeren Verlauf.
   -------------------------------------------------------------------- */

/* Hero: heller Umriss-Knopf mit der Rufnummer */
.btn-telefon--zu {
	color: #c0392b;
	border-color: rgba(192, 57, 43, 0.35);
	background: rgba(192, 57, 43, 0.05);
}
.btn-telefon--zu:hover,
.btn-telefon--zu:focus {
	color: #a93226;
	background: rgba(192, 57, 43, 0.1);
	border-color: #c0392b;
}

/* Kontaktseite: Karte „Anrufen" – nur das Symbol wechselt die Farbe,
   die Karte selbst bleibt ruhig (die Statuspille darin sagt die Worte). */
.weg-karte--zu .weg-icon {
	background: linear-gradient(135deg, #c0392b 0%, #a93226 100%);
}
.weg-karte--zu:hover,
.weg-karte--zu:focus-visible {
	border-color: rgba(192, 57, 43, 0.28);
}

/* Kontaktblock: Zeile „Tel:" – hier steht das Wort ausgeschrieben,
   weil in diesem Block sonst nichts den Status verraet. */
.k-zeile--zu .k-zeile-icon {
	background: rgba(192, 57, 43, 0.1);
	color: #c0392b;
}
.k-status-zu {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-left: 0.5rem;
	padding: 0.1rem 0.55rem;
	border-radius: 50px;
	background: rgba(192, 57, 43, 0.1);
	color: #a93226;
	font-size: 0.72rem;
	font-weight: 700;
	white-space: nowrap;
	vertical-align: middle;
}
/* Der Punkt erbt seine Farbe (currentColor) und pulst hier bewusst nicht */
.k-status-zu .status-punkt { animation: none; }

@media (max-width: 575.98px) {
	/* Auf schmalen Schirmen unter die Nummer statt daneben – sonst bricht
	   die Zeile mitten in der Rufnummer um. */
	.k-status-zu { margin-left: 0; margin-top: 0.35rem; }
}

/* Vertrauensmerkmale als ruhige Zeile mit Symbolen */
.hero-merkmale {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.4rem;
	justify-content: center;
}

.hero-merkmale li {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--text-muted);
}

.hero-merkmale i {
	color: var(--primary-ci);
	font-size: 0.95rem;
}

@media (min-width: 992px) {
	.hero-merkmale { justify-content: flex-start; }
}

/* Bild mit versetztem Akzentrahmen */
.hero-bild { position: relative; }

.hero-bild-rahmen {
	position: absolute;
	inset: 18px -18px -18px 18px;
	border: 2px solid rgba(34, 124, 157, 0.22);
	border-radius: 26px;
	pointer-events: none;
	z-index: 0;
}

.hero-praxis .hero-img-wrapper {
	position: relative;
	z-index: 1;
	border-radius: 22px;
	overflow: visible;
}

.hero-praxis .hero-img-wrapper img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 22px;
	box-shadow: 0 24px 55px rgba(10, 54, 74, 0.16);
}

/* Schwebende Karten am Bild */
.hero-karte {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 0.8rem;
	background: var(--bg-card);
	border-radius: 16px;
	padding: 0.85rem 1.15rem;
	box-shadow: 0 14px 34px rgba(10, 54, 74, 0.16);
	z-index: 2;
	max-width: 78%;
}

.hero-karte--arzt { left: -14px; bottom: 26px; }
.hero-karte--ort  { right: -14px; top: 26px; }

.hero-karte-icon {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 42px; height: 42px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--primary-ci) 0%, #2f9dc4 100%);
	color: #fff;
	font-size: 1.05rem;
}

.hero-karte-icon--hell {
	background: var(--primary-light);
	color: var(--primary-ci);
}

.hero-karte-text { display: flex; flex-direction: column; min-width: 0; }
.hero-karte-text strong { font-size: 0.94rem; color: var(--heading-color); line-height: 1.25; }
.hero-karte-text span   { font-size: 0.78rem; color: var(--text-muted); line-height: 1.3; }

@media (max-width: 991.98px) {
	.hero-praxis { padding: 6.5rem 0 3rem; }
	.hero-bild-rahmen { display: none; }
}

/* ----------------------------------------------------------------------
   Leitbild (Praxisseite, unter dem Team – _integration/i_leitbild.php)
   Baut auf bento-card / icon-box / service-list auf; hier nur, was diese
   Bausteine nicht hergeben: Signatur, Leitsatz-Karte, zweispaltige Liste.
   ---------------------------------------------------------------------- */
.leitbild-intro p { line-height: 1.75; }

.leitbild-signatur {
	margin-top: 1.25rem;
	font-weight: 700;
	color: var(--heading-color);
}
.leitbild-signatur::before {
	content: '—';
	margin-right: .5rem;
	color: var(--primary-ci);
}

/* Leitsatz auf der dunklen Karte: großes Anführungszeichen, ruhiger Schein
   unten rechts (wie die farbigen Blobs der Hero-Bereiche). */
.leitbild-zitat { position: relative; overflow: hidden; padding: 2.5rem; }
.leitbild-zitat > * { position: relative; z-index: 1; }
.leitbild-zitat::after {
	content: '';
	position: absolute;
	right: -70px;
	bottom: -70px;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(126, 196, 221, 0.28) 0%, transparent 70%);
	pointer-events: none;
}
.leitbild-zitat-zeichen {
	display: block;
	font-size: 2.2rem;
	margin-bottom: 1rem;
}
.leitbild-zitat blockquote p {
	margin: 0;
	font-size: clamp(1.15rem, 1.6vw, 1.45rem);
	font-weight: 700;
	line-height: 1.45;
	color: #fff;
	text-wrap: balance;
}

/* Die neun Punkte der Patientenorientierung ab Tablet zweispaltig –
   einspaltig wäre die Karte doppelt so hoch wie ihre Nachbarn. */
@media (min-width: 768px) {
	.leitbild-liste { columns: 2; column-gap: 2rem; }
	.leitbild-liste li { break-inside: avoid; }
}

@media (max-width: 575.98px) {
	.leitbild-zitat { padding: 1.75rem; }
	.leitbild-zitat-zeichen { font-size: 1.8rem; }
}

/* ----------------------------------------------------------------------
   Mitgliedschaften (Infos-Seite, Karte „Qualität & Werte")
   Mehrere Einträge untereinander, durch feine Linien getrennt.
   ---------------------------------------------------------------------- */
.mitglied-titel {
	font-size: .72rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--primary-dark);
	margin: 0 0 .75rem;
}
.mitglied-zeile + .mitglied-zeile {
	margin-top: .75rem;
	padding-top: .75rem;
	border-top: 1px solid rgba(34, 124, 157, 0.14);
}

/* ----------------------------------------------------------------------
   Leitbild-Teaser (Startseite, _integration/i_leitbild_teaser.php)
   Nutzt die Leitsatz-Karte von der Praxisseite (.leitbild-zitat) und
   ergänzt nur Anriss, Grundsatz-Chips und die Team-Gesichter.
   ---------------------------------------------------------------------- */
.lt-zitat-quelle {
	display: block;
	margin-top: 1.25rem;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.62);
}

.lt-karte { display: flex; flex-direction: column; }
/* Als Flex-Kind würde das Badge sonst auf Kartenbreite gestreckt */
.lt-karte > .badge-ci { align-self: flex-start; }
.lt-titel { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 1rem; }
.lt-text {
	font-size: 1.05rem;
	line-height: 1.65;
	color: var(--heading-color);
	font-weight: 500;
	margin-bottom: 1.5rem;
}
.lt-text-quelle {
	display: block;
	margin-top: .35rem;
	font-size: .85rem;
	font-weight: 700;
	color: var(--primary-dark);
}

/* Die drei Grundsätze als gleich breite Kacheln. Als Pillen in einer Zeile
   brauchten sie 648 px – die Karte bietet bei 1280 px nur 575; der Umbruch
   2 + 1 sah nach Zufall aus. Drei Spalten sind absichtlich. */
.lt-grundsaetze {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .6rem;
	margin: 0 0 1.75rem;
	padding: 0;
}
.lt-grundsaetze li {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	min-width: 0;
	padding: .85rem .6rem;
	border-radius: 14px;
	background: var(--primary-light);
	color: var(--primary-dark);
	font-size: .8rem;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	text-wrap: balance;
}
.lt-grundsaetze li i { font-size: 1rem; color: var(--primary-ci); }
@media (max-width: 575.98px) {
	.lt-grundsaetze { grid-template-columns: 1fr; gap: .5rem; }
	.lt-grundsaetze li { flex-direction: row; justify-content: flex-start; text-align: left; gap: .65rem; padding: .65rem .85rem; }
}

/* Fußzeile der Karte: Team-Gesichter links, Knopf rechts */
.lt-fuss {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.5rem;
	flex-wrap: wrap;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(34, 124, 157, 0.12);
}
.lt-team {
	display: inline-flex;
	align-items: center;
	gap: .85rem;
	text-decoration: none;
	color: inherit;
	border-radius: 50rem;
}
.lt-avatare { display: inline-flex; align-items: center; }
.lt-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 3px solid #fff;
	box-shadow: 0 4px 12px rgba(10, 54, 74, 0.16);
	object-fit: cover;
	margin-left: -12px;
	background: var(--primary-light);
	transition: transform .25s ease;
}
.lt-avatar:first-child { margin-left: 0; }
.lt-avatar--initialen {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: .72rem;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(135deg, var(--primary-ci) 0%, #2f9dc4 100%);
}
.lt-team:hover .lt-avatar,
.lt-team:focus-visible .lt-avatar { transform: translateY(-2px); }
.lt-team-text { display: flex; flex-direction: column; line-height: 1.25; }
.lt-team-text strong { font-size: .92rem; color: var(--heading-color); }
.lt-team-text span { font-size: .8rem; font-weight: 600; color: var(--primary-ci); }
.lt-team-text span i { font-size: .7rem; margin-left: .2rem; transition: transform .2s ease; }
.lt-team:hover .lt-team-text span i { transform: translateX(3px); }

@media (max-width: 575.98px) {
	.lt-fuss { flex-direction: column; align-items: stretch; }
	.lt-btn { width: 100%; }
	.lt-team { justify-content: center; }
}

/* ----------------------------------------------------------------------
   Stellen-Teaser (Startseite, _integration/i_stellen_teaser.php)
   Nur sichtbar bei aktiver Stelle. Stellenzeilen = .news-kachel (wie die
   Neuigkeiten), hier nur Karte, Titel und „weitere"-Link.
   ---------------------------------------------------------------------- */
.st-karte {
	position: relative;
	overflow: hidden;
	/* zarter CI-Schein oben links – hebt die Karte vom Leitbild-Teaser ab,
	   ohne laut zu werden */
	background:
		radial-gradient(circle at 0% 0%, var(--primary-light) 0%, transparent 38%),
		#fff;
}
.st-ico { width: 56px; height: 56px; font-size: 1.5rem; border-radius: 16px; }
.st-titel { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: .9rem; }
.st-text { font-size: 1rem; line-height: 1.65; margin-bottom: 1.5rem; }
.st-liste { display: flex; flex-direction: column; gap: .85rem; }
.st-mehr {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	align-self: flex-start;
	margin-top: .25rem;
	font-size: .85rem;
	font-weight: 700;
	color: var(--primary-ci);
	text-decoration: none;
}
.st-mehr i { font-size: .75rem; transition: transform .2s ease; }
.st-mehr:hover { color: var(--primary-dark); }
.st-mehr:hover i { transform: translateX(3px); }

@media (max-width: 991.98px) {
	/* Unter lg steht der Text über der Liste – dann zentriert wie der Hero */
	.st-karte .col-lg-5 { text-align: center; }
	.st-karte .st-ico { margin-inline: auto; }
}

/* ----------------------------------------------------------------------
   Stellen-Band (Startseite oben, _integration/i_stellen_banner.php)
   Ein Satz, ein Knopf – als Ganzes klickbar. Nur bei aktiver Stelle.
   ---------------------------------------------------------------------- */
.sb-band {
	display: flex;
	align-items: center;
	gap: 1rem 1.25rem;
	padding: 1rem 1.25rem 1rem 1rem;
	border-radius: 18px;
	background: linear-gradient(90deg, var(--primary-light) 0%, #ffffff 70%);
	border: 1px solid rgba(34, 124, 157, 0.18);
	box-shadow: 0 8px 24px rgba(34, 124, 157, 0.08);
	text-decoration: none;
	color: var(--heading-color);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.sb-band:hover,
.sb-band:focus-visible {
	color: var(--heading-color);
	transform: translateY(-2px);
	border-color: rgba(34, 124, 157, 0.4);
	box-shadow: 0 14px 32px rgba(34, 124, 157, 0.16);
}
.sb-ico {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--primary-ci) 0%, #2f9dc4 100%);
	color: #fff;
	font-size: 1.15rem;
	box-shadow: 0 6px 14px rgba(34, 124, 157, 0.28);
}
.sb-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.sb-kicker {
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--primary-dark);
}
.sb-text strong { font-size: 1rem; font-weight: 700; line-height: 1.3; }
.sb-cta {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .6rem 1.1rem;
	border-radius: 50rem;
	background: var(--primary-ci);
	color: #fff;
	font-size: .86rem;
	font-weight: 700;
	white-space: nowrap;
	transition: background-color .2s ease;
}
.sb-cta i { font-size: .75rem; transition: transform .2s ease; }
.sb-band:hover .sb-cta { background: var(--primary-dark); }
.sb-band:hover .sb-cta i { transform: translateX(3px); }

@media (max-width: 575.98px) {
	.sb-band { flex-wrap: wrap; padding: 1rem; }
	.sb-text { flex-basis: calc(100% - 64px); }
	.sb-cta { width: 100%; justify-content: center; margin-top: .25rem; }
}

/* ----------------------------------------------------------------------
   Navigation: Knopf „Jetzt anrufen" (_modules/p_nav.php)
   Ruhiger Puls-Ring um das Hörer-Symbol alle paar Sekunden, beim Überfahren
   wackelt der Hörer kurz. Bewusst dezent – der Knopf steht auf jeder Seite
   oben rechts und darf nicht nerven. Reduzierte Bewegung wird respektiert.
   ---------------------------------------------------------------------- */
.btn-anruf {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	padding-left: 1.1rem;
	white-space: nowrap;
}
.btn-anruf-ico {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 28px;
	margin-right: .6rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	font-size: .8rem;
	flex-shrink: 0;
}
.btn-anruf-ico::after {
	content: '';
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.7);
	opacity: 0;
	animation: anruf-puls 2.8s ease-out infinite;
}
@keyframes anruf-puls {
	0%   { transform: scale(.85); opacity: .85; }
	60%  { transform: scale(1.75); opacity: 0; }
	100% { transform: scale(1.75); opacity: 0; }
}
.btn-anruf:hover .btn-anruf-ico i,
.btn-anruf:focus-visible .btn-anruf-ico i {
	animation: anruf-wackeln .65s ease-in-out;
	transform-origin: 50% 60%;
}
/* Geschlossen-Zustand (Wunsch 23.08.2026)
   Ist die Praxis gerade zu, wird aus dem Anrufknopf ein rotes Statusfeld.
   Der Knopf bleibt ein tel:-Link – die Nummer soll erreichbar bleiben (AB,
   Notfall) – aber der Puls-Ring verschwindet: Es waere unehrlich, weiter zum
   Anrufen zu locken, wenn niemand rangeht. Rot ist hier bewusst neu; die
   graue .status-pille--zu der Sprechzeiten-Karte ist auf weissem Grund
   gedacht und wuerde im Navigationsknopf untergehen. */
.btn-anruf--zu {
	background: linear-gradient(135deg, #c0392b 0%, #a93226 100%);
	box-shadow: 0 8px 20px rgba(192, 57, 43, 0.25);
}
.btn-anruf--zu:hover,
.btn-anruf--zu:focus {
	box-shadow: 0 12px 28px rgba(192, 57, 43, 0.35);
}
/* Kein Puls im geschlossenen Zustand */
.btn-anruf--zu .btn-anruf-ico::after { content: none; }
/* Der Hoerer wackelt nur, solange Anrufen auch Sinn ergibt */
.btn-anruf--zu:hover .btn-anruf-ico i,
.btn-anruf--zu:focus-visible .btn-anruf-ico i { animation: none; }

@keyframes anruf-wackeln {
	0%   { transform: rotate(0); }
	20%  { transform: rotate(-16deg); }
	40%  { transform: rotate(14deg); }
	60%  { transform: rotate(-9deg); }
	80%  { transform: rotate(5deg); }
	100% { transform: rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
	.btn-anruf-ico::after,
	.btn-anruf:hover .btn-anruf-ico i,
	.btn-anruf:focus-visible .btn-anruf-ico i { animation: none; }
}
/* Im ausgeklappten Handymenü bleibt der Knopf volle Breite (w-100), das
   Symbol rückt zum Text auf */
@media (max-width: 991.98px) {
	.btn-anruf { justify-content: center; }
}

/* ----------------------------------------------------------------------
   Praxisteam: breite Karte für die Praxisleitung (_integration/i_team.php)
   Portrait links, Text rechts; darunter stehen die weiteren Personen zu
   dritt. Auf dem Handy stapelt die Karte und wird zentriert.
   ---------------------------------------------------------------------- */
.team-leitung {
	display: flex;
	align-items: center;
	gap: 2.25rem;
	padding: 2.25rem 2.5rem;
}
.team-leitung-text { flex: 1; min-width: 0; }
.team-leitung-text h3 { color: var(--heading-color); line-height: 1.2; }
.team-leitung-text p { line-height: 1.65; }

/* Das Portrait der Leitung ist bewusst deutlich größer als die der Reihe –
   es trägt die ganze Zeile allein. */
.team-portrait--gross {
	width: 210px;
	height: 210px;
	flex-shrink: 0;
	margin-inline: 0;
}
.team-initialen.team-portrait--gross { font-size: 3rem; }

/* Mehrere große Karten nebeneinander: halbe Breite, deshalb kleineres Portrait.
   Zwischen 992 und 1200 px reicht der Platz neben dem Bild nicht – dort stapeln. */
.team-leitung--halb { gap: 1.75rem; padding: 2rem; }
.team-leitung--halb .team-portrait--gross { width: 168px; height: 168px; }
.team-leitung--halb .team-initialen.team-portrait--gross { font-size: 2.4rem; }
.team-leitung--halb .team-leitung-text h3 { font-size: 1.5rem; text-wrap: balance; }

@media (min-width: 992px) and (max-width: 1199.98px) {
	.team-leitung--halb { flex-direction: column; text-align: center; gap: 1.5rem; }
}

@media (max-width: 767.98px) {
	.team-leitung {
		flex-direction: column;
		text-align: center;
		gap: 1.5rem;
		padding: 2rem 1.5rem;
	}
	.team-leitung-text h3 { font-size: 1.4rem; }

	/* Reihe darunter: etwas kleiner, damit die Karten nicht endlos hoch werden */
	.team-portrait, .team-initialen { width: 132px; height: 132px; }
	.team-initialen { font-size: 1.9rem; }

	/* MUSS nach der Regel oben stehen: gleiche Spezifität, die spätere gewinnt.
	   Andernfalls schrumpft das Portrait der Leitung auf Reihengröße mit. */
	.team-portrait--gross { width: 168px; height: 168px; margin-inline: auto; }
	.team-initialen.team-portrait--gross { font-size: 2.4rem; }
}