/* ============================================================
   site-custom.css — eigene Ergaenzungen, NICHT aus WordPress.
   Alles hier ist bewusst hinzugefuegt und in analysis/paritaet.md begruendet.
   ============================================================ */

/* ------------------------------------------------------------
   Oeffnungszeiten-Popup (Button im Footer, Dialog ueber der Seite)
   Farben und Typografie aus dem Avada-Theme: Tuerkis #2fb4cc, Lato.
   ------------------------------------------------------------ */

.pz-footer-leiste {
	background: #2fb4cc;
	padding: 22px 20px;
	/* Zwei Knöpfe nebeneinander, auf dem Telefon untereinander. `flex` statt
	   `text-align`, damit beide gleich hoch sind — bei unterschiedlich langer
	   Beschriftung säßen sie sonst versetzt. */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 12px;
	text-align: center;
}

.pz-knopf {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #ffffff;
	color: #1b3a44;
	border: 0;
	border-radius: 10px;
	padding: 15px 34px;
	font-family: inherit;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .02em;
	cursor: pointer;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}

.pz-knopf:hover,
.pz-knopf:focus-visible {
	background: #1b3a44;
	color: #ffffff;
}

.pz-knopf svg { flex: 0 0 auto; }

/* Der Dialog. <dialog> bringt Fokusfalle und Escape-Taste von sich aus mit —
   deshalb kein nachgebautes Overlay aus divs. */
.pz-dialog {
	width: min(520px, calc(100vw - 32px));
	max-height: calc(100vh - 48px);
	padding: 0;
	border: 0;
	border-radius: 4px;
	box-shadow: 0 18px 60px rgba(0, 0, 0, .35);
	color: #1b3a44;
	font-family: inherit;
	overflow: hidden;
}

.pz-dialog::backdrop { background: rgba(12, 32, 38, .62); }

.pz-dialog-kopf {
	background: #2fb4cc;
	color: #ffffff;
	padding: 20px 56px 20px 26px;
	position: relative;
}

.pz-dialog-kopf h2 {
	margin: 0;
	font-size: 21px;
	line-height: 1.3;
	color: #ffffff;
	font-weight: 700;
}

.pz-schliessen {
	position: absolute;
	top: 50%;
	right: 16px;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	background: rgba(255, 255, 255, .18);
	border: 0;
	border-radius: 50%;
	color: #ffffff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.pz-schliessen:hover { background: rgba(255, 255, 255, .34); }

.pz-dialog-inhalt {
	padding: 24px 26px 8px;
	overflow-y: auto;
	max-height: calc(100vh - 210px);
	font-size: 16px;
	line-height: 1.6;
}

.pz-dialog-inhalt p { margin: 0 0 14px; }

/* Urlaub zuerst und abgesetzt — das ist die Information, wegen der jemand
   den Knopf ueberhaupt drueckt. */
.pz-dialog-inhalt .pz-urlaub {
	background: #fdf3e3;
	border-left: 4px solid #e0a33c;
	padding: 14px 16px;
	margin-bottom: 18px;
	border-radius: 0 3px 3px 0;
}

.pz-dialog-inhalt .pz-urlaub p:last-child { margin-bottom: 0; }

.pz-dialog-inhalt .pz-tabelle {
	width: 100%;
	border-collapse: collapse;
	margin: 4px 0 18px;
}

.pz-dialog-inhalt .pz-tabelle th,
.pz-dialog-inhalt .pz-tabelle td {
	text-align: left;
	padding: 9px 12px;
	border-bottom: 1px solid #e2eaec;
}

.pz-dialog-inhalt .pz-tabelle th {
	font-weight: 700;
	color: #2fb4cc;
	border-bottom-width: 2px;
	border-bottom-color: #2fb4cc;
}

.pz-dialog-fuss {
	padding: 4px 26px 22px;
	font-size: 15px;
}

.pz-dialog-fuss a { color: #2fb4cc; font-weight: 700; }

@media (max-width: 480px) {
	.pz-knopf { width: 100%; justify-content: center; padding: 15px 18px; }
	.pz-dialog-inhalt { padding: 20px 18px 6px; }
	.pz-dialog-kopf { padding: 18px 52px 18px 18px; }
	.pz-dialog-fuss { padding: 4px 18px 20px; }
}

/* Ohne JavaScript oeffnet showModal() nicht. Dann steht der Inhalt als
   normaler Abschnitt in der Seite (<noscript> im Template) und der Knopf
   springt per Anker dorthin. */
.pz-ohne-js {
	max-width: 720px;
	margin: 0 auto;
	padding: 30px 24px 40px;
	font-size: 16px;
	line-height: 1.6;
}

.pz-ohne-js h2 {
	margin: 0 0 16px;
	font-size: 22px;
	color: #2fb4cc;
}

.pz-ohne-js .pz-urlaub {
	background: #fdf3e3;
	border-left: 4px solid #e0a33c;
	padding: 14px 16px;
	margin-bottom: 18px;
}

.pz-ohne-js .pz-tabelle { width: 100%; border-collapse: collapse; }

.pz-ohne-js .pz-tabelle th,
.pz-ohne-js .pz-tabelle td {
	text-align: left;
	padding: 9px 12px;
	border-bottom: 1px solid #e2eaec;
}

.pz-ohne-js .pz-tabelle th { color: #2fb4cc; border-bottom: 2px solid #2fb4cc; }


/* ------------------------------------------------------------
   Beitragskarten im Raster (/aktuelles/)
   Avada druckte den ganzen Beitrag in die Kachel — eine Karte war laenger
   als der Bildschirm. Der Konverter kuerzt jetzt auf einen Teaser
   (scripts/convert_pages.py: teaser_grid_cards), hier kommt die Optik dazu.
   ------------------------------------------------------------ */

.fusion-post-grid .fusion-post-wrapper {
	border: 1px solid #e2eaec !important;
	border-bottom: 3px solid #2fb4cc !important;
	border-radius: 3px;
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
	background: #fff;
	transition: box-shadow .2s ease, transform .2s ease;
}

.fusion-post-grid .fusion-post-wrapper:hover {
	box-shadow: 0 10px 28px rgba(27, 58, 68, .13);
	transform: translateY(-3px);
}

/* Einheitliches Bildformat — die Motive haben unterschiedliche Seitenverhaeltnisse,
   ohne feste Ratio stehen die Titel im Raster auf verschiedenen Hoehen. */
.fusion-post-grid .fusion-post-slideshow,
.fusion-post-grid .fusion-post-slideshow .slides,
.fusion-post-grid .fusion-post-slideshow li { margin: 0; border: 0 !important; }

.fusion-post-grid .fusion-post-slideshow .fusion-image-wrapper { display: block; }

.fusion-post-grid .fusion-post-slideshow img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.fusion-post-grid .fusion-post-content-wrapper {
	padding: 22px 24px 24px !important;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.fusion-post-grid .blog-shortcode-post-title { margin: 0 0 8px; }

.fusion-post-grid .blog-shortcode-post-title a {
	color: #1b3a44;
	font-size: 20px;
	line-height: 1.3;
	font-weight: 700;
}

.fusion-post-grid .blog-shortcode-post-title a:hover { color: #2fb4cc; }

/* Kategorien als leise Zeile — sie sind Einordnung, nicht Inhalt */
.fusion-post-grid .fusion-single-line-meta {
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.4;
	color: #7d9099;
	border-bottom: 1px solid #eef3f4;
	padding-bottom: 12px;
}

.fusion-post-grid .fusion-single-line-meta a { color: #7d9099; }
.fusion-post-grid .fusion-single-line-meta a:hover { color: #2fb4cc; }
.fusion-post-grid .fusion-inline-sep { display: none; }

.awb-teaser {
	margin: 0 0 18px;
	font-size: 15px;
	line-height: 1.65;
	color: #46626c;
	flex: 1 1 auto;
}

.awb-teaser-mehr { margin: 0; }

.awb-teaser-mehr a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #2fb4cc;
}

/* Pfeil als ::after statt als Zeichen im Markup — bleibt aus dem
   Vorlesefluss von Screenreadern heraus. */
.awb-teaser-mehr a::after {
	content: "";
	width: 14px;
	height: 9px;
	background: currentColor;
	transition: transform .2s ease;
	-webkit-mask: no-repeat center/contain url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M0 4.5h12M8.5 1l3.5 3.5L8.5 8' stroke='%23000' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	mask: no-repeat center/contain url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M0 4.5h12M8.5 1l3.5 3.5L8.5 8' stroke='%23000' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.awb-teaser-mehr a:hover { color: #1b3a44; }
.awb-teaser-mehr a:hover::after { transform: translateX(4px); }

@media (max-width: 640px) {
	.fusion-post-grid .fusion-post-content-wrapper { padding: 18px 18px 20px !important; }
	.fusion-post-grid .blog-shortcode-post-title a { font-size: 18px; }
}


/* ------------------------------------------------------------
   "Aktuelles"-Bloecke — gerendert aus data/beitraege.json (lib/beitraege.php)
   Zwei Layouts aus einer Quelle: kompakt fuer die Startseite, raster fuer die
   Archivseiten.
   ------------------------------------------------------------ */

.awb-beitraege { margin: 0; padding: 0; }

/* --- kompakt: Startseite ---
   Bewusst klein. Die Startseite traegt schon Hero, zwei Fachbereiche,
   Arztvorstellung, Video und Galerie — der Nachrichtenblock soll dort
   nicht mit der Terminbuchung konkurrieren. */
.awb-beitraege-kompakt { list-style: none; }

.awb-beitraege-kompakt .awb-beitrag { border-top: 1px solid #e2eaec; }
.awb-beitraege-kompakt .awb-beitrag:last-child { border-bottom: 1px solid #e2eaec; }

.awb-beitraege-kompakt .awb-beitrag > a {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 16px 4px;
	color: inherit;
}

.awb-beitraege-kompakt .awb-beitrag > a:hover .awb-beitrag-titel { color: #2fb4cc; }

.awb-beitrag-bild {
	flex: 0 0 auto;
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: 10px;
}

.awb-beitrag-text { display: block; min-width: 0; }

.awb-beitrag-titel {
	display: block;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: #1b3a44;
	transition: color .2s ease;
}

.awb-beitrag-datum {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	color: #7d9099;
}

.awb-beitrag-teaser {
	display: block;
	margin-top: 6px;
	font-size: 14px;
	line-height: 1.55;
	color: #46626c;
}

/* --- raster: Archivseiten --- */
.awb-beitraege-raster {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 30px;
}

.awb-karte {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e2eaec;
	border-bottom: 3px solid #2fb4cc;
	border-radius: 3px;
	overflow: hidden;
	transition: box-shadow .2s ease, transform .2s ease;
}

.awb-karte:hover { box-shadow: 0 10px 28px rgba(27, 58, 68, .13); transform: translateY(-3px); }

.awb-karte-bild { display: block; line-height: 0; }

.awb-karte-bild img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
}

.awb-karte-inhalt { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1 1 auto; }

.awb-karte-titel { margin: 0 0 8px; font-size: 20px; line-height: 1.3; }
.awb-karte-titel a { color: #1b3a44; font-weight: 700; }
.awb-karte-titel a:hover { color: #2fb4cc; }

.awb-karte-meta {
	margin: 0 0 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid #eef3f4;
	font-size: 13px;
	color: #7d9099;
}

.awb-karte-teaser {
	margin: 0 0 18px;
	font-size: 15px;
	line-height: 1.65;
	color: #46626c;
	flex: 1 1 auto;
}

.awb-karte-mehr { margin: 0; }

.awb-karte-mehr a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #2fb4cc;
}

.awb-karte-mehr a::after {
	content: "";
	width: 14px;
	height: 9px;
	background: currentColor;
	transition: transform .2s ease;
	-webkit-mask: no-repeat center/contain url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M0 4.5h12M8.5 1l3.5 3.5L8.5 8' stroke='%23000' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	mask: no-repeat center/contain url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M0 4.5h12M8.5 1l3.5 3.5L8.5 8' stroke='%23000' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.awb-karte-mehr a:hover { color: #1b3a44; }
.awb-karte-mehr a:hover::after { transform: translateX(4px); }

@media (max-width: 640px) {
	.awb-beitraege-raster { grid-template-columns: 1fr; gap: 22px; }
	.awb-karte-inhalt { padding: 18px 18px 20px; }
	.awb-karte-titel { font-size: 18px; }
	.awb-beitrag-bild { width: 60px; height: 60px; }
}


/* ------------------------------------------------------------
   Bildergalerien — Abstand, runde Ecken, Masonry
   Avada lieferte sie fugenlos aneinander und im starren Raster; die Motive
   haben unterschiedliche Seitenverhaeltnisse und wurden beschnitten.
   Das Layout stellt der Konverter auf masonry (isotope liegt ohnehin bei),
   Abstand und Radius kommen von hier.
   ------------------------------------------------------------ */

.awb-gallery-wrapper .fusion-gallery-container { margin: -8px !important; }

.awb-gallery-wrapper .fusion-gallery-column { padding: 8px !important; }

/* Radius auf den Rahmen, nicht aufs <img>: Avada legt Lightbox-Link und
   Bild ineinander; ohne overflow am Wrapper stehen die Ecken ueber. */
.awb-gallery-wrapper .fusion-gallery-image {
	overflow: hidden;
	border-radius: 15px;
	line-height: 0;
}

.awb-gallery-wrapper .fusion-gallery-image img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform .3s ease;
}

.awb-gallery-wrapper .fusion-gallery-image:hover img { transform: scale(1.03); }

@media (max-width: 640px) {
	.awb-gallery-wrapper .fusion-gallery-container { margin: -5px !important; }
	.awb-gallery-wrapper .fusion-gallery-column { padding: 5px !important; }
	.awb-gallery-wrapper .fusion-gallery-image { border-radius: 12px; }
}


/* ------------------------------------------------------------
   Copyright-Zeile im Footer schmaler

   Avada gibt der letzten Footer-Reihe 40 px Innenabstand oben und unten —
   für eine Zeile Kleingedrucktes ein 108 px hoher Block. `!important` ist
   hier kein Holzhammer, sondern nötig: die Werte stehen als Inline-Variablen
   am Element, dagegen kommt eine normale Regel nicht an.

   Angesteuert wird über die Stellung im Footer, nicht über Avadas
   Zählklasse (`fusion-builder-row-9`) — die heißt je Seite anders.
   ------------------------------------------------------------ */
.fusion-tb-footer > .fusion-fullwidth:last-child {
	--awb-padding-top: 14px !important;
	--awb-padding-bottom: 14px !important;
}


/* ------------------------------------------------------------
   Zertifikate (/vita/) — kleine Kacheln im Format 3:4

   Elf Urkunden im Masonry-Layout waren gut 3300 px hoch. Sie belegen
   etwas, sie werden nicht gelesen: klein zeigen, per Klick gross
   (die Lightbox bleibt). Vier nebeneinander am Desktop, drei auf dem
   Telefon — bei 375 px sind das rund 110 px breite Kacheln, genug, um
   „Zertifikat" und den Namen zu erkennen.

   `object-position: top`: der Kopf der Urkunde traegt die Information
   (Name, Titel, Datum), unten steht die Unterschrift.

   Das Markup bereitet `zertifikatsgalerie_kompakt` in
   scripts/convert_pages.py auf — insbesondere faellt dort die Klasse
   `fusion-gallery-layout-masonry` weg, sonst positioniert Avadas isotope
   dieses Raster im Browser wieder auseinander.
   ------------------------------------------------------------ */
.awb-gallery-wrapper .awb-zertifikate {
	display: grid;
	/* Vier Kacheln à 250 px — mehr Breite braucht eine Belegsammlung nicht.
	   Der Deckel liegt am Raster, nicht an der Kachel: sonst stünden vier
	   250er in einer 1140er Spalte mit ungleichen Lücken. */
	grid-template-columns: repeat(4, minmax(0, 250px));
	gap: 12px;
	margin: 0 !important;
}

/* `display: block` ist Pflicht, kein Aufräumen: Avada blendet
   `.fusion-gallery-column` grundsätzlich aus und schaltet sie erst über das
   Klassenpaar `fusion-grid-N` / `fusion-gallery-column-N` wieder ein. Beide
   Klassen fallen beim Umbau weg — ohne diese Zeile bleibt die Galerie leer
   (Container 1140 x 0 px). */
.awb-gallery-wrapper .awb-zertifikate .fusion-gallery-column {
	display: block !important;
	padding: 0 !important;
	width: auto !important;
	float: none !important;
	position: static !important;
}

.awb-gallery-wrapper .awb-zertifikate .fusion-gallery-image {
	border: 1px solid #e3ddd0;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}

.awb-gallery-wrapper .awb-zertifikate .fusion-gallery-image:hover {
	transform: translateY(-3px);
	border-color: var(--vita-farbe, #2eb4cc);
	box-shadow: 0 10px 26px rgba(27, 58, 68, .18);
}

.awb-gallery-wrapper .awb-zertifikate .fusion-gallery-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: top center;
	transition: transform .35s ease;
}

.awb-gallery-wrapper .awb-zertifikate .fusion-gallery-image:hover img { transform: scale(1.05); }

@media (max-width: 1100px) {
	.awb-gallery-wrapper .awb-zertifikate { grid-template-columns: repeat(3, minmax(0, 250px)); gap: 10px; }
}

@media (max-width: 640px) {
	.awb-gallery-wrapper .awb-zertifikate { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
	.awb-gallery-wrapper .awb-zertifikate .fusion-gallery-image { border-radius: 8px; }
}


/* ---- Urkunde in der Bildmitte (assets/js/zertifikate.js) -----------
   Der Klon liegt über der Seite und wandert aus der Kachel in die Mitte;
   dahinter wird die Seite unscharf. `backdrop-filter` hat einen Rückfall:
   wo es fehlt, deckt die Fläche etwas stärker ab, damit die Urkunde
   trotzdem freisteht.
   ------------------------------------------------------------------- */
.awb-zoom-overlay {
	position: fixed;
	inset: 0;
	z-index: 2147483100;      /* über der 321-MED-Schaltfläche (…3000) */
	background: rgba(250, 250, 248, .72);
	opacity: 0;
	transition: opacity .32s ease;
	cursor: zoom-out;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.awb-zoom-overlay {
		background: rgba(250, 250, 248, .38);
		-webkit-backdrop-filter: blur(9px);
		backdrop-filter: blur(9px);
	}
}

.awb-zoom-overlay.is-offen { opacity: 1; }

.awb-zoom-klon {
	position: fixed;
	margin: 0;
	max-width: none;
	object-fit: cover;
	object-position: top center;
	border-radius: 10px;
	box-shadow: 0 24px 60px rgba(27, 58, 68, .32);
	transition: left .42s cubic-bezier(.4, 0, .2, 1),
	            top .42s cubic-bezier(.4, 0, .2, 1),
	            width .42s cubic-bezier(.4, 0, .2, 1),
	            height .42s cubic-bezier(.4, 0, .2, 1);
	cursor: zoom-out;
}

/* Seite festhalten, solange eine Urkunde offen ist — scrollte sie weg,
   passte der Rückweg der Kachel nicht mehr. */
.js-bildzoom-fest, .js-bildzoom-fest body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.awb-zoom-overlay, .awb-zoom-klon { transition: none; }
	.awb-gallery-wrapper .awb-zertifikate .fusion-gallery-image,
	.awb-gallery-wrapper .awb-zertifikate .fusion-gallery-image img { transition: none; }
	.awb-gallery-wrapper .awb-zertifikate .fusion-gallery-image:hover { transform: none; }
	.awb-gallery-wrapper .awb-zertifikate .fusion-gallery-image:hover img { transform: none; }
}


/* ------------------------------------------------------------
   Portraet im Footer — ersetzt das Bild aus der entfallenen Seitenleiste
   ------------------------------------------------------------ */

/* 20 px Luft zum Trennstrich darüber — ohne das klebt das Portrait an der
   Linie (Wunsch des Betreibers, 03.08.2026). */
.awb-footer-portrait { margin: 20px 0 18px; }

.awb-footer-portrait img {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid #2fb4cc;
	display: block;
}

/* ------------------------------------------------------------------ *
 * Eigene Bedienelemente für das Praxisvideo
 *
 * Die nativen Bedienelemente lassen sich nicht browserübergreifend
 * einfärben: Chrome erlaubt einen Teil über ::-webkit-media-controls-*,
 * Firefox und Safari gar nichts. Für Fortschrittsbalken und Play-Knopf in
 * der Hausfarbe führt deshalb kein Weg an eigenen Elementen vorbei.
 *
 * Progressive Enhancement: das Markup liefert `controls` mit. Erst das
 * Skript nimmt es weg und baut diese Leiste. Ohne JavaScript bleibt der
 * native Player — nie ein Video ohne Bedienung.
 * ------------------------------------------------------------------ */
.awb-video-ui { position: absolute; inset: 0; }

/* Große Schaltfläche in der Mitte, solange nicht gespielt wird */
.awb-video-play {
	position: absolute; left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	width: 84px; height: 84px; border: 0; border-radius: 50%;
	background: rgba(46, 180, 204, .92);
	color: #fff; cursor: pointer; display: flex;
	align-items: center; justify-content: center;
	box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
	transition: background .2s, transform .2s, opacity .2s;
}
.awb-video-play:hover, .awb-video-play:focus-visible {
	background: #2eb4cc; transform: translate(-50%, -50%) scale(1.06);
}
.awb-video-play svg { width: 34px; height: 34px; margin-left: 5px; fill: #fff; }
.is-playing .awb-video-play { opacity: 0; pointer-events: none; }

/* Leiste unten: bewusst ohne den abgedunkelten Verlauf. Damit die weißen
   Symbole auf hellen Videobildern lesbar bleiben, tragen sie einen
   Schlagschatten statt einer Hintergrundfläche. */
.awb-video-bar {
	position: absolute; left: 0; right: 0; bottom: 0;
	display: flex; align-items: center; gap: 12px;
	padding: 10px 16px 12px; background: transparent;
	opacity: 0; transition: opacity .2s;
}
.awb-video-wrap:hover .awb-video-bar,
.awb-video-wrap:focus-within .awb-video-bar,
.awb-video-wrap:not(.is-playing) .awb-video-bar { opacity: 1; }

.awb-video-bar button {
	border: 0; background: none; padding: 4px; cursor: pointer;
	color: #fff; display: flex; align-items: center;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .8));
}
.awb-video-bar button svg { width: 22px; height: 22px; fill: #fff; }
.awb-video-bar button:hover svg, .awb-video-bar button:focus-visible svg { fill: #2eb4cc; }
.awb-video-zeit {
	color: #fff; font-size: 13px; font-variant-numeric: tabular-nums;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .9); min-width: 84px;
}
.awb-video-cc.is-an svg { fill: #2eb4cc; }

/* Fortschritt: input[type=range], damit Tastatur und Screenreader ohne
   Zusatzarbeit funktionieren. Der abgespielte Teil wird über --fortschritt
   eingefärbt, das Skript schreibt den Wert. */
.awb-video-fortschritt {
	flex: 1; height: 18px; margin: 0; cursor: pointer;
	background: none; -webkit-appearance: none; appearance: none;
}
.awb-video-fortschritt::-webkit-slider-runnable-track {
	height: 5px; border-radius: 3px;
	background: linear-gradient(to right,
		#2eb4cc 0%, #2eb4cc var(--fortschritt, 0%),
		rgba(255, 255, 255, .55) var(--fortschritt, 0%), rgba(255, 255, 255, .55) 100%);
}
.awb-video-fortschritt::-moz-range-track {
	height: 5px; border-radius: 3px;
	background: linear-gradient(to right,
		#2eb4cc 0%, #2eb4cc var(--fortschritt, 0%),
		rgba(255, 255, 255, .55) var(--fortschritt, 0%), rgba(255, 255, 255, .55) 100%);
}
.awb-video-fortschritt::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none;
	width: 14px; height: 14px; margin-top: -4.5px;
	border-radius: 50%; background: #fff; border: 2px solid #2eb4cc;
}
.awb-video-fortschritt::-moz-range-thumb {
	width: 14px; height: 14px; border-radius: 50%;
	background: #fff; border: 2px solid #2eb4cc;
}
.awb-video-fortschritt:focus-visible { outline: 2px solid #2eb4cc; outline-offset: 3px; }

/* Untertitel nicht hinter der Leiste verstecken */
.awb-video-wrap video::cue {
	background: rgba(0, 0, 0, .72); color: #fff;
	font-size: .92em; line-height: 1.35;
}

/* ------------------------------------------------------------------ *
 * Sanftes Scrollen zu Sprungzielen (z. B. „leistungen" im Hero, das
 * Praxisvideo aus der Galerie). Der Header liegt fest oben, deshalb
 * braucht jedes Ziel Abstand nach oben — ohne das verschwindet die
 * Überschrift des angesprungenen Blocks unter der Kopfleiste.
 *
 * `prefers-reduced-motion` schaltet die Animation ab: für Menschen, die
 * auf Bewegung empfindlich reagieren, ist ein springender Bildschirm
 * nicht Komfort, sondern Symptomauslöser.
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}
:target, #leistungen-uebersicht, #praxisvideo { scroll-margin-top: 110px; }

/* ------------------------------------------------------------------ *
 * Leistungskacheln (Icon + Titel) dezenter
 *
 * Vorher: vollflächig eingefärbte Blöcke, 220–250 px hoch, weißes Icon auf
 * Türkis bzw. Gold. Auf einer Seite mit mehreren davon erschlägt das den
 * Text darüber. Jetzt: weiße Fläche, 1 px Rahmen in der Bereichsfarbe,
 * Icon in derselben Farbe, Schatten beim Überfahren.
 *
 * Die Optik sitzt auf dem `.fusion-column-wrapper`, NICHT auf der Spalte.
 * Avadas Zwischenraum zwischen zwei Spalten ist deren Innenpadding — läge
 * der Rahmen auf der Spalte, verliefe er außen um diesen Abstand herum und
 * die Kacheln klebten aneinander. Auf dem Wrapper bleibt der Abstand außen.
 *
 * Die Bereichsfarbe steht als `--awb-kachel` im Markup (gesetzt von
 * kachelfarbe_markieren in scripts/convert_pages.py). In CSS war sie nicht
 * zu ermitteln: Avada definiert `--awb-bg-color` global als `transparent`,
 * ein var()-Ersatzwert greift aber nur bei undefinierter Variable.
 *
 * `:has(.fb-icon-element, .awb-kachel-icon)` grenzt auf Kacheln MIT Icon ein — die beiden
 * großen Bildkacheln der Startseite bleiben farbig.
 *
 * Titel bleibt dunkel statt in der Bereichsfarbe: Gold auf Weiß erreicht nur
 * etwa 2:1 Kontrast und wäre nicht lesbar.
 * ------------------------------------------------------------------ */
.fusion-layout-column:has(.fb-icon-element, .awb-kachel-icon):not(:has(.awb-leistungsliste)) {
	background-color: transparent !important;
	border: 0 !important;
	/* Innenabstand der Spalte weg — er würde jetzt doppelt zum
	   Wrapper-Padding wirken. Der Abstand ZWISCHEN den Kacheln kommt aus
	   Avadas `--awb-spacing-*`, das dadurch endlich sichtbar wird. */
	--awb-padding-top: 0 !important;
	--awb-padding-right: 0 !important;
	--awb-padding-bottom: 0 !important;
	--awb-padding-left: 0 !important;
	--awb-margin-bottom-large: 26px !important;
	--awb-margin-bottom-medium: 26px !important;
	--awb-margin-bottom-small: 26px !important;
}

.fusion-layout-column:has(.fb-icon-element, .awb-kachel-icon):not(:has(.awb-leistungsliste)) > .fusion-column-wrapper {
	background: #fff !important;
	border: 1px solid var(--awb-kachel, #2eb4cc) !important;
	border-radius: 10px !important;
	padding: 28px 24px !important;
	height: 100%;
	/* Avadas Spaltenschatten zeichnete einen zweiten, feineren Kasten
	   innerhalb des Rahmens — eine Kachel sah aus wie zwei ineinander. */
	box-shadow: none !important;
	transition: box-shadow .22s ease, transform .22s ease;
}

/* Beim Überfahren füllt sich die Kachel in der Bereichsfarbe. Icon und Titel
   müssen dann auf Weiß umschlagen — sonst steht das nun gleichfarbige Icon
   unsichtbar auf der Fläche. Avada färbt die Fläche über
   `--awb-bg-color-hover` ohnehin ein; hier wird der Zustand vollständig
   ausformuliert, statt sich auf dessen Reste zu verlassen. */
.fusion-layout-column:has(.fb-icon-element, .awb-kachel-icon):not(:has(.awb-leistungsliste)):hover > .fusion-column-wrapper {
	background: var(--awb-kachel, #2eb4cc) !important;
	box-shadow: 0 10px 26px rgba(27, 58, 68, .16);
	transform: translateY(-3px);
}

.fusion-layout-column:has(.fb-icon-element, .awb-kachel-icon):not(:has(.awb-leistungsliste)):hover .fb-icon-element {
	color: #fff !important;
	border-color: #fff !important;
	--awb-circlebordercolor: #fff !important;
}

.fusion-layout-column:has(.fb-icon-element, .awb-kachel-icon):not(:has(.awb-leistungsliste)):hover .fusion-title-heading,
.fusion-layout-column:has(.fb-icon-element, .awb-kachel-icon):not(:has(.awb-leistungsliste)):hover .fusion-title-heading p {
	color: #fff !important;
}

/* Farbfläche der zweiten Bauweise durchsichtig statt ausgeblendet: in ihr
   steckt der Link, der die ganze Kachel klickbar macht. `display:none`
   hätte die Kacheln auf /leistungen/ still unklickbar gemacht. */
.fusion-layout-column:has(.fb-icon-element, .awb-kachel-icon):not(:has(.awb-leistungsliste)) .fusion-column-inner-bg,
.fusion-layout-column:has(.fb-icon-element, .awb-kachel-icon):not(:has(.awb-leistungsliste)) .fusion-column-inner-bg-image {
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	border: 0 !important;
}

/* Icon und Kreis in der Bereichsfarbe, etwas kleiner als vorher */
.fusion-layout-column:has(.fb-icon-element, .awb-kachel-icon):not(:has(.awb-leistungsliste)) .fb-icon-element {
	color: var(--awb-kachel, #2eb4cc) !important;
	border-color: var(--awb-kachel, #2eb4cc) !important;
	--awb-circlebordercolor: var(--awb-kachel, #2eb4cc) !important;
	--awb-circlecolor: transparent !important;
	--awb-width: 62px !important;
	--awb-height: 62px !important;
	--awb-line-height: 56px !important;
	--awb-font-size: 30px !important;
	--awb-margin-bottom: 14px !important;
}

.fusion-layout-column:has(.fb-icon-element, .awb-kachel-icon):not(:has(.awb-leistungsliste)) .fusion-title-heading,
.fusion-layout-column:has(.fb-icon-element, .awb-kachel-icon):not(:has(.awb-leistungsliste)) .fusion-title-heading p {
	color: #1b3a44 !important;
	font-size: 21px !important;
}

/* Der Wert unter dem Titel („ca. 15 Min.", „gering", „4–6 Monate") stand
   WEISS AUF WEISS und tauchte erst beim Ueberfahren auf. Im Original war die
   Kachel gold, der Text also weiss richtig; unser Redesign hat die Flaeche auf
   Weiss gedreht, die Textfarbe blieb. Auf dem Telefon war die Angabe damit
   ueberhaupt nicht zu sehen — dort gibt es kein Ueberfahren. Genau diese
   Angaben sind aber der Grund, warum jemand die Kachel liest. */
.fusion-layout-column:has(.fb-icon-element, .awb-kachel-icon):not(:has(.awb-leistungsliste)) .fusion-text,
.fusion-layout-column:has(.fb-icon-element, .awb-kachel-icon):not(:has(.awb-leistungsliste)) .fusion-text p {
	color: #3f3f3f !important;
	font-size: 17px !important;
	font-weight: 700;
}

.fusion-layout-column:has(.fb-icon-element, .awb-kachel-icon):not(:has(.awb-leistungsliste)):hover .fusion-text,
.fusion-layout-column:has(.fb-icon-element, .awb-kachel-icon):not(:has(.awb-leistungsliste)):hover .fusion-text p {
	color: #fff !important;
}

/* Der Übersetzungs-Hinweis, den Google Translate im Markup hinterlassen hat,
   liegt absolut positioniert über dem Titel und zieht die Kachel auseinander. */
.fusion-layout-column:has(.fb-icon-element, .awb-kachel-icon):not(:has(.awb-leistungsliste)) #gtx-trans { display: none !important; }

/* Gleich hohe Kacheln in einer Reihe. `height: 100%` am Wrapper allein reicht
   nicht: steht die Avada-Reihe auf `align-items: flex-start`, ist die Spalte
   nur so hoch wie ihr Inhalt — 100 % davon ändert nichts. Auf
   /wissenswertes/ standen deshalb 215er neben 191er Kacheln. */
.fusion-layout-column:has(.fb-icon-element, .awb-kachel-icon):not(:has(.awb-leistungsliste)) {
	align-self: stretch !important;
}

@media (max-width: 640px) {
	/* Zwei Kacheln nebeneinander lassen 101 px Textbreite. „Wissenswertes zur
	   Hyaluronsäure" lief bei 21 px über den Rand hinaus — also kleiner und
	   mit erlaubtem Wortumbruch, statt den Text abzuschneiden. */
	.fusion-layout-column:has(.fb-icon-element, .awb-kachel-icon):not(:has(.awb-leistungsliste)) .fusion-title-heading,
	.fusion-layout-column:has(.fb-icon-element, .awb-kachel-icon):not(:has(.awb-leistungsliste)) .fusion-title-heading p {
		font-size: 15.5px !important;
		line-height: 1.25 !important;
		overflow-wrap: anywhere;
		hyphens: auto;
	}

	.fusion-layout-column:has(.fb-icon-element, .awb-kachel-icon):not(:has(.awb-leistungsliste)) > .fusion-column-wrapper {
		padding: 18px 12px !important;
	}
}

/* ------------------------------------------------------------------ *
 * Aufklappbare Abschnitte (<details>) für lange Aufzählungen
 *
 * Erzeugt von listen_als_faq() in scripts/convert_pages.py. <details> statt
 * nachgebautem Aufklapper: Tastatur, Screenreader und die Browsersuche
 * (Strg+F öffnet geschlossene Abschnitte selbst) sind eingebaut, und ohne
 * JavaScript funktioniert es genauso.
 *
 * Das Dreieck des Browsers wird ersetzt, weil es sich nicht einfärben lässt;
 * das eigene Zeichen dreht sich beim Öffnen.
 * ------------------------------------------------------------------ */
.awb-faq {
	border: 1px solid #d9e6ea;
	border-left: 3px solid #2eb4cc;
	border-radius: 8px;
	margin: 0 0 12px;
	background: #fff;
	overflow: hidden;
}

.awb-faq[open] { border-color: #bfe3ea; border-left-color: #2eb4cc; }

.awb-faq-titel {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 15px 18px;
	cursor: pointer;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.35;
	color: #1b3a44;
	list-style: none;
	transition: background-color .18s ease;
}

/* Beide Schreibweisen nötig: WebKit nutzt ::-webkit-details-marker,
   der Rest ::marker. Ohne beide bleibt das Standarddreieck stehen. */
.awb-faq-titel::-webkit-details-marker { display: none; }
.awb-faq-titel::marker { content: ""; }

.awb-faq-titel:hover { background: #f2fafc; }
.awb-faq-titel:focus-visible { outline: 2px solid #2eb4cc; outline-offset: -2px; }

.awb-faq-titel::before {
	content: "";
	flex: 0 0 auto;
	width: 11px;
	height: 11px;
	border-right: 2px solid #2eb4cc;
	border-bottom: 2px solid #2eb4cc;
	transform: rotate(-45deg);
	transition: transform .2s ease;
	margin-top: -3px;
}

.awb-faq[open] > .awb-faq-titel::before {
	transform: rotate(45deg);
	margin-top: 3px;
}

/* Inhalt: geschlossen bleiben etwa zwei Zeilen stehen und laufen nach unten
   transparent aus, damit erkennbar ist, dass dort Text weitergeht. Die Höhe
   animiert faq.js; ohne JavaScript entfällt die Vorschau und <details> klappt
   schlicht auf und zu. */
.awb-faq-inhalt { overflow: hidden; }

.awb-faq--js .awb-faq-inhalt {
	transition: max-height .38s cubic-bezier(.22, .61, .36, 1);
}

.awb-faq--js:not(.is-offen) .awb-faq-inhalt {
	-webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
}

@media (prefers-reduced-motion: reduce) {
	.awb-faq--js .awb-faq-inhalt { transition: none; }
}

.awb-faq-inhalt ul,
.awb-faq-inhalt ol {
	margin: 0;
	padding: 2px 20px 18px 20px;
	list-style: none;
}

/* Aufzählungszeichen als Info-Symbol in der Hausfarbe. Als
   Hintergrundbild und nicht als Zeichen im Markup, damit Screenreader
   die Liste vorlesen und nicht das Symbol. */
.awb-faq-inhalt li {
	position: relative;
	margin-bottom: 8px;
	padding-left: 30px;
	line-height: 1.55;
}

.awb-faq-inhalt li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .18em;
	width: 18px;
	height: 18px;
	background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232eb4cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5'/%3E%3Cpath d='M12 7.6v.6'/%3E%3C/svg%3E");
}

@media (max-width: 640px) {
	.awb-faq-titel { padding: 13px 14px; font-size: 16px; }
	.awb-faq-inhalt ul, .awb-faq-inhalt ol { padding: 2px 14px 16px 14px; }
}

/* ------------------------------------------------------------------ *
 * Einblenden statt Einfliegen
 *
 * Avada schiebt 179 Elemente über die halbe Bildschirmbreite herein
 * (fadeInLeft/fadeInUp, 1 Sekunde). Auf Seiten mit mehreren Blöcken ist
 * ständig etwas in Bewegung, ohne dass die Bewegung etwas erklärt. Alle
 * Typen laufen deshalb über dieselbe kurze Blende mit ein paar Pixeln
 * Versatz — die Animationsklasse setzt Avada per JavaScript, überschrieben
 * wird der Name, nicht die Klasse.
 *
 * Wer Bewegung reduzieren möchte, bekommt gar keine: bei
 * `prefers-reduced-motion` erscheint alles sofort. Ohne die Regel bliebe
 * der Inhalt dort im Startzustand stehen, also unsichtbar.
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
	.fusion-animated[data-animationtype] {
		animation-name: awbReveal !important;
		animation-duration: .45s !important;
		animation-timing-function: ease-out !important;
	}

	@keyframes awbReveal {
		from { opacity: 0; transform: translateY(12px); }
		to   { opacity: 1; transform: none; }
	}
}

@media (prefers-reduced-motion: reduce) {
	.fusion-animated[data-animationtype] {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
		visibility: visible !important;
	}
}

/* Symbol für Kacheln, die im Original keines hatten (eingesetzt von
   kachel_icons_ergaenzen). Maße und Kreis wie bei den FontAwesome-Symbolen
   der übrigen Kacheln, damit beide Sorten nebeneinander gleich wirken. */
.awb-kachel-icon {
	display: block;
	width: 62px;
	height: 62px;
	padding: 15px;
	margin: 0 auto 14px;
	border: 3px solid var(--awb-kachel, #2eb4cc);
	border-radius: 50%;
	color: var(--awb-kachel, #2eb4cc);
	box-sizing: border-box;
}

.fusion-layout-column:hover .awb-kachel-icon {
	border-color: #fff;
	color: #fff;
}

/* ------------------------------------------------------------------ *
 * Hero-Überschrift auf schmalen Geräten
 *
 * Avadas „responsive Typografie" rechnete auf 375 px immer noch 49,9 px aus.
 * In die 315 px breite Spalte passt damit kein einziges langes Wort:
 * „Wissenswertes" stand rechts abgeschnitten, und weil es EIN Wort ist,
 * half auch kein Umbruch. Also kleiner setzen — und Trennung erlauben, für
 * den Fall, dass später ein noch längerer Titel kommt.
 * ------------------------------------------------------------------ */
@media (max-width: 640px) {
	.fusion-page-title-bar h1,
	.fusion-page-title-bar .fusion-title-heading {
		font-size: 32px !important;
		line-height: 1.12 !important;
		overflow-wrap: break-word;
		hyphens: auto;
	}
}

@media (max-width: 380px) {
	.fusion-page-title-bar h1,
	.fusion-page-title-bar .fusion-title-heading { font-size: 28px !important; }
}


/* ------------------------------------------------------------------ *
 * Erklärende Bilder je Behandlungsart
 *
 * Wunsch der Kundin: Bilder statt Textwüste. Sie zeigen eine Situation oder
 * eine Körperpartie — nie ein Ergebnis, nie eine Gegenüberstellung
 * (§ 11 Abs. 1 S. 3 Nr. 1 HWG). Alle Motive sind mit KI erzeugt und tragen
 * deshalb einen sichtbaren Hinweis; er steht bewusst UNTER dem Bild und nicht
 * eingebrannt darin: so bleibt er lesbar, skaliert mit und lässt sich ändern,
 * ohne das Bild neu zu rendern.
 * ------------------------------------------------------------------ */
.awb-leistungsbild {
	margin: 0 0 22px;
}

.awb-leistungsbild img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

.awb-ki-hinweis {
	margin-top: 6px;
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: .02em;
	color: #8a9499;
	text-align: right;
}

@media (max-width: 640px) {
	.awb-leistungsbild { margin-bottom: 18px; }
	.awb-ki-hinweis { font-size: 11.5px; }
}


/* ---------- Bild und Text nebeneinander ----------
   Ueber die volle Inhaltsspalte (1140 px seit dem Wegfall der Seitenleiste)
   wurde jedes Leistungsbild rund 760 px hoch — der Text darunter begann erst
   nach einer Bildschirmhoehe. Halbe Breite, Text daneben: beides in einem
   Blick, und die Seite wird pro Behandlungsart eine Bildschirmhoehe kuerzer.

   Erst ab 1000 px, darunter waeren beide Spalten zu schmal; auf dem Telefon
   bleibt die gewohnte Reihenfolge Bild, Einstieg, Text untereinander.

   `align-items: start`: das Bild behaelt sein Seitenverhaeltnis. Es an die
   Texthoehe zu binden ginge nicht — der Abschnitt daneben klappt auf und zu
   und waere mal 260, mal 1200 px hoch. */
@media (min-width: 1000px) {
	.awb-bildtext {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 30px;
		align-items: start;
		margin: 0 0 22px;
	}
	.awb-bildtext .awb-leistungsbild {
		margin: 0;
	}
	/* Ohne das sprengt ein langes Wort die Spalte statt umzubrechen. */
	.awb-bildtext__text {
		min-width: 0;
	}
	.awb-bildtext__text > :first-child {
		margin-top: 0;
	}
}


/* Einstieg über dem eingeklappten Abschnitt: bleibt immer sichtbar und
   trägt die Aussage. Etwas größer als der Fließtext, damit klar ist, dass
   hier der Einstieg steht und nicht schon der Fachtext. */
.awb-einstieg {
	margin: 0 0 18px;
	font-size: 18px;
	line-height: 1.6;
	color: #1b3a44;
}

@media (max-width: 640px) {
	.awb-einstieg { font-size: 16.5px; }
}


/* ------------------------------------------------------------------ *
 * Lange Abschnitte anlesen („mehr lesen")
 *
 * Der Text bleibt vollständig im HTML, nur die Höhe ist begrenzt — gekürzt
 * wird nichts, weil die Abschnitte die Suchbegriffe tragen. Alle Regeln
 * hängen an `js-mehrlesen` bzw. `ist-gekuerzt`: ohne JavaScript gibt es
 * beides nicht, dann steht der Abschnitt offen da. Eine reine CSS-Lösung
 * würde den Rest ohne Skript unerreichbar machen.
 * ------------------------------------------------------------------ */
.js-mehrlesen .awb-mehr-lesen {
	position: relative;
	overflow: hidden;
	transition: max-height .4s cubic-bezier(.4, 0, .2, 1);
}

/* Der Verlauf sitzt im Abschnitt und nur im gekürzten Zustand — er ist das
   Signal „hier geht es weiter". `pointer-events: none`, sonst schluckt er
   Klicks auf Links, die zufällig darunter liegen. */
.js-mehrlesen .awb-mehr-lesen.ist-gekuerzt::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 90px;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 88%);
}

.awb-mehr-lesen-knopf {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 2px 0 26px;
	padding: 8px 20px;
	border: 1px solid #e3ddd0;
	border-radius: 999px;
	background: #f4efe4;
	color: #8a6f38;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.awb-mehr-lesen-knopf::after {
	content: "";
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .25s ease;
}

.awb-mehr-lesen-knopf[aria-expanded="true"]::after {
	transform: translateY(1px) rotate(-135deg);
}

.awb-mehr-lesen-knopf:hover,
.awb-mehr-lesen-knopf:focus-visible {
	background: #8a6f38;
	border-color: #8a6f38;
	color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.js-mehrlesen .awb-mehr-lesen { transition: none; }
	.awb-mehr-lesen-knopf,
	.awb-mehr-lesen-knopf::after { transition: none; }
}


/* ------------------------------------------------------------------ *
 * Kacheln als Umschalter für die Listen darunter (/neurologie…/)
 *
 * Vier Kacheln, vier Aufklapplisten, kein sichtbarer Zusammenhang — und die
 * Kacheln waren nicht einmal verlinkt. Jetzt zeigt ein Klick genau die
 * zugehörige Liste. Ohne JavaScript fehlt `js-listen-tabs`: dann stehen
 * alle Listen da und klappen wie bisher auf und zu.
 * ------------------------------------------------------------------ */
.awb-umschalt-kachel { cursor: pointer; }

/* Die aktive Kachel trägt die Bereichsfarbe — dieselbe Rückmeldung wie beim
   Überfahren, nur dauerhaft, damit man sieht, welche Liste unten steht. */
.js-listen-tabs .awb-umschalt-kachel.ist-aktiv > .fusion-column-wrapper {
	background: var(--awb-kachel, #2eb4cc) !important;
	box-shadow: 0 10px 26px rgba(27, 58, 68, .16);
}

.js-listen-tabs .awb-umschalt-kachel.ist-aktiv .fb-icon-element,
.js-listen-tabs .awb-umschalt-kachel.ist-aktiv .awb-kachel-icon {
	color: #fff !important;
	border-color: #fff !important;
	--awb-circlebordercolor: #fff !important;
}

.js-listen-tabs .awb-umschalt-kachel.ist-aktiv .fusion-title-heading,
.js-listen-tabs .awb-umschalt-kachel.ist-aktiv .fusion-title-heading p {
	color: #fff !important;
}

.js-listen-tabs details.awb-faq[data-umschalter] > summary {
	/* Die Überschrift der Liste bleibt als Titel stehen, ist aber kein
	   Schalter mehr — das macht jetzt die Kachel. */
	cursor: default;
	list-style: none;
}

.js-listen-tabs details.awb-faq[data-umschalter] > summary::-webkit-details-marker { display: none; }
.js-listen-tabs details.awb-faq[data-umschalter] > summary::marker { content: ""; }

.js-listen-tabs details.awb-faq[data-umschalter].ist-gezeigt {
	animation: awb-liste-auf .3s ease both;
}

@keyframes awb-liste-auf {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.js-listen-tabs details.awb-faq[data-umschalter].ist-gezeigt { animation: none; }
}


/* ------------------------------------------------------------------ *
 * Vita als Zeitstrahl (/vita/)
 *
 * 35 gleich gewichtete Datums-Überschriften auf vier Bildschirmhöhen waren
 * eine Liste, kein Lebenslauf. Jetzt eine Achse mit fünf Kapiteln, je
 * Station eine Karte mit Jahresmarke, darüber eine Kapitelnavigation.
 *
 * Der Aufbau steht ohne JavaScript vollständig da. `assets/js/vita.js`
 * setzt `js-vita` an <html> und ergänzt nur Einblenden, Fortschrittslinie
 * und aktives Kapitel — deshalb hängen alle Bewegungszustände an dieser
 * Klasse: ohne Skript darf nichts unsichtbar bleiben.
 * ------------------------------------------------------------------ */
.awb-vita {
	--vita-farbe: #2eb4cc;
	--vita-spur: 88px;
	margin: 4px 0 48px;
}

/* Kapitelnavigation: klebt unter der Kopfzeile mit, damit man auch nach
   zwei Bildschirmen noch weiß, wo man ist, und springen kann. */
.awb-vita-nav {
	position: sticky;
	top: 96px;
	z-index: 5;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 26px;
	padding: 8px;
	border: 1px solid #e3ddd0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .92);
	backdrop-filter: blur(6px);
}

.awb-vita-nav-punkt {
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.25;
	color: #5d6f76;
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}

.awb-vita-nav-punkt:hover,
.awb-vita-nav-punkt:focus-visible {
	background: #f2f7f8;
	color: #1b3a44;
}

.awb-vita-nav-punkt.is-aktiv {
	background: var(--vita-farbe);
	color: #fff;
}

.awb-vita-bahn {
	position: relative;
	padding-left: calc(var(--vita-spur) + 26px);
}

.awb-vita-linie {
	position: absolute;
	top: 6px;
	bottom: 6px;
	left: var(--vita-spur);
	width: 2px;
	background: #e6e0d4;
}

/* Der gefüllte Teil folgt dem Scrollstand — das ist die eigentliche
   Rückmeldung „so weit bin ich in diesem Lebenslauf". */
.awb-vita-fortschritt {
	display: block;
	width: 100%;
	height: 0;
	background: linear-gradient(180deg, #c6a96c, var(--vita-farbe));
	transition: height .12s linear;
}

.awb-vita-kapitel {
	scroll-margin-top: 150px;
	margin-bottom: 34px;
}

.awb-vita-kapitel-titel {
	margin: 0 0 14px;
	font-size: 21px;
	line-height: 1.3;
	color: #1b3a44;
}

.awb-vita-stationen {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.awb-vita-station {
	position: relative;
}

/* Jahresmarke links neben der Achse, dazu der Punkt auf der Achse */
.awb-vita-jahr {
	position: absolute;
	left: calc(-1 * (var(--vita-spur) + 26px));
	top: 14px;
	width: var(--vita-spur);
	padding-right: 22px;
	text-align: right;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	color: #9aa7ac;
	transition: color .25s ease;
}

.awb-vita-jahr::after {
	content: "";
	position: absolute;
	right: -5px;
	top: 4px;
	width: 12px;
	height: 12px;
	border: 2px solid #e6e0d4;
	border-radius: 50%;
	background: #fff;
	transition: border-color .25s ease, background .25s ease, transform .25s ease;
}

.awb-vita-station.is-sichtbar .awb-vita-jahr { color: #1b3a44; }

.awb-vita-station.is-sichtbar .awb-vita-jahr::after {
	border-color: var(--vita-farbe);
	background: var(--vita-farbe);
	transform: scale(1.1);
}

.awb-vita-karte {
	padding: 13px 18px;
	border: 1px solid #e3ddd0;
	border-left: 3px solid #e6e0d4;
	border-radius: 10px;
	background: #fff;
	transition: box-shadow .2s ease, transform .2s ease, border-color .25s ease;
}

.awb-vita-station.is-sichtbar .awb-vita-karte { border-left-color: var(--vita-farbe); }

.awb-vita-karte:hover {
	box-shadow: 0 8px 22px rgba(27, 58, 68, .13);
	transform: translateY(-2px);
}

.awb-vita-zeit {
	margin: 0 0 3px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .03em;
	color: #8a6f38;
}

/* Avadas Absatzabstand (`.post-content p`) gewinnt sonst und reißt Datum
   und Text in der Karte um 20 px auseinander — deshalb hier mitgeführt. */
.post-content .awb-vita-karte .awb-vita-zeit { margin: 0 0 3px; }

.post-content .awb-vita-karte p:not(.awb-vita-zeit),
.awb-vita-karte .awb-vita-text {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: #4a5b62;
}

/* Nur mit Skript: ein Kapitel zur Zeit, die Leiste schaltet um. Alle fünf
   untereinander waren wieder vier Bildschirmhöhen — genau das, was der
   Zeitstrahl abstellen sollte. Ohne Skript fehlt `js-vita-tabs`, dann stehen
   alle Kapitel da und die Leiste bleibt das, was sie im Markup ist:
   Ankerlinks. */
.js-vita-tabs .awb-vita-kapitel { display: none; }

.js-vita-tabs .awb-vita-kapitel.is-offen {
	display: block;
	margin-bottom: 8px;
	animation: awb-vita-auf .32s ease both;
}

@keyframes awb-vita-auf {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

/* Etwas Mindesthöhe, damit der Wechsel den Rest der Seite nicht ruckartig
   hochzieht — aber knapp gehalten: „Studium" hat zwei Stationen, ein zu
   großer Wert stünde als leeres Feld darunter. */
.js-vita-tabs .awb-vita-bahn { min-height: 240px; }

/* Nur mit Skript: Stationen fahren beim Erreichen ein. Ohne Skript gibt es
   diese Klasse nicht — dann steht alles sofort sichtbar da. */
.js-vita .awb-vita-station {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .5s ease, transform .5s ease;
}

.js-vita .awb-vita-station.is-sichtbar {
	opacity: 1;
	transform: none;
}

@media (max-width: 780px) {
	.awb-vita { --vita-spur: 0px; }
	/* Eine Zeile zum Wischen statt drei umbrochene: die Kapitelnamen sind
	   lang, umbrochen stand die klebende Leiste 110 px hoch über dem
	   Inhalt — mehr Navigation als Vita. */
	.awb-vita-nav {
		top: 72px;
		border-radius: 999px;
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.awb-vita-nav::-webkit-scrollbar { display: none; }
	.awb-vita-nav-punkt { font-size: 12.5px; padding: 5px 11px; white-space: nowrap; }
	.awb-vita-bahn { padding-left: 26px; }
	.awb-vita-linie { left: 5px; }
	.awb-vita-jahr {
		position: absolute;
		left: -26px;
		top: 15px;
		width: 26px;
		padding: 0;
		font-size: 0;          /* Jahr weg, der Punkt bleibt: kein Platz */
	}
	.awb-vita-jahr::after { right: 9px; top: 0; }
	.awb-vita-karte { padding: 12px 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.js-vita .awb-vita-station { opacity: 1; transform: none; transition: none; }
	.js-vita-tabs .awb-vita-kapitel.is-offen { animation: none; }
	.awb-vita-fortschritt { transition: none; }
	.awb-vita-karte:hover { transform: none; }
}

/* ------------------------------------------------------------------ *
 * Inhaltsbilder mit weichen Ecken
 *
 * Gleicher Radius wie Kacheln und Leistungsliste (10px), damit die Seite
 * eine Formensprache hat. Bewusst nur Bilder im Fliesstext: Logo, Symbole
 * und die Galerien liegen ausserhalb von .fusion-text.
 * ------------------------------------------------------------------ */
.fusion-text img {
	border-radius: 10px;
}

/* ------------------------------------------------------------------ *
 * Leistungsliste (/philosophie/)
 *
 * Vorher zwölf vollflächige Kacheln — mobil drei Bildschirmhöhen für eine
 * reine Themenübersicht. Jetzt eine Zeile je Thema: Symbol, Titel, zwei
 * Zeilen aus dem verlinkten Abschnitt, „mehr lesen".
 *
 * Der Vorschautext wird nicht zweitgepflegt, sondern beim Konvertieren aus
 * der Zielseite gezogen (leistungskacheln_zu_liste). Ändert die Betreiberin
 * dort etwas, wandert die Vorschau mit.
 * ------------------------------------------------------------------ */
.awb-leistungsliste {
	list-style: none;
	/* Luft zur Galerie darunter: die folgende Fusion-Reihe bringt keinen
	   eigenen Abstand mit, die Bilder klebten direkt an der letzten Karte. */
	margin: 0 0 48px;
	padding: 0;
	display: grid;
	gap: 12px;
	/* 290px statt 330: in der 1140er Inhaltsspalte passen damit drei Zeilen
	   nebeneinander (3x290+2x12 = 894), vorher waren es zwei und die Liste
	   war unnoetig hoch. Vier kaemen erst ab 1196px Spaltenbreite — die gibt
	   es hier nicht, die Spalte ist gedeckelt. */
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}

.awb-leistung > a {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	height: 100%;
	padding: 16px 18px;
	border: 1px solid #e3ddd0;
	border-left: 3px solid var(--awb-kachel, #c6a96c);
	border-radius: 10px;
	background: #fff;
	text-decoration: none;
	transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.awb-leistung > a:hover,
.awb-leistung > a:focus-visible {
	box-shadow: 0 8px 22px rgba(27, 58, 68, .13);
	transform: translateY(-2px);
	border-color: var(--awb-kachel, #c6a96c);
}

/* Symbol klein und ruhig — es ordnet ein, es ist nicht der Inhalt.
   Braun statt Bereichsfarbe: die Liste steht auf einer Goldseite, das
   Türkis der Kachelregel war ein Fremdkörper. Beim Überfahren füllt sich
   der Kreis braun, das Symbol wird weiß — es verschwindet also nicht. */
.awb-leistung-icon {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #8a6f38;
	border-radius: 50%;
	color: #8a6f38;
	background: transparent;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.awb-leistung > a:hover .awb-leistung-icon,
.awb-leistung > a:focus-visible .awb-leistung-icon {
	background: #8a6f38;
	border-color: #8a6f38;
	color: #fff;
}

.awb-leistung-icon .fb-icon-element {
	color: inherit !important;
	border: 0 !important;
	font-size: 18px !important;
	width: auto !important;
	height: auto !important;
	line-height: 1 !important;
	margin: 0 !important;
}

.awb-leistung-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.awb-leistung-titel {
	font-weight: 700;
	font-size: 17px;
	line-height: 1.3;
	color: #1b3a44;
}

/* Genau zwei Zeilen — mehr würde den Platzgewinn wieder auffressen */
.awb-leistung-teaser {
	font-size: 14.5px;
	line-height: 1.5;
	color: #5d6f76;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.awb-leistung-mehr {
	align-self: flex-start;
	margin-top: 2px;
	padding: 3px 12px;
	border-radius: 999px;
	background: #f4efe4;
	color: #8a6f38;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.awb-leistung > a:hover .awb-leistung-mehr {
	background: var(--awb-kachel, #c6a96c);
	color: #fff;
}

@media (max-width: 640px) {
	.awb-leistungsliste { grid-template-columns: 1fr; gap: 10px; }
	.awb-leistung > a { padding: 14px; gap: 13px; }
	.awb-leistung-icon { width: 34px; height: 34px; }
}

/* ------------------------------------------------------------------ *
 * Mobiles Menü als Vollbild-Overlay (assets/js/mobilmenu.js)
 *
 * Avadas eigener Umschalter wurde nie sichtbar — auf schmalen Geräten
 * standen alle Menüpunkte samt Untermenüs offen im Kopfbereich, rund
 * zwanzig Zeilen vor dem Inhalt.
 *
 * Ohne JavaScript bleibt genau diese Liste stehen: lang, aber vollständig
 * bedienbar. Deshalb wird die Kopfzeile hier NICHT pauschal ausgeblendet,
 * sondern erst, wenn das Overlay wirklich existiert (`js-mobilmenu` am
 * <html>, gesetzt vom Skript).
 * ------------------------------------------------------------------ */
@media (max-width: 1023px) {
	.awb-mobilmenu-knopf {
		position: fixed;
		top: 14px;
		right: 14px;
		z-index: 100000;
		width: 52px;
		height: 52px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 0;
		border-radius: 50%;
		background: #2eb4cc;
		box-shadow: 0 6px 18px rgba(27, 58, 68, .28);
		cursor: pointer;
		transition: background-color .25s ease, transform .25s ease;
	}

	.awb-mobilmenu-knopf:hover,
	.awb-mobilmenu-knopf:focus-visible { transform: scale(1.06); }

	/* Drei Balken aus einem Element: der mittlere ist das Element selbst,
	   die äußeren sind seine Pseudo-Elemente. Beim Öffnen wird daraus ein
	   Kreuz — dieselben Striche, nur gedreht. */
	.awb-mobilmenu-balken,
	.awb-mobilmenu-balken::before,
	.awb-mobilmenu-balken::after {
		display: block;
		width: 24px;
		height: 2px;
		background: #fff;
		border-radius: 2px;
		transition: transform .3s cubic-bezier(.2, .8, .3, 1), opacity .2s ease;
	}

	.awb-mobilmenu-balken::before,
	.awb-mobilmenu-balken::after { content: ""; position: absolute; }
	.awb-mobilmenu-balken::before { transform: translateY(-7px); }
	.awb-mobilmenu-balken::after { transform: translateY(7px); }

	.awb-mobilmenu-knopf.ist-offen { background: #1b3a44; }
	.awb-mobilmenu-knopf.ist-offen .awb-mobilmenu-balken { background: transparent; }
	.awb-mobilmenu-knopf.ist-offen .awb-mobilmenu-balken::before { transform: rotate(45deg); }
	.awb-mobilmenu-knopf.ist-offen .awb-mobilmenu-balken::after { transform: rotate(-45deg); }

	.awb-mobilmenu {
		position: fixed;
		inset: 0;
		z-index: 99999;
		display: flex;
		/* `align-items: center` schnitt bei langem Menü oben ab: der erste
		   Eintrag stand bei scrollTop 0 um 43 px über dem Rand und war nicht
		   erreichbar. Zentriert wird deshalb über `margin: auto` am Inhalt
		   (s. u.) — das bleibt beim Überlaufen an der Oberkante hängen. */
		align-items: flex-start;
		justify-content: center;
		background: linear-gradient(150deg, #2eb4cc 0%, #1b8fa6 55%, #14707f 100%);
		opacity: 0;
		transition: opacity .32s ease;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.awb-mobilmenu.ist-offen { opacity: 1; }
	.awb-mobilmenu[hidden] { display: none; }

	.awb-mobilmenu-schliessen {
		position: absolute;
		top: 12px;
		right: 16px;
		width: 52px;
		height: 52px;
		border: 0;
		background: none;
		color: #fff;
		font-size: 40px;
		line-height: 1;
		cursor: pointer;
		opacity: .85;
		transition: opacity .2s ease, transform .2s ease;
	}

	.awb-mobilmenu-schliessen:hover { opacity: 1; transform: rotate(90deg); }

	.awb-mobilmenu-innen { width: min(560px, 100%); padding: 84px 28px 48px; margin: auto; }

	.awb-mobilmenu-liste { list-style: none; margin: 0; padding: 0; }

	/* Einträge kommen versetzt herein — die Reihe steckt als --reihe im
	   Element, damit die Verzögerung nicht an feste nth-child-Regeln
	   gebunden ist und bei einem neuen Menüpunkt einfach mitwächst. */
	.awb-mobilmenu-eintrag {
		opacity: 0;
		transform: translateY(14px);
		transition: opacity .35s ease, transform .35s ease;
		transition-delay: calc(var(--reihe, 0) * 55ms + 60ms);
		border-bottom: 1px solid rgba(255, 255, 255, .18);
	}

	.awb-mobilmenu.ist-offen .awb-mobilmenu-eintrag { opacity: 1; transform: none; }

	.awb-mobilmenu-eintrag > a {
		position: relative;
		display: block;
		padding: 11px 4px;
		color: #fff;
		font-size: 21px;
		font-weight: 700;
		line-height: 1.25;
		letter-spacing: .01em;
		text-decoration: none;
		transition: padding-left .25s ease, color .25s ease;
	}

	/* Beim Überfahren wandert der Eintrag ein Stück nach rechts und bekommt
	   einen Strich davor — ohne Sprung, weil nur das Padding wächst. */
	.awb-mobilmenu-eintrag > a::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		width: 0;
		height: 2px;
		background: #fff;
		transform: translateY(-50%);
		transition: width .25s ease;
	}

	.awb-mobilmenu-eintrag > a:hover,
	.awb-mobilmenu-eintrag > a:focus-visible { padding-left: 34px; }
	.awb-mobilmenu-eintrag > a:hover::before,
	.awb-mobilmenu-eintrag > a:focus-visible::before { width: 24px; }

	/* Die aktuelle Seite trägt denselben Strich wie beim Überfahren — dann
	   aber MIT dem Einzug, sonst liegt er quer über dem Wort und sieht aus
	   wie durchgestrichen. */
	.awb-mobilmenu-eintrag > a.ist-aktuell { color: #d7f4fa; padding-left: 34px; }
	.awb-mobilmenu-eintrag > a.ist-aktuell::before { width: 24px; }

	/* Drei Ebenen, drei Größen. Das Menü ist dreistufig („Leistungen" →
	   „Ästhetische Behandlungen" → die einzelnen Themen); ohne die dritte
	   Ebene waren die Leistungen auf dem Telefon nicht erreichbar. Weil sie
	   dazukommt, sitzen die oberen Ebenen enger als vorher — sonst wäre die
	   Liste in der Ästhetischen Medizin doppelt so lang wie der Bildschirm. */
	.awb-mobilmenu-unter { list-style: none; margin: 0 0 10px; padding: 0 0 0 4px; }
	.awb-mobilmenu-unter-eintrag { margin: 0; }

	.awb-mobilmenu-unter a {
		display: block;
		padding: 6px 4px;
		color: rgba(255, 255, 255, .82);
		font-size: 15px;
		line-height: 1.3;
		text-decoration: none;
		transition: color .2s ease, padding-left .2s ease;
	}

	/* Dritte Ebene: kleiner, eingerückt und mit Strich als Zugehörigkeit —
	   sonst liest sie sich wie eine zweite Hauptliste. */
	.awb-mobilmenu-ebene-3 {
		margin: 2px 0 8px;
		padding-left: 12px;
		border-left: 1px solid rgba(255, 255, 255, .25);
	}

	.awb-mobilmenu-ebene-3 a {
		padding: 5px 4px;
		font-size: 13.5px;
		color: rgba(255, 255, 255, .72);
	}

	.awb-mobilmenu-unter a:hover,
	.awb-mobilmenu-unter a:focus-visible { color: #fff; padding-left: 12px; }

	/* Die alte Kopfzeilen-Navigation weicht erst, wenn das Overlay steht */
	html.js-mobilmenu .fusion-tb-header nav.awb-menu { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.awb-mobilmenu,
	.awb-mobilmenu-eintrag,
	.awb-mobilmenu-balken,
	.awb-mobilmenu-balken::before,
	.awb-mobilmenu-balken::after { transition: none !important; }
	.awb-mobilmenu-eintrag { opacity: 1; transform: none; }
}

/* Der Terminservice zeichnet sein Panel in einem eigenen Stapelkontext und
   lag dadurch über dem geöffneten Vollbildmenü — „Vita" und „Aktuelles"
   waren verdeckt. Ein höherer z-index am Overlay hilft dagegen nicht, also
   tritt das Widget zurück, solange das Menü offen ist. */
html.menue-offen #landmark_321med,
html.menue-offen [id*="321med"],
html.menue-offen [class*="321med"],
html.menue-offen iframe[src*="321med"],
html.js-weiche-offen #landmark_321med,
html.js-weiche-offen [id*="321med"],
html.js-weiche-offen [class*="321med"],
html.js-weiche-offen iframe[src*="321med"] {
	display: none !important;
}

/* Der Menue-Knopf bleibt erreichbar, solange die Weiche offen ist — er wird
   nur darueber gelegt. Ihn auszublenden (wie den Terminservice) war ein
   Fehler: auf dem Telefon kam man dann gar nicht ins Menue, ohne die Weiche
   vorher wegzuklicken. `verify.mjs` ist genau darueber gestolpert.
   Den Terminservice trifft das nicht — der zeichnet in einem eigenen
   Stapelkontext und laesst sich nicht ueberdecken (Regel 21). */
html.js-weiche-offen .awb-mobilmenu-knopf {
	z-index: 100001;
}

/* Der Werbeblock „Nutzen Sie unseren Online-Service" stand dauerhaft
   aufgeklappt über dem Inhalt — auf dem Telefon verdeckte er die halbe
   rechte Seite. Ausgeblendet wird nur dieser Teaser (`#info_321med`); die
   Schaltfläche „Online-Rezeption" und die Attributionszeile „Powered by
   321 MED" bleiben stehen, der Buchungskanal ist also unverändert
   erreichbar. `!important`, weil das Fremdskript seine Maße inline setzt. */
#info_321med {
	display: none !important;
}


/* ---------- Preisblock ----------
   Die Kundin wollte die Preise sichtbar auf der Seite und die kostenlose
   Beratung „groß geschrieben" (Telefonat 13.08.2026). Der Block hebt sich
   deshalb vom Fließtext ab, ohne wie eine Werbeanzeige zu wirken: Gold ist
   die Zweitfarbe der Praxis, mehr braucht es nicht. */
.awb-preisblock {
	background: #faf7f1;
	border: 1px solid #e3ddd0;
	border-left: 3px solid #c6a96c;
	border-radius: 10px;
	padding: 22px 26px;
	margin: 32px 0;
}
.awb-preisblock h3 {
	margin-top: 0;
	color: #8a6f38;
}
.awb-preisblock ul { margin-bottom: 0; }
.awb-preisblock li::marker { color: #c6a96c; }

@media (max-width: 640px) {
	.awb-preisblock { padding: 18px 20px; margin: 24px 0; }
}


/* ---------- Behandlungsliste im Leistungs-Hub ----------
   Die Links standen in Textfarbe und ohne Unterstreichung da — niemand sah,
   dass sie klickbar sind. Avada faerbt Links im `fusion-text` nicht ein, und
   eine Liste aus zehn unsichtbaren Links ist keine Navigation, sondern eine
   Aufzaehlung. Deshalb Hausfarbe, Unterstreichung erst beim Ueberfahren, und
   ein Winkel als Hinweis, dass es weitergeht. */
.post-content ul li a {
	color: #1b7f93;
	text-decoration: none;
	font-weight: 700;
	border-bottom: 1px solid rgba(46, 180, 204, .35);
	transition: color .15s, border-color .15s;
}
.post-content ul li a:hover,
.post-content ul li a:focus-visible {
	color: #12606f;
	border-bottom-color: #2eb4cc;
}
.post-content ul li a::after {
	content: " \203A";
	font-weight: 400;
	color: #c6a96c;
}


/* ---------- Bild und Preise nebeneinander ----------
   Auf dem Schreibtisch stand das Hero-Bild ueber die volle Spaltenbreite und
   der Preisblock darunter — zusammen fast zwei Bildschirmhoehen, bevor die
   erste Behandlung zu sehen war. Nebeneinander passt beides in einen Blick.

   Gleiche Hoehe ueber `stretch`: das Bild fuellt seine Spalte und wird
   beschnitten, statt den Kasten daneben in die Laenge zu ziehen. Das Motiv
   haelt das aus, weil die Person rechts sitzt und links Freiraum ist.

   Erst ab 1000 px zweispaltig — darunter waere jede Spalte zu schmal fuer den
   Preistext, und auf dem Telefon sollen beide Bloecke ohnehin untereinander
   stehen. */
@media (min-width: 1000px) {
	.awb-zweispalt {
		display: grid;
		/* 40 zu 60: das Bild traegt die Stimmung, die Preise tragen die
		   Information — und Text braucht mehr Platz als ein Portrait. */
		grid-template-columns: 40% 1fr;
		gap: 26px;
		align-items: stretch;
		margin: 24px 0 32px;
	}
	.awb-zweispalt .awb-leistungsbild {
		margin: 0;
		height: 100%;
	}
	.awb-zweispalt .awb-leistungsbild img {
		height: 100%;
		object-fit: cover;
		object-position: 60% center;   /* Behandlungsszene: Mitte-rechts ist das Motiv */
	}
	.awb-zweispalt .awb-preisblock {
		margin: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}


/* ---------- Verzeichnis der Themen auf /leistungen/ ----------
   Die Karten selbst kommen aus dem Baukasten (.awb-karte); hier steht nur,
   wie sie gesetzt werden.

   Mehrspalter (`columns`), nicht Raster: die Karten sind sehr unterschiedlich
   lang (acht Links gegen einen), im Raster stand unter jeder kurzen eine
   Luecke. `grid-template-rows: masonry` waere die direkte Fassung, ist aber
   in keinem Browser ohne Schalter zu haben. Preis: gelesen wird spaltenweise
   — fuer ein Verzeichnis, in dem man sein Thema sucht, unerheblich. */
.awb-themen {
	columns: 3;
	column-gap: 18px;
	margin: 0 0 44px;
}

@media (max-width: 1000px) { .awb-themen { columns: 2; } }
@media (max-width: 640px)  { .awb-themen { columns: 1; } }

.awb-thema {
	/* Eine Karte darf nicht ueber einen Spaltenumbruch zerrissen werden. */
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	margin: 0 0 18px;
}

/* Luft zwischen dem Preisblock darueber und der Ueberschrift. */
.awb-themen-kopf h2 {
	margin-top: 30px !important;
	margin-bottom: 10px !important;
}

/* Auftauchen beim Laden: die Karten wachsen nacheinander aus dem Nichts.
   Der Anfangszustand haengt an `js-karten` am <html> — ohne JavaScript wird
   die Klasse nie gesetzt und alle Karten stehen sofort da. Eine im CSS
   verankerte `opacity:0` waere sonst ein unsichtbares Verzeichnis. */
.js-karten .awb-thema {
	opacity: 0;
	transform: translateY(18px) scale(.97);
}

.js-karten .awb-thema.ist-da {
	opacity: 1;
	transform: none;
	transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}

@media (prefers-reduced-motion: reduce) {
	.js-karten .awb-thema { opacity: 1; transform: none; }
	.js-karten .awb-thema.ist-da { transition: none; }
}


/* ------------------------------------------------------------------ *
 * Pulldown der aesthetischen Behandlungen (assets/js/megamenue.js)
 *
 * Die Themen standen im Menue nur als Sprungmarken auf den Hub. Ein Klick
 * faehrt jetzt ein Feld von oben herein, in dem die Unterseiten des Themas
 * stehen — der Umweg ueber das Verzeichnis entfaellt.
 *
 * Zwei Ebenen: `__flaeche` ist das Feld, das faehrt, `__grund` der dunkle
 * Rest der Seite. Bewegt wird `transform`, nicht `height` — eine Hoehen-
 * animation muesste jeden Frame neu umbrechen und ruckelt bei langen Listen.
 *
 * `ist-sichtbar` schaltet die Anzeige, `ist-offen` die Bewegung. Ohne die
 * Trennung gaebe es aus `display:none` heraus keinen Zwischenschritt und
 * das Feld waere einfach da, statt zu fahren.
 * ------------------------------------------------------------------ */
.awb-megamenue {
	position: fixed;
	inset: 0;
	z-index: 100000;   /* ueber dem 321-MED-Knopf, der einen eigenen Stapel hat */
	display: none;
}

.awb-megamenue.ist-sichtbar { display: block; }

/* Kein Abdunkeln der Seite: das Feld traegt seinen eigenen Schatten und
   hebt sich davon genug ab. Die Flaeche bleibt trotzdem im Markup — sie
   faengt den Klick neben dem Pulldown ab und schliesst es. */
.awb-megamenue__grund {
	position: absolute;
	inset: 0;
	background: transparent;
}

/* Hintergrund wie die aesthetischen Seiten: Creme mit goldener Kante. */
.awb-megamenue__flaeche {
	position: relative;
	background: #faf7f1;
	border-bottom: 3px solid #c6a96c;
	box-shadow: 0 18px 40px rgba(27, 58, 68, .22);
	max-height: 80vh;
	overflow-y: auto;
	transform: translateY(-100%);
	transition: transform .38s cubic-bezier(.22, 1, .36, 1);
}

.awb-megamenue.ist-offen .awb-megamenue__flaeche { transform: translateY(0); }

.awb-megamenue__inhalt {
	max-width: 1140px;
	margin: 0 auto;
	padding: 40px 30px 44px;
}

.awb-megamenue__kopf {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 14px;
}

/* Symbol wie in der Karte, nur gleich gefuellt: im Pulldown gibt es kein
   Ueberfahren, das den Ring fuellen wuerde. */
.awb-megamenue__kopf .awb-thema-icon {
	background: #8a6f38;
	color: #fff;
}

.awb-megamenue__kicker {
	margin: 0;
	font-size: 12.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #8a6f38;
}

.awb-megamenue__titel {
	margin: 2px 0 0;
	font-size: 26px;
	line-height: 1.2;
	color: #1b3a44;
}

.awb-megamenue__text {
	margin: 0 0 22px;
	max-width: 62ch;
	font-size: 15.5px;
	line-height: 1.6;
	color: #5d6f76;
}

/* Mehrspaltig, damit auch acht Ziele in einen Blick passen — das Feld soll
   herunterfahren, nicht die halbe Seite fuellen. */
.awb-megamenue__liste {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 10px 20px;
}

.awb-megamenue__liste a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	border: 1px solid #e7e0d2;
	border-radius: 10px;
	background: #fff;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.35;
	color: #1b3a44;
	text-decoration: none;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, color .18s ease;
}

/* Derselbe Lucide-Pfeil wie im Verzeichnis: gold, beim Ueberfahren weiss im
   gefuellten Kreis. */
.awb-megamenue__liste a::after {
	content: "";
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: transparent no-repeat center / 16px 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c6a96c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
	transition: background-color .18s ease, transform .18s ease;
}

.awb-megamenue__liste a:hover,
.awb-megamenue__liste a:focus-visible {
	color: #8a6f38;
	border-color: #c6a96c;
	box-shadow: 0 8px 20px rgba(27, 58, 68, .12);
	transform: translateY(-2px);
}

.awb-megamenue__liste a:hover::after,
.awb-megamenue__liste a:focus-visible::after {
	background-color: #8a6f38;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
	transform: translateX(2px);
}

.awb-megamenue__hub {
	display: inline-block;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #8a6f38;
	text-decoration: none;
	border-bottom: 2px solid rgba(198, 169, 108, .5);
	padding-bottom: 2px;
}

.awb-megamenue__hub:hover,
.awb-megamenue__hub:focus-visible { border-bottom-color: #8a6f38; }

.awb-megamenue__zu {
	position: absolute;
	top: 18px;
	right: 22px;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #e0d6c2;
	border-radius: 50%;
	background: #fff;
	color: #8a6f38;
	cursor: pointer;
	transition: background .18s ease, color .18s ease, transform .18s ease;
}

.awb-megamenue__zu svg { width: 20px; height: 20px; }

.awb-megamenue__zu:hover,
.awb-megamenue__zu:focus-visible {
	background: #8a6f38;
	color: #fff;
	transform: rotate(90deg);
}

/* Die Seite darunter soll nicht mitscrollen, solange das Feld offen ist. */
.js-megamenue-offen body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.awb-megamenue__flaeche,
	.awb-megamenue__liste a,
	.awb-megamenue__zu { transition: none; }
}

/* Unter 1000 px uebernimmt das Mobilmenue; das Pulldown oeffnet dort nicht
   (siehe megamenue.js) und braucht auch keine Gestaltung. */
@media (max-width: 999px) {
	.awb-megamenue { display: none !important; }
}


/* ------------------------------------------------------------------ *
 * Behandlungszonen im Gesicht (data/gesichtskarte.json)
 *
 * Ersetzt ein zugekauftes Foto, auf dem ein halber Frauenkopf zu sehen war
 * und alle dreizehn Beschriftungen rechts untereinander standen — ins Bild
 * gebrannt. Das war weder aenderbar noch vorlesbar, auf feinen Bildschirmen
 * unscharf und auf dem Telefon kaum zu entziffern.
 *
 * Das neue Motiv traegt nur das Gesicht. Punkte, Linien und Schrift liegen
 * als HTML darueber: echte Schrift, links UND rechts verteilt, und wo es
 * eine Behandlungsseite gibt, ist die Beschriftung ein Link.
 *
 * Rechenweg fuer die Punkte: das Bild steht mittig und nimmt 46 % der Buehne
 * ein, beginnt also bei 27 %. Ein Punkt bei `--x: 50%` im Bild liegt damit
 * bei `27% + 50% * 0.46` der Buehne. `calc()` darf Prozent mit einer Zahl
 * multiplizieren — genau dafuer.
 * ------------------------------------------------------------------ */
.awb-gesichtskarte {
	margin: 34px 0 38px;
}

.awb-gk-buehne {
	position: relative;
	max-width: 1000px;
	margin: 0 auto;
}

.awb-gk-bild {
	display: block;
	width: 46%;
	margin: 0 auto;
	border-radius: 12px;
}

/* Die Zone selbst ist nur Traeger der Koordinaten und faengt keine Klicks —
   sonst laege ueber dem halben Bild eine unsichtbare Flaeche je Eintrag. */
.awb-gk-zone {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.awb-gk-marke {
	position: absolute;
	top: var(--y);
	left: calc(27% + var(--x) * 0.46);
	width: 11px;
	height: 11px;
	margin: -5.5px 0 0 -5.5px;
	border-radius: 50%;
	background: #c6a96c;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .85);
	/* Halb durchscheinend, damit die Punkte das Gesicht nicht zupflastern —
	   beim Ueberfahren wird der angesteuerte Punkt wieder voll deckend und
	   hebt sich dadurch von den uebrigen ab. */
	opacity: .5;
	transition: background .2s ease, transform .2s ease, opacity .2s ease;
}

/* Der Sonarring: waechst aus dem Punkt heraus und verblasst. Er laeuft nur,
   solange die Beschriftung ueberfahren oder mit der Tastatur angesteuert
   wird — eine Dauerbewegung an dreizehn Punkten waere Flimmern. */
.awb-gk-sonar {
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 2px solid #8a6f38;
	opacity: 0;
}

/* Die Fuehrungslinie hat zwei Schenkel: waagerecht auf Schrifthoehe bis
   unter den Punkt (dieses Element), dann senkrecht zu ihm (::after). Eine
   schraege Verbindung braeuchte `atan2()` im CSS — das kennen aeltere
   Browser nicht, und die Winkelform ist bei Infografiken ohnehin ueblich. */
.awb-gk-linie {
	position: absolute;
	top: var(--ly);
	height: 1px;
	background: #cfc4ad;
	transition: background .2s ease;
}

/* Der senkrechte Schenkel haengt an der ZONE, nicht an der Linie: die ist
   1 px hoch, und eine Prozenthoehe daran waere ein Prozentsatz von einem
   Pixel. Die Zone dagegen ist so hoch wie die Buehne — dort meint `--seg-h`
   genau den Hoehenunterschied zwischen Schrift und Punkt. */
.awb-gk-zone::after {
	content: "";
	position: absolute;
	top: var(--seg-top);
	height: var(--seg-h);
	left: calc(27% + var(--x) * 0.46);
	width: 1px;
	background: #cfc4ad;
	transition: background .2s ease;
}

.awb-gk-zone--links .awb-gk-linie {
	left: 24.5%;
	width: calc(2.5% + var(--x) * 0.46);
}

.awb-gk-zone--rechts .awb-gk-linie {
	right: 24.5%;
	width: calc(48.5% - var(--x) * 0.46);
}

.awb-gk-text {
	position: absolute;
	top: var(--ly);
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 24%;
	pointer-events: auto;
	font-size: 15px;
	line-height: 1.3;
	color: #1b3a44;
}

.awb-gk-zone--links .awb-gk-text {
	right: 76%;
	flex-direction: row-reverse;
	text-align: right;
}

.awb-gk-zone--rechts .awb-gk-text {
	left: 76%;
}

/* Die Nummer traegt die Zuordnung auf schmalen Geraeten, wo Linien und
   Punkte wegfallen. */
.awb-gk-nr {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #e0d6c2;
	border-radius: 50%;
	background: #faf7f1;
	font-size: 12px;
	font-weight: 700;
	color: #8a6f38;
}

.awb-gk-text a {
	color: #1b3a44;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid rgba(198, 169, 108, .6);
	transition: color .2s ease, border-color .2s ease;
}

/* Ueberfahren: Punkt und Linie treten hervor, der Sonarring laeuft. */
.awb-gk-zone:hover .awb-gk-marke,
.awb-gk-zone:focus-within .awb-gk-marke {
	background: #8a6f38;
	transform: scale(1.25);
	opacity: 1;
}

.awb-gk-zone:hover .awb-gk-sonar,
.awb-gk-zone:focus-within .awb-gk-sonar {
	animation: awb-sonar 1.6s ease-out infinite;
}

.awb-gk-zone:hover .awb-gk-linie,
.awb-gk-zone:focus-within .awb-gk-linie,
.awb-gk-zone:hover::after,
.awb-gk-zone:focus-within::after {
	background: #8a6f38;
}

.awb-gk-zone:hover .awb-gk-text a,
.awb-gk-text a:hover,
.awb-gk-text a:focus-visible {
	color: #8a6f38;
	border-bottom-color: #8a6f38;
}

.awb-gk-zone:hover .awb-gk-nr,
.awb-gk-zone:focus-within .awb-gk-nr {
	background: #8a6f38;
	border-color: #8a6f38;
	color: #fff;
}

@keyframes awb-sonar {
	0%   { opacity: .9; transform: scale(.7); }
	70%  { opacity: 0;  transform: scale(3.4); }
	100% { opacity: 0;  transform: scale(3.4); }
}

/* Wer Bewegung abgestellt hat, bekommt denselben Hinweis ohne Puls. */
@media (prefers-reduced-motion: reduce) {
	.awb-gk-zone:hover .awb-gk-sonar,
	.awb-gk-zone:focus-within .awb-gk-sonar {
		animation: none;
		opacity: .9;
		transform: scale(2.2);
	}
	.awb-gk-marke, .awb-gk-linie, .awb-gk-text a { transition: none; }
}

/* Schmale Geraete: dreizehn Punkte mit Linien waeren dort Pixelmatsch. Das
   Bild steht allein, die Zonen darunter als zweispaltige Liste — dieselben
   Nummern, dieselben Links. Die Zone verliert ihre Position, ihre Kinder
   fliessen dadurch normal mit. */
@media (max-width: 900px) {
	.awb-gk-bild { width: 100%; max-width: 460px; }
	.awb-gk-buehne {
		display: flex;
		flex-direction: column;
	}
	.awb-gk-zonen-liste { display: block; }
	.awb-gk-zone {
		position: static;
		inset: auto;
	}
	.awb-gk-marke, .awb-gk-linie { display: none; }
	.awb-gk-zone::after { display: none; }
	.awb-gk-text {
		position: static;
		transform: none;
		max-width: none;
		padding: 7px 0;
		border-bottom: 1px solid #efe9dd;
	}
	.awb-gk-zone--links .awb-gk-text {
		flex-direction: row;
		text-align: left;
	}
}

@media (max-width: 900px) and (min-width: 560px) {
	/* Zwei Spalten, damit die Liste nicht doppelt so hoch wird wie das Bild */
	.awb-gk-buehne { display: block; }
	.awb-gk-buehne::after { content: ""; display: block; clear: both; }
	.awb-gk-zone { float: left; width: 50%; }
	.awb-gk-zone .awb-gk-text { padding-right: 16px; }
}


/* ------------------------------------------------------------------ *
 * BAUKASTEN: Karten (.awb-karte)
 *
 * Eine Form fuer alle Kaesten der Aesthetik-Seiten — Themenkarten auf
 * /leistungen/, Faltenarten auf dem Falten-Hub, und alles, was noch dazu
 * kommt. Vorher war dieselbe Optik dreimal getippt und driftete bei jeder
 * Aenderung auseinander.
 *
 * Merkmale: 10 px Radius, heller Rahmen #e3ddd0, goldener Linksrand, beim
 * Ueberfahren 2 px anheben. Kopfzeile aus Symbol im braunen Ring und Titel;
 * Ziele als Zeilen mit Trennlinie und Lucide-Pfeil, der beim Ueberfahren in
 * einen gefuellten Kreis wandert.
 *
 * Aufbau:
 *   <div class="awb-karte">
 *     <h3 class="awb-karte__kopf"><span class="awb-karte__icon">SVG</span>
 *         <span>Titel</span></h3>
 *     <p class="awb-karte__text">…</p>
 *     <ul class="awb-karte__ziele"><li><a href="…">Ziel</a></li></ul>
 *   </div>
 *
 * `.ist-ohne-ziel` nimmt einer Karte das Heben und den goldenen Rand: sie
 * fuehrt nirgendwo hin und soll nicht wie ein toter Knopf wirken.
 * ------------------------------------------------------------------ */
/* Kein `margin` hier: den Abstand bestimmt das Layout, in dem die Karte
   steht — das Raster der Faltenarten ueber `gap`, der Mehrspalter der
   Themenkarten ueber `margin-bottom`. Stand er im Baukasten, ueberschrieb er
   die Layout-Regel (gleiche Spezifitaet, spaeter im Stylesheet) und die
   Karten klebten in der Spalte aneinander. */
.awb-karte {
	padding: 22px 24px 18px;
	border: 1px solid #e3ddd0;
	border-left: 3px solid #c6a96c;
	border-radius: 10px;
	background: #fff;
	transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.awb-karte:hover,
.awb-karte:focus-within {
	box-shadow: 0 8px 22px rgba(27, 58, 68, .13);
	transform: translateY(-2px);
	border-color: #c6a96c;
}

.awb-karte.ist-ohne-ziel {
	background: #faf9f6;
	border-left-color: #e0d6c2;
}

.awb-karte.ist-ohne-ziel:hover {
	box-shadow: none;
	transform: none;
	border-color: #e3ddd0;
	border-left-color: #e0d6c2;
}

.awb-karte__kopf {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 10px !important;
	font-size: 19px !important;
	line-height: 1.25 !important;
	color: #1b3a44;
}

.awb-karte__icon {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #8a6f38;
	border-radius: 50%;
	color: #8a6f38;
	transition: background .2s ease, color .2s ease;
}

.awb-karte__icon svg { width: 20px; height: 20px; }

.awb-karte:hover .awb-karte__icon,
.awb-karte:focus-within .awb-karte__icon {
	background: #8a6f38;
	color: #fff;
}

.awb-karte.ist-ohne-ziel .awb-karte__icon {
	border-color: #cfc4ad;
	color: #b3a68a;
}

.awb-karte__text,
.awb-thema > p {
	margin: 0 0 14px;
	font-size: 15px;
	line-height: 1.6;
	color: #5d6f76;
}

.awb-karte__ziele,
.awb-thema ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid #efe9dd;
}

.awb-karte__ziele li,
.awb-thema ul li {
	margin: 0;
	border-bottom: 1px solid #efe9dd;
}

/* Die globale Regel `.post-content ul li a` ist spezifischer als eine
   einfache Klassenregel — die Ueberschreibungen brauchen dieselbe Tiefe,
   sonst haengt ihr „›" als zweites Zeichen vor dem eigenen Pfeil. */
.post-content .awb-karte__ziele li a,
.post-content .awb-thema ul li a,
.awb-karte__ziele li a,
.awb-thema ul li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 0;
	font-size: 15px;
	line-height: 1.4;
	font-weight: 600;
	color: #1b3a44;
	border-bottom: 0;
	text-decoration: none;
	transition: color .18s ease, padding-left .18s ease;
}

.post-content .awb-karte__ziele li a::after,
.post-content .awb-thema ul li a::after,
.awb-karte__ziele li a::after,
.awb-thema ul li a::after {
	content: "";
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: transparent no-repeat center / 16px 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c6a96c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
	transition: background-color .18s ease, transform .18s ease;
}

.post-content .awb-karte__ziele li a:hover,
.post-content .awb-karte__ziele li a:focus-visible,
.post-content .awb-thema ul li a:hover,
.post-content .awb-thema ul li a:focus-visible,
.awb-karte__ziele li a:hover,
.awb-karte__ziele li a:focus-visible {
	color: #8a6f38;
	padding-left: 6px;
}

.post-content .awb-karte__ziele li a:hover::after,
.post-content .awb-karte__ziele li a:focus-visible::after,
.post-content .awb-thema ul li a:hover::after,
.post-content .awb-thema ul li a:focus-visible::after,
.awb-karte__ziele li a:hover::after,
.awb-karte__ziele li a:focus-visible::after {
	background-color: #8a6f38;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
	transform: translateX(2px);
}

@media (max-width: 640px) {
	.awb-karte { padding: 18px 18px 14px; }
	.awb-karte__kopf { font-size: 18px !important; gap: 12px; }
	.awb-karte__icon { width: 34px; height: 34px; }
	.awb-karte__icon svg { width: 18px; height: 18px; }
}


/* ---------- Verzeichnis der Faltenarten (data/faltenarten.json) ----------
   Vorher acht Aufklapper ueber die volle Inhaltsbreite: links ein Wort,
   rechts aussen ein Plus, dazwischen 900 px nichts — und keiner verlinkt,
   obwohl sechs der acht inzwischen eine eigene Behandlungsseite haben.
   Jetzt Karten aus dem Baukasten; die Texte sind kurz und aehnlich lang,
   deshalb ein festes Raster statt eines Mehrspalters. */
.awb-faltenarten > li { margin: 0; }

.awb-faltenarten {
	list-style: none;
	margin: 0 0 40px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 16px;
	align-items: start;
}

/* Der Verweis auf den Seiten, die die Liste nicht mehr fuehren. */
.awb-faltenarten-verweis {
	margin: 0 0 34px;
	padding: 16px 20px;
	border: 1px solid #e7e0d2;
	border-radius: 10px;
	background: #faf7f1;
	font-size: 15.5px;
	line-height: 1.55;
	color: #5d6f76;
}

.awb-faltenarten-verweis a {
	font-weight: 700;
	color: #8a6f38;
	text-decoration: none;
	border-bottom: 2px solid rgba(198, 169, 108, .5);
}

.awb-faltenarten-verweis a:hover,
.awb-faltenarten-verweis a:focus-visible { border-bottom-color: #8a6f38; }

@media (max-width: 640px) {
	.awb-faltenarten { grid-template-columns: 1fr; gap: 12px; }
}


/* ------------------------------------------------------------------ *
 * Beratungs-Popup (templates/beratung-popup.php, assets/js/beratung.js)
 *
 * Zeigt, wie man die Praxis erreicht: anrufen, schreiben, oder die
 * Online-Rezeption nutzen. **Bewusst ohne Formular** — es nähme
 * Gesundheitsdaten entgegen, und Termine laufen ohnehin über den
 * eingebundenen Dienst.
 *
 * Die Sprechzeiten kommen aus data/praxiszeiten.json — dieselbe Quelle wie
 * das Footer-Popup und der Pflegebereich (Regel 10).
 *
 * `::backdrop` trägt die Unschärfe. Sie auf `body` zu legen wäre falsch:
 * das <dialog> ist ein Kind davon und würde mit verschwimmen.
 * ------------------------------------------------------------------ */
.awb-beratung {
	padding: 0;
	border: 0;
	border-radius: 14px;
	width: min(520px, 92vw);
	max-height: 90vh;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 30px 70px rgba(20, 32, 37, .35);
}

/* Aufpoppen: das Fenster wächst aus der Mitte heraus. Getrennt in
   `ist-sichtbar` (Anzeige) und `ist-offen` (Bewegung) — aus `display:none`
   heraus gäbe es keinen Zwischenschritt und es stünde einfach da.
   `@starting-style` wäre die direkte Fassung, ist aber in älteren Browsern
   nicht zu haben. */
.awb-beratung,
.awb-beratung::backdrop {
	transition: opacity .25s ease, transform .25s cubic-bezier(.22, 1, .36, 1);
}

.awb-beratung[open] {
	opacity: 0;
	transform: scale(.94) translateY(10px);
}

.awb-beratung[open].ist-offen {
	opacity: 1;
	transform: none;
}

.awb-beratung::backdrop {
	background: rgba(20, 32, 37, .45);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
}

.awb-beratung[open].ist-offen::backdrop { opacity: 1; }

.awb-beratung__kopf {
	position: relative;
	padding: 24px 62px 18px 26px;
	background: #faf7f1;
	border-bottom: 3px solid #c6a96c;
}

.awb-beratung__titel {
	margin: 0 !important;
	font-size: 23px !important;
	line-height: 1.2 !important;
	color: #1b3a44;
}

.awb-beratung__unter {
	margin: 6px 0 0;
	font-size: 15px;
	line-height: 1.5;
	color: #5d6f76;
}

.awb-beratung__zu {
	position: absolute;
	top: 16px;
	right: 18px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #e0d6c2;
	border-radius: 50%;
	background: #fff;
	color: #8a6f38;
	cursor: pointer;
	transition: background .18s ease, color .18s ease, transform .18s ease;
}

.awb-beratung__zu svg { width: 18px; height: 18px; }

.awb-beratung__zu:hover,
.awb-beratung__zu:focus-visible {
	background: #8a6f38;
	color: #fff;
	transform: rotate(90deg);
}

.awb-beratung__inhalt {
	padding: 24px 26px 26px;
	overflow-y: auto;
	max-height: calc(90vh - 122px);
}

/* Der Anruf-Knopf ist das Ziel für alle, die nicht schreiben wollen —
   deshalb steht die Nummer darauf und nicht nur „Jetzt anrufen": auf dem
   Telefon sieht man so vor dem Tippen, wen man anruft. */
.awb-beratung__anruf {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 11px;
	padding: 15px 18px;
	border-radius: 999px;
	background: #c6a96c;
	color: #fff !important;
	font-weight: 700;
	font-size: 17px;
	letter-spacing: .02em;
	text-decoration: none;
	transition: background .18s ease, transform .18s ease;
}

.awb-beratung__anruf svg { width: 20px; height: 20px; }

.awb-beratung__anruf:hover,
.awb-beratung__anruf:focus-visible {
	background: #8a6f38;
	transform: translateY(-1px);
}

.awb-beratung__daten {
	margin: 22px 0 0;
	font-size: 15px;
	line-height: 1.5;
}

.awb-beratung__daten dt {
	margin-top: 16px;
	font-size: 12.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #8a6f38;
}

.awb-beratung__daten dd {
	margin: 3px 0 0;
	color: #1b3a44;
}

.awb-beratung__daten a {
	color: #1b3a44;
	text-decoration: none;
	border-bottom: 1px solid rgba(198, 169, 108, .6);
}

.awb-beratung__daten a:hover,
.awb-beratung__daten a:focus-visible { color: #8a6f38; border-bottom-color: #8a6f38; }

.awb-beratung__zeiten { margin-top: 24px; }

.awb-beratung__zeiten h3 {
	margin: 0 0 8px !important;
	font-size: 12.5px !important;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #8a6f38;
}

.awb-beratung__zeiten .pz-tabelle {
	width: 100%;
	border-collapse: collapse;
	font-size: 14.5px;
}

.awb-beratung__zeiten .pz-tabelle th { display: none; }

.awb-beratung__zeiten .pz-tabelle td {
	padding: 5px 0;
	border-bottom: 1px solid #efe9dd;
	color: #1b3a44;
}

.awb-beratung__zeiten .pz-hinweis {
	margin: 10px 0 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: #5d6f76;
}

/* Hinweis auf die Online-Rezeption: derselbe Dienst, der auf jeder Seite
   unten rechts sitzt — darüber laufen Termine und Rezepte. */
.awb-beratung__hinweis {
	margin: 22px 0 0;
	padding: 14px 16px;
	border: 1px solid #e7e0d2;
	border-radius: 10px;
	background: #faf7f1;
	font-size: 14.5px;
	line-height: 1.55;
	color: #5d6f76;
}

.awb-beratung__hinweis strong { color: #1b3a44; }
.awb-beratung__hinweis em { font-style: normal; font-weight: 700; color: #8a6f38; }

/* Die Seite darunter soll nicht mitscrollen, solange das Fenster offen ist. */
.js-beratung-offen body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.awb-beratung,
	.awb-beratung::backdrop,
	.awb-beratung__zu,
	.awb-beratung__anruf { transition: none; }
	.awb-beratung[open] { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
	.awb-beratung { width: 94vw; max-height: 92vh; border-radius: 12px; }
	.awb-beratung__kopf { padding: 20px 56px 16px 20px; }
	.awb-beratung__titel { font-size: 21px !important; }
	.awb-beratung__inhalt { padding: 20px; max-height: calc(92vh - 116px); }
}

/* ---------- Schaubild einer Behandlungsseite ----------
   Steht ueber die volle Inhaltsbreite unter dem Bild-neben-Text-Block. In der
   Textspalte waere es halb so breit — und vom Anlesen mit abgeschnitten. */
.awb-schaubild {
	margin: 4px 0 30px;
}

.awb-schaubild img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

/* ------------------------------------------------------------
   HERO OHNE BILD (site.config.json -> hero_stil)

   Das Standard-Hero war ein helles Praxisfoto mit goldener Ueberschrift
   darauf — auf 375 px rund 2:1 Kontrast, also praktisch unlesbar, und
   direkt darunter steht ohnehin das erklaerende Bild der Behandlung.
   Hier traegt der Hero nur noch Text; das Auge geht sofort zur Ueberschrift.

   Drei Stile, umschaltbar ueber `hero_stil` in der site.config.json:
   linie · aurora · kontur. Alle stehen still, wenn der Besucher
   `prefers-reduced-motion` gesetzt hat — Bewegung ist Zutat, nie Traeger.
   ------------------------------------------------------------ */

.awb-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: linear-gradient(180deg, #ffffff 0%, #faf7f1 100%);
	border-bottom: 1px solid rgba(198, 169, 108, .28);
}

/* Die Ueberschrift stand in Gold auf dem Foto. Ohne Foto traegt Gold den
   Titel nicht (auf Weiss rund 2:1) — der Titel wird dunkel, das Gold
   wandert auf Kicker und Linie, wo es Schmuck ist und keine Information.

   `#wrapper` steht hier nicht als Deko: Avadas eigene Regel lautet
   `.fusion-body #wrapper .fusion-title h1` und schlaegt mit ihrer ID jeden
   klassenbasierten Selektor. Die Farbe ueber `--awb-text-color` zu setzen
   geht nicht — Avada schreibt die Variable inline an den Titel. */
.fusion-body #wrapper .awb-hero .fusion-title .fusion-title-heading,
.fusion-body #wrapper .awb-hero .fusion-title h1 {
	color: #1b3a44;
}

.awb-hero__kicker {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #b3924e;
}

/* Der Kicker steht NEBEN dem Titel, nicht darin (sonst faenge Avadas
   Titel-CSS ihn mit ein) — die Ausrichtung muss er sich deshalb beim
   Nachbarn holen. Die Leiste traegt zwei Titel: links ausgerichtet fuer
   den Desktop, zentriert fuer das Telefon. */
.awb-hero .fusion-column-wrapper:has(.fusion-title-center) .awb-hero__kicker {
	text-align: center;
}

/* --- Stil „linie": ruhig, eine goldene Linie waechst unter dem Titel --- */

.awb-hero--linie .fusion-title::after {
	content: "";
	display: block;
	height: 2px;
	width: 96px;
	margin-top: 22px;
	background: linear-gradient(90deg, #c6a96c 0%, rgba(198, 169, 108, 0) 100%);
	animation: awb-hero-linie 1s cubic-bezier(.22, 1, .36, 1) .35s backwards;
}

.awb-hero--linie .fusion-title-center::after {
	margin-left: auto;
	margin-right: auto;
	background: linear-gradient(90deg, rgba(198, 169, 108, 0) 0%, #c6a96c 50%, rgba(198, 169, 108, 0) 100%);
}

@keyframes awb-hero-linie {
	from { width: 0; opacity: 0; }
	to   { width: 96px; opacity: 1; }
}

/* --- Stil „aurora": zwei weiche Farbfelder wandern langsam --- */

.awb-hero--aurora::before,
.awb-hero--aurora::after {
	content: "";
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	filter: blur(60px);
	pointer-events: none;
}

.awb-hero--aurora::before {
	top: -40%;
	left: -10%;
	width: 60%;
	height: 180%;
	background: radial-gradient(circle, rgba(198, 169, 108, .38) 0%, rgba(198, 169, 108, 0) 70%);
	animation: awb-hero-aurora-a 22s ease-in-out infinite alternate;
}

.awb-hero--aurora::after {
	top: -30%;
	right: -15%;
	width: 55%;
	height: 170%;
	background: radial-gradient(circle, rgba(47, 180, 204, .28) 0%, rgba(47, 180, 204, 0) 70%);
	animation: awb-hero-aurora-b 28s ease-in-out infinite alternate;
}

@keyframes awb-hero-aurora-a {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to   { transform: translate3d(14%, 6%, 0) scale(1.15); }
}

@keyframes awb-hero-aurora-b {
	from { transform: translate3d(0, 0, 0) scale(1.1); }
	to   { transform: translate3d(-12%, -8%, 0) scale(1); }
}

/* --- Stil „kontur": ein Linienzug wird beim Laden gezeichnet --- */

.awb-hero__kontur {
	position: absolute;
	inset: 0;
	z-index: -1;
	color: rgba(198, 169, 108, .55);
	pointer-events: none;
}

.awb-hero__kontur svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* stroke-dasharray in Nutzereinheiten: die Pfade sind rund 1300 lang,
   1400 deckt sie sicher ab. Ein exakter Wert je Pfad braeuchte JS
   (getTotalLength) — der Effekt traegt das nicht. */
.awb-hero__kontur path {
	stroke-dasharray: 1400;
	stroke-dashoffset: 1400;
	animation: awb-hero-zeichnen 2.2s cubic-bezier(.32, .72, .26, 1) forwards;
}

.awb-hero__kontur path:nth-child(2) { animation-delay: .12s; }
.awb-hero__kontur path:nth-child(3) { animation-delay: .24s; }
.awb-hero__kontur path:nth-child(4) { animation-delay: .36s; }
.awb-hero__kontur path:nth-child(5) { animation-delay: .48s; }

@keyframes awb-hero-zeichnen {
	to { stroke-dashoffset: 0; }
}

/* Auf dem Telefon braucht die leere Flaeche weniger Luft — das Innenpolster
   steht inline an der Avada-Reihe, deshalb !important. */
@media (max-width: 640px) {
	.awb-hero .fusion-fullwidth {
		--awb-padding-top: 36px !important;
		--awb-padding-bottom: 30px !important;
	}

	.awb-hero__kicker { font-size: 12px; margin-bottom: 8px; }

	.awb-hero--linie .fusion-title::after { margin-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.awb-hero--linie .fusion-title::after,
	.awb-hero--aurora::before,
	.awb-hero--aurora::after,
	.awb-hero__kontur path {
		animation: none;
	}

	.awb-hero__kontur path { stroke-dashoffset: 0; }
}

/* ------------------------------------------------------------
   ZERTIFIKATE: zwei Gruppen (data/zertifikate.json)

   Elf Urkunden lagen als eine Reihe auf /vita/, zehn davon aus der
   aesthetischen Medizin — das eine Neurologie-Zertifikat stand dazwischen
   und ging unter. Die Ueberschrift ist bewusst ein Kicker und keine
   Abschnittsueberschrift: darueber steht bereits „Zertifikate", zwei
   gleichrangige Ueberschriften uebereinander waeren eine Stufe zu viel.
   ------------------------------------------------------------ */

.awb-gallery-wrapper .awb-zert-titel {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #2fb4cc;
}

/* Abstand nur zwischen den Gruppen — vor der ersten sitzt schon der
   Abstand der Abschnittsueberschrift. */
.awb-gallery-wrapper .awb-zertifikate + .awb-zert-titel {
	margin-top: 34px;
	padding-top: 26px;
	border-top: 1px solid rgba(47, 180, 204, .22);
}

/* ------------------------------------------------------------
   BEREICHSWEICHE (Startseite, templates/bereichsweiche.php)

   Zwei Standbeine, die fachlich nichts miteinander zu tun haben: wer mit
   Migräne kommt, sucht etwas anderes als wer wegen Faltenbehandlung kommt.
   Die Weiche fragt einmal je Sitzung — als Overlay, nicht als eigene Seite;
   die Startseite liegt vollständig darunter (Begründung im Template).

   Die Diagonale ist ein `clip-path`, kein gedrehter Kasten: ein Element mit
   `transform: rotate()` müsste über den Rand hinausragen und erzeugt auf
   schmalen Fenstern waagerechten Überlauf.
   ------------------------------------------------------------ */

.js-weiche-offen,
.js-weiche-offen body { overflow: hidden; }

/* `display: flex` schlaegt das `hidden`-Attribut: die UA-Regel
   `[hidden] { display: none }` verliert gegen jede Autor-Regel. Ohne die
   naechste Zeile blieb das Overlay ab dem ZWEITEN Aufruf in derselben
   Sitzung unsichtbar ueber der Seite liegen (opacity 0, aber
   pointer-events: auto) und verschluckte jeden Klick — es sah aus, als
   haenge der Server. */
.awb-weiche[hidden] { display: none; }

.awb-weiche {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	/* Zweite Sicherung: erst der offene Zustand nimmt Klicks entgegen.
	   Damit ist auch das Zeitfenster zwischen `hidden`-Entfernen und
	   `ist-offen` (zwei Frames) ungefaehrlich. */
	pointer-events: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 30px;
	padding: 40px 24px;
	background: #ffffff;
	overflow: hidden;
	opacity: 0;
	transition: opacity .4s ease;
}

.awb-weiche.ist-offen { opacity: 1; pointer-events: auto; }
.awb-weiche.ist-zu { opacity: 0; pointer-events: none; }

/* --- die beiden Farbflächen --- */

.awb-weiche__flaeche {
	position: absolute;
	inset: 0;
	z-index: -1;
	transition: transform .9s cubic-bezier(.22, 1, .36, 1),
	            filter .5s ease;
}

.awb-weiche__flaeche--neuro {
	background:
		radial-gradient(120% 90% at calc(var(--zeiger-x, .3) * 60%) calc(var(--zeiger-y, .5) * 100%),
			#3fc6dd 0%, #2fb4cc 45%, #1b7f92 100%);
	clip-path: polygon(0 0, 58% 0, 42% 100%, 0 100%);
	transform: translate3d(-12%, 0, 0);
}

.awb-weiche__flaeche--aesth {
	background:
		radial-gradient(120% 90% at calc(40% + var(--zeiger-x, .7) * 60%) calc(var(--zeiger-y, .5) * 100%),
			#d8bd85 0%, #c6a96c 45%, #8f7742 100%);
	clip-path: polygon(58% 0, 100% 0, 100% 100%, 42% 100%);
	transform: translate3d(12%, 0, 0);
}

.awb-weiche.ist-offen .awb-weiche__flaeche { transform: translate3d(0, 0, 0); }

/* --- Kopf --- */

.awb-weiche__kopf {
	text-align: center;
	color: #ffffff;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .6s ease .35s, transform .6s ease .35s;
}

.awb-weiche.ist-offen .awb-weiche__kopf { opacity: 1; transform: none; }

.awb-weiche__marke {
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	opacity: .85;
}

.awb-weiche__frage {
	margin: 0;
	font-size: clamp(24px, 3.4vw, 40px);
	font-weight: 700;
	line-height: 1.15;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .18);
}

/* --- die beiden Ziele --- */

.awb-weiche__wahl {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 340px));
	gap: 28px;
	width: 100%;
	max-width: 760px;
}

.awb-weiche__ziel {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 26px 24px 22px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .94);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .16);
	text-decoration: none;
	color: #1b3a44;
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .6s ease, transform .6s cubic-bezier(.22, 1, .36, 1),
	            box-shadow .3s ease;
}

.awb-weiche.ist-offen .awb-weiche__ziel { opacity: 1; transform: none; }
.awb-weiche.ist-offen .awb-weiche__ziel--neuro { transition-delay: .5s; }
.awb-weiche.ist-offen .awb-weiche__ziel--aesth { transition-delay: .62s; }

.awb-weiche__ziel:hover,
.awb-weiche__ziel:focus-visible {
	box-shadow: 0 26px 60px rgba(0, 0, 0, .24);
	transform: translateY(-6px);
	/* Die Karte ist ein <a>: Avadas globale Link-Hoverfarbe faerbte beim
	   Ueberfahren den Titel tuerkis, auch in der goldenen Karte. Die Farbe
	   gehoert deshalb an den Link selbst — `inherit` am Titel holt sie sich
	   sonst von dort und ist damit wirkungslos. */
	color: #1b3a44;
}


.awb-weiche__kicker {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.awb-weiche__ziel--neuro .awb-weiche__kicker { color: #1b7f92; }
.awb-weiche__ziel--aesth .awb-weiche__kicker { color: #8f7742; }

.awb-weiche__titel {
	font-size: 27px;
	font-weight: 700;
	line-height: 1.1;
}

.awb-weiche__text {
	font-size: 15px;
	line-height: 1.5;
	color: #4a5a60;
}

/* Der Zeilenumbruch der Beschreibung darf die Karte nicht wachsen lassen —
   sonst springen beim Überfahren beide Karten in der Höhe. */
.awb-weiche__mehr {
	margin-top: 6px;
	font-weight: 700;
	font-size: 15px;
}

.awb-weiche__ziel--neuro .awb-weiche__mehr { color: #2fb4cc; }
.awb-weiche__ziel--aesth .awb-weiche__mehr { color: #a98c4f; }

.awb-weiche__mehr::after {
	content: "›";
	display: inline-block;
	margin-left: 6px;   /* ein Leerzeichen im content kollabiert am inline-block */
	transition: transform .25s ease;
}

.awb-weiche__ziel:hover .awb-weiche__mehr::after { transform: translateX(5px); }

/* --- „Erst einmal umsehen" --- */

.awb-weiche__weiter {
	border: 1px solid rgba(255, 255, 255, .7);
	background: transparent;
	color: #ffffff;
	border-radius: 999px;
	padding: 11px 26px;
	font: inherit;
	font-size: 15px;
	cursor: pointer;
	opacity: 0;
	transition: opacity .5s ease .8s, background-color .25s ease, color .25s ease;
}

.awb-weiche.ist-offen .awb-weiche__weiter { opacity: .92; }

.awb-weiche__weiter:hover,
.awb-weiche__weiter:focus-visible {
	background: #ffffff;
	color: #1b3a44;
}

/* --- schmale Fenster: übereinander, Diagonale flacher --- */

@media (max-width: 860px) {
	.awb-weiche { gap: 22px; padding: 32px 18px; }

	.awb-weiche__flaeche--neuro {
		clip-path: polygon(0 0, 100% 0, 100% 44%, 0 56%);
		transform: translate3d(0, -12%, 0);
	}

	.awb-weiche__flaeche--aesth {
		clip-path: polygon(0 56%, 100% 44%, 100% 100%, 0 100%);
		transform: translate3d(0, 12%, 0);
	}

	.awb-weiche__wahl { grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: 460px; }
	.awb-weiche__ziel { padding: 18px 18px 16px; gap: 5px; }
	.awb-weiche__titel { font-size: 22px; }
	.awb-weiche__text { font-size: 14px; }
}

/* Auf sehr flachen Fenstern (Telefon quer) fällt die Beschreibung weg —
   sonst passt die Weiche nicht auf den Schirm und beginnt zu scrollen. */
@media (max-height: 560px) {
	.awb-weiche__text { display: none; }
	.awb-weiche__kopf { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.awb-weiche,
	.awb-weiche__flaeche,
	.awb-weiche__kopf,
	.awb-weiche__ziel,
	.awb-weiche__weiter,
	.awb-weiche__mehr::after {
		transition: none;
	}

	.awb-weiche__flaeche { transform: none; }
	.awb-weiche__ziel:hover { transform: none; }
}

/* Seitentitel auf Seiten ohne Hero-Leiste (site.config.json -> hero_raus).
   Impressum und Datenschutz beginnen sachlich mit ihrer Überschrift; ohne
   eigenen Abstand klebte sie am Kopfbereich. */
.post-content > .awb-seitentitel {
	margin: 0 0 26px;
	padding-top: 8px;
	font-size: 38px;
	line-height: 1.15;
	color: #2eb4cc;
}

@media (max-width: 640px) {
	.post-content > .awb-seitentitel { font-size: 28px; margin-bottom: 18px; }
}

/* Die Namensbox auf der Startseite bekommt Luft.

   Avada setzt dort 10 px Innenabstand — der Titel klebte am Rand der
   halbtransparenten Fläche. Der Wert steht als `--awb-padding-*` inline an
   der Spalte, deshalb `!important`: eine Regel ohne das käme nicht gegen das
   style-Attribut an.

   Getroffen wird genau diese eine Box: die einzige Spalte im Inhalt, die eine
   Überschrift in H1-Größe UND einen Knopf enthält. Die Startseite hat drei
   Spalten mit H1 (`:has(> .fusion-title-size-one)` allein trifft also zu
   viel) und fünfzehn mit `fusion-column-has-shadow` — Avadas Zählklassen
   (`fusion-builder-column-4`) sind als Anker untauglich, sie heißen auf jeder
   Seite anders (Regel 16). */
.post-content .fusion-column-wrapper:has(> .fusion-title-size-one):has(a.fusion-button) {
	--awb-padding-top: 20px !important;
	--awb-padding-right: 20px !important;
	--awb-padding-bottom: 20px !important;
	--awb-padding-left: 20px !important;
	padding: 20px !important;
}

/* ------------------------------------------------------------
   HINWEISBAND „Sprechzeiten & Urlaub" (lib/praxiszeiten.php)

   Die Betreiberin hat ihren eigenen Praxisurlaub auf der Seite nicht
   gefunden — er stand nur im Footer-Popup, also bei 81 % der Seitenlänge.
   Ihre Worte (16.08.2026): „das muss irgendwo ganz vorne sein, nicht dass
   Menschen Aktuelles drücken, das macht nicht jeder."

   Das Band steht deshalb auf jeder Seite direkt unter dem Kopfbereich und
   öffnet dasselbe Popup wie der Footer-Knopf. Es ist bewusst **nicht**
   `position: sticky`: auf dem Telefon würde es dauerhaft Höhe kosten, und
   die Information muss man einmal sehen, nicht ständig.
   ------------------------------------------------------------ */

.pz-band {
	--pz-band-grund: #eef7f9;
	--pz-band-linie: #2fb4cc;
	--pz-band-schrift: #14424d;
	background: var(--pz-band-grund);
	border-bottom: 1px solid rgba(0, 0, 0, .06);
	box-shadow: inset 3px 0 0 var(--pz-band-linie);
}

/* Läuft gerade ein Urlaub, trägt das Band Signalfarbe — sonst übersieht man
   genau die Zeile, um die es geht. */
.pz-band--urlaub {
	--pz-band-grund: #fdf1e3;
	--pz-band-linie: #c6862c;
	--pz-band-schrift: #6b4310;
}

/* Vertretung: die Praxis ist OFFEN, nur die Ärztin ist weg. Deshalb bewusst
   keine Signalfarbe wie beim Urlaub — ein Alarmton hier liest sich wie
   „geschlossen" und schickt genau die Patienten weg, die kommen könnten.
   Gold statt Sandton: sichtbar, aber kein Warnsignal. */
.pz-band--vertretung {
	--pz-band-grund: #fbf6ec;
	--pz-band-linie: #c6a96c;
	--pz-band-schrift: #5c4a22;
}

.pz-band--bald {
	--pz-band-grund: #fbf6ec;
	--pz-band-linie: #c6a96c;
	--pz-band-schrift: #5c4a22;
}

.pz-band__link {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 1140px;
	margin: 0 auto;
	padding: 10px 24px;
	color: var(--pz-band-schrift);
	text-decoration: none;
	font-size: 15px;
	line-height: 1.35;
}

.pz-band__link:hover .pz-band__mehr,
.pz-band__link:focus-visible .pz-band__mehr { text-decoration: underline; }

.pz-band__symbol { flex: 0 0 auto; color: var(--pz-band-linie); }
.pz-band__text { font-weight: 700; }

.pz-band__mehr {
	margin-left: auto;
	font-size: 14px;
	opacity: .85;
	white-space: nowrap;
}

.pz-band__mehr::after {
	content: "›";
	display: inline-block;
	margin-left: 6px;
}

/* Auf dem Telefon zählt jede Zeile: der Zusatz rutscht unter den Hinweis
   statt ihn zu verdrängen, und der Antippbereich bleibt über die volle
   Breite erhalten. */
@media (max-width: 700px) {
	.pz-band__link {
		flex-wrap: wrap;
		padding: 9px 18px;
		font-size: 14px;
		gap: 8px;
	}

	.pz-band__mehr {
		margin-left: 28px;
		flex-basis: 100%;
		font-size: 13px;
	}
}


/* Download eines Beitrags (z. B. der Anmeldebogen auf der Startseite).
   Steht als eigener Knopf NEBEN der Kachel — die ist selbst ein Link, ein
   zweiter darin wäre ungültiges Markup. */
.awb-karte-mehr:has(.awb-beitrag-download) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.awb-beitraege-kompakt .awb-beitrag-download { margin-left: 84px; }

.awb-beitrag-download {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 8px 14px;
	border: 1px solid #c6a96c;
	border-radius: 999px;
	font-size: 13px;
	line-height: 1.2;
	white-space: nowrap;
	color: #6b5320;
	text-decoration: none;
	transition: background-color .18s ease, color .18s ease;
}

/* Der Pfeil kommt aus der Kartenregel für „mehr lesen" — auf einem Knopf mit
   eigenem Symbol steht er doppelt gemoppelt und schiebt den Text um. */
.awb-karte-mehr .awb-beitrag-download::after,
.awb-beitrag-download::after {
	content: none;
}

.awb-beitrag-download:hover,
.awb-beitrag-download:focus-visible {
	background: #c6a96c;
	color: #fff;
}

@media (max-width: 640px) {
	.awb-beitrag-download { margin-left: 0; width: 100%; justify-content: center; }
}


/* ---------------------------------------------------------------- VORLESER
   Knopf zum Anhören eines langen Abschnitts. Eigene Bedienelemente, weil der
   native Player nicht browserübergreifend einfärbbar ist (wie beim Video,
   Regel 14). Farben aus dem Styleguide: Gold für die Bedienung, Türkis für
   den Text. */
.awb-vorleser {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin: 0 0 28px;
	padding: 12px 16px;
	background: #fbf8f2;
	border: 1px solid #e6dcc6;
	border-radius: 10px;
}

.awb-vorleser__knopf {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 9px 18px 9px 12px;
	border: 0;
	border-radius: 6px;
	background: #c6a96c;
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .18s ease;
}

.awb-vorleser__knopf:hover,
.awb-vorleser__knopf:focus-visible { background: #b3945a; }
.awb-vorleser__knopf svg { flex: none; fill: currentColor; }

/* Der Balken ist bedienbar (Klick und Pfeiltasten), deshalb sichtbarer Fokus
   und ein Mindestmaß zum Treffen — nicht nur eine dünne Linie. */
.awb-vorleser__balken {
	position: relative;
	flex: 1 1 140px;
	height: 6px;
	min-width: 120px;
	border-radius: 999px;
	background: #e6dcc6;
	cursor: pointer;
}

.awb-vorleser__balken::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--fortschritt, 0%);
	border-radius: 999px;
	background: #c6a96c;
	transition: width .12s linear;
}

.awb-vorleser__balken:focus-visible {
	outline: 2px solid #1b3a44;
	outline-offset: 4px;
}

.awb-vorleser__zeit {
	flex: none;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	color: #6b5320;
}

/* Kennzeichnung wie bei den KI-Bildern: sichtbar, nicht eingebrannt, damit
   sie lesbar bleibt und sich ändern lässt. */
.awb-vorleser__hinweis {
	flex: 1 0 100%;
	margin: 2px 0 0;
	font-size: 12px;
	line-height: 1.4;
	color: #8a7c63;
}

@media (max-width: 640px) {
	.awb-vorleser {
		gap: 10px;
	}
	.awb-vorleser__knopf { flex: 1 0 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.awb-vorleser__balken::before { transition: none; }
}


/* --------------------------------------------------------------- WEGWEISER
   Anliegen ankreuzen, passende Seiten sehen. Ohne JavaScript stehen die Ziele
   direkt unter jedem Anliegen (`.awb-wegweiser__ohne-js`); erst das Skript
   setzt `js-wegweiser` und blendet sie aus. Im CSS versteckt waere der Bereich
   ohne JavaScript ein toter Kasten. */
.awb-wegweiser {
	margin: 0 0 40px;
	padding: 28px;
	background: #fbf8f2;
	border: 1px solid #e6dcc6;
	border-radius: 18px;
}

.awb-wegweiser__einleitung {
	margin: 0 0 22px;
	font-size: 16px;
	line-height: 1.6;
	color: #3f3f3f;
}

.awb-wegweiser__bereiche {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 22px;
}

.awb-wegweiser__bereich {
	margin: 0;
	padding: 0;
	border: 0;
}

.awb-wegweiser__bereich legend {
	padding: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #c6a96c;
}

.awb-wegweiser__wahl {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 9px;
	font-size: 15px;
	line-height: 1.45;
	color: #1b3a44;
	cursor: pointer;
}

.awb-wegweiser__wahl input {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: #c6a96c;
	cursor: pointer;
}

/* Ergebnis */
.awb-wegweiser__ergebnis {
	margin: 26px 0 0;
	padding: 22px 24px;
	background: #fff;
	border: 1px solid #e6dcc6;
	border-left: 4px solid #c6a96c;
	border-radius: 12px;
}

.awb-wegweiser__zaehler {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #c6a96c;
}

.awb-wegweiser__treffer {
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

.awb-wegweiser__treffer li { margin: 0 0 8px; }

.awb-wegweiser__treffer a {
	font-size: 16px;
	font-weight: 600;
	color: #1b3a44;
	text-decoration: none;
	border-bottom: 1px solid #c6a96c;
}

.awb-wegweiser__treffer a:hover,
.awb-wegweiser__treffer a:focus-visible { color: #c6a96c; }

/* Der Schlusssatz ist kein Kleingedrucktes: er sagt, dass hier nichts
   empfohlen und nichts diagnostiziert wird. */
.awb-wegweiser__abschluss {
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1.6;
	color: #5b5b5b;
}

.awb-wegweiser__knopf {
	display: inline-block;
	padding: 12px 26px;
	border-radius: 999px;
	background: #c6a96c;
	color: #fff !important;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
}

.awb-wegweiser__knopf:hover,
.awb-wegweiser__knopf:focus-visible { background: #b3945a; }

.awb-wegweiser__leeren {
	margin: 18px 0 0;
	padding: 8px 18px;
	border: 1px solid #d8cbae;
	border-radius: 999px;
	background: transparent;
	font-family: inherit;
	font-size: 13px;
	color: #6b5320;
	cursor: pointer;
}

.awb-wegweiser__ohne-js {
	margin: 0 0 14px 28px;
	padding: 0;
	font-size: 14px;
}

.js-wegweiser .awb-wegweiser__ohne-js { display: none; }

@media (max-width: 640px) {
	.awb-wegweiser { padding: 20px 16px; }
	.awb-wegweiser__knopf { display: block; text-align: center; }
}


/* -------------------------------------------------------- HERO-TITEL MOBIL
   Avada legt den Hero-Titel zweimal an — eine Fassung für den Schreibtisch,
   eine fürs Telefon. Seit dem SEO-Audit wird die mobile Fassung zu einem <p>
   entwertet, damit nicht zwei <h1> auf der Seite stehen (Regel 57). Avadas
   Gold-Regel zielt aber auf `h1`, deshalb stand der Titel auf dem Telefon
   plötzlich grau und dünn auf dem Hero-Bild — kaum lesbar.

   Der Selektor braucht `#wrapper`: Avadas eigene Regel lautet
   `.fusion-body #wrapper .fusion-title h1` und schlägt mit ihrer ID jeden
   klassenbasierten Selektor (dieselbe Falle wie in Regel 50). */
.fusion-body #wrapper .fusion-page-title-bar
	.fusion-fullwidth[style*="background-image"] p.fusion-title-heading,
.fusion-body #wrapper .fusion-page-title-bar
	.fusion-fullwidth[style*="--awb-background-image"] p.fusion-title-heading {
	color: #c6a96c;
	font-weight: 700;
	/* Der Schatten trägt den Text auch über hellen Stellen des Fotos; ohne ihn
	   verschwindet Gold auf einem hellen Kittel. */
	text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

/* Hero-Titel: die Groesse, die Avada selbst vorsieht (Regel 89).

   Gemessen am 27.08.2026 gegen die Live-Site: dort steht der Titel in
   **60,8 px**, bei uns in **231 px** — genau Faktor 3,8. Avada schreibt die
   Zielgroesse als `--fontSize:60.8` inline an die Ueberschrift und setzt
   daraus per eigener Regel die Pixelgroesse; bei uns fehlt diese Regel, und
   der geerbte `em`-Wert multiplizierte sich mit der Elterngroesse. Der Titel
   lief dadurch auf jeder Seite aus der Leiste — auf den russischen Fassungen
   faellt es nur staerker auf, weil die Titel laenger sind.

   `calc(var(--fontSize) * 1px)` nimmt genau den Wert, den Avada je Seite
   hinterlegt hat; der Rueckfall 46 gilt nur, wenn die Angabe fehlt. Die
   Obergrenze aus `min()` haelt lange Titel im Bild, ohne kurze zu schrumpfen. */
body .fusion-page-title-bar .fusion-title h1.fusion-title-heading,
body .fusion-page-title-bar .fusion-title p.fusion-title-heading {
	font-size: min(calc(var(--fontSize, 46) * 1px), 7.2vw) !important;
}

/* Dasselbe Gold für die <h1> — also für den Titel, den der Besucher am
   Schreibtisch sieht (Regel 89).
   Bis 27.08.2026 galt die Regel darüber nur für die MOBILE Fassung (<p>).
   Am Schreibtisch stand der Titel deshalb in Avadas Grau (#3f3f3f) auf dem
   Foto — auf JEDER bebilderten Seite, nicht nur auf den russischen: dort ist
   es nur aufgefallen, weil der längere Titel mehr Fläche einnimmt.

   Kein `#wrapper` im Selektor: die `fusion-page-title-bar` liegt außerhalb
   davon (Regel 7, siehe auch Regel 88). Deshalb trägt die Regel `!important`
   — sonst gewinnt Avadas ID-Selektor.

   Ausgenommen ist die Neurologie: dort ist der Titel dunkel auf hellem Motiv
   (Regel 81), Gold wäre dort unlesbar. Und Heros ohne Bild (Regel 50) fallen
   ohnehin heraus, weil der Selektor ein Hintergrundbild verlangt.            */
body:not(.ist-neurologie) .fusion-page-title-bar
	.fusion-fullwidth[style*="background-image"] h1.fusion-title-heading,
body:not(.ist-neurologie) .fusion-page-title-bar
	.fusion-fullwidth[style*="--awb-background-image"] h1.fusion-title-heading {
	color: #c6a96c !important;
	font-weight: 700;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

/* Gold über einem Foto ist nur so lesbar wie die Stelle darunter dunkel ist —
   auf dem Leistungs-Hero liegt der Titel über einem hellen Kittel. Ein
   schmaler Verlauf über der Bildmitte trägt den Text, ohne das Bild
   abzudunkeln oder die Schriftfarbe anzufassen. Nur mobil: am Schreibtisch
   steht der Titel links über ruhigerem Grund. */
@media (max-width: 800px) {
	/* Der Verlauf muss auf die Reihe MIT dem Bild, nicht auf die Leiste: das
	   Hero-Bild hängt als CSS-Hintergrund an der `fullwidth`-Reihe darin
	   (Regel 49). Auf der Leiste lag der Verlauf hinter dem Bild und war
	   wirkungslos. */
	.fusion-page-title-bar .fusion-fullwidth { position: relative; }

	/* Nur wo wirklich ein Bild liegt: Heros ohne Bild (Regel 50) bekaemen
	   sonst einen dunklen Schleier ueber hellem Grund, und ihr Titel ist
	   dort ohnehin dunkel auf hell. Avada schreibt das Bild als
	   `--awb-background-image` an die Reihe. */
	.fusion-page-title-bar .fusion-fullwidth[style*="background-image"]::before,
	.fusion-page-title-bar .fusion-fullwidth[style*="--awb-background-image"]::before {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg,
			rgba(0, 0, 0, 0) 0%,
			rgba(0, 0, 0, .34) 42%,
			rgba(0, 0, 0, .34) 62%,
			rgba(0, 0, 0, 0) 100%);
		pointer-events: none;
	}

	/* Der Titel muss über dem Verlauf liegen, sonst verschluckt ihn die
	   Abdunklung mit. */
	.fusion-page-title-bar .fusion-title,
	.fusion-page-title-bar .fusion-title-heading,
	.fusion-page-title-bar .fusion-builder-row { position: relative; z-index: 1; }
}



}


/* Beide Knöpfe der Fußleiste gleich breit halten, sonst wirkt der kürzere
   wie ein Anhängsel. Unter 560 px volle Breite untereinander. */
.pz-footer-leiste .pz-knopf {
	flex: 0 1 auto;
	justify-content: center;
	min-width: 260px;
}

@media (max-width: 560px) {
	.pz-footer-leiste { flex-direction: column; }
	.pz-footer-leiste .pz-knopf { min-width: 0; width: 100%; }
}


/* --------------------------------------------- BEDIENHILFEN: TEXTGRÖSSE
   Unser a11y-widget skaliert die Root-Schriftgröße (`html.a11yw-font-1|2|3`).
   Das wirkt nur auf rem-basierten Layouts — dieses Avada-CSS deklariert
   Schriftgrößen in px, der Inhalt bliebe also unverändert. Bei anderen
   Projekten wurde deshalb px auf rem umgestellt (Sandra Dentale: 82 Werte,
   Erika Moser: 25). Hier steckt das in einem 1,12 MB großen Fusion-Bundle,
   das wir nicht umschreiben — die Umstellung wäre ein eigenes Vorhaben mit
   Regressionsrisiko auf 44 Seiten.

   Deshalb `zoom` auf den Inhaltsbereich: skaliert Text UND die px-Abstände
   proportional, ohne das Bundle anzufassen. Bewusst nur `.post-content` —
   auf `body` gezogen würde es Kopf, Fuß und die fest positionierten Knöpfe
   mitverschieben. `zoom` unterstützen alle Zielbrowser (Firefox seit 126). */
html.a11yw-font-1 .post-content { zoom: 1.12; }
html.a11yw-font-2 .post-content { zoom: 1.25; }
html.a11yw-font-3 .post-content { zoom: 1.38; }

/* ------------------------------------------------------------------ *
 * ZUGANG ZUR PRAXIS (www/lib/zugang.php)
 *
 * Steht im Beratungs- und im Praxiszeiten-Fenster. Bewusst KEINE
 * Alarmfarbe: es ist kein Notfall, sondern eine Angabe zur Planung —
 * ein roter Kasten liest sich wie „geschlossen". Der goldene Linksrand
 * ist derselbe wie beim Karten-Baukasten, damit der Hinweis als Teil
 * der Seite gelesen wird und nicht als eingeklebte Warnung.
 * ------------------------------------------------------------------ */
.awb-zugang {
	margin: 22px 0 0;
	padding: 14px 16px;
	border: 1px solid #e7e0d2;
	border-left: 3px solid #c6a96c;
	border-radius: 10px;
	background: #faf7f1;
}

.awb-zugang__titel {
	margin: 0 0 6px !important;
	font-size: 15px !important;
	line-height: 1.3 !important;
	font-weight: 700;
	color: #1b3a44 !important;
	text-transform: none;
	letter-spacing: 0;
}

.awb-zugang__text {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: #5d6f76;
}

.awb-zugang__tel {
	margin: 8px 0 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: #5d6f76;
}

.awb-zugang__tel a {
	font-weight: 700;
	color: #8a6f38;
	border-bottom: 1px solid rgba(138, 111, 56, .35);
	text-decoration: none;
}

.awb-zugang__tel a:hover,
.awb-zugang__tel a:focus-visible { border-bottom-color: #8a6f38; }

/* Einzeiler-Fassung (zugang_kurz), fuer Stellen ohne Platz fuer den Kasten. */
.awb-zugang-kurz {
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: #5d6f76;
}

/* Im Fliesstext (Regel 73, z. B. auf der Neurologie-Seite) steht der Kasten
   ueber die volle Inhaltsspalte von 1140 px — dort wirkt die Fenster-Schrift
   von 14,5 px verloren und die Zeilen werden zu lang zum Lesen. Deshalb
   gebremste Breite und die Schriftgroesse des umgebenden Textes. */
.post-content .awb-zugang {
	max-width: 760px;
	margin: 26px 0 0;
	padding: 18px 20px;
}

.post-content .awb-zugang__titel { font-size: 17px !important; }

.post-content .awb-zugang__text,
.post-content .awb-zugang__tel { font-size: 16px; }

/* ------------------------------------------------------------------ *
 * KONTAKTSEITE (/kontakt/)
 *
 * Bewusst ohne Formular (Regel 46) — die Seite zeigt die Wege, die es
 * ohnehin gibt. Die Rufnummer steht gross, weil sie bei einer Praxis
 * der Hauptkanal ist; alles andere ordnet sich darunter.
 * ------------------------------------------------------------------ */
/* :not() schliesst den Zugangskasten aus — der bringt seine eigene
   Ueberschrift mit (Regel 73) und stuende sonst in Gold und Versalien da,
   also wie eine Rubrik der Seite statt wie ein Hinweis darin. */
.awb-kontakt h3:not(.awb-zugang__titel) {
	margin: 34px 0 10px !important;
	font-size: 15px !important;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #8a6f38 !important;
}

.awb-kontakt h3:not(.awb-zugang__titel):first-child { margin-top: 0 !important; }

.awb-kontakt__ruf { margin: 0; }

.awb-kontakt__ruf a {
	display: inline-block;
	padding: 14px 26px;
	border-radius: 999px;
	background: #2fb4cc;
	color: #fff !important;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: .01em;
	text-decoration: none;
	border-bottom: 0;
}

.awb-kontakt__ruf a:hover,
.awb-kontakt__ruf a:focus-visible { background: #1b3a44; }

.awb-kontakt__zeile { margin: 0; line-height: 1.6; }

/* Die E-Mail-Adresse ist 30 Zeichen lang — auf 375 px passt sie in keine
   Zeile und schoebe sonst die ganze Seite in die Breite. */
.awb-kontakt__zeile a { overflow-wrap: anywhere; }

/* Kleingedrucktes unter einer Angabe — erklaert, nicht warnt. */
.awb-kontakt__notiz {
	margin: 8px 0 0;
	max-width: 620px;
	font-size: 14.5px;
	line-height: 1.55;
	color: #5d6f76;
}

/* Der Zugangshinweis steht hier schon in einer schmalen Spalte. */
.awb-kontakt .awb-zugang { margin-top: 18px; }

/* ------------------------------------------------------------------ *
 * BEREICHSFARBE: NEUROLOGIE TÜRKIS (Regel 81)
 *
 * Die Praxis hat zwei gleichberechtigte Hälften, und die Startseite
 * zeigt sie so: Neurologie türkis links, ästhetische Medizin gold
 * rechts (Vorgabe der Betreiberin, Telefonat 13.08.2026). Eine
 * neurologische Unterseite in Gold bricht diese Zuordnung — der
 * Besucher hat gerade auf „Neurologie" geklickt und landet in der
 * Farbe des anderen Bereichs.
 *
 * Die Klasse `ist-neurologie` steht am <body> (site.config.json →
 * bereich_neurologie) und stellt hier alles um, was sonst gold ist.
 * Ästhetische Seiten bleiben unberührt.
 * ------------------------------------------------------------------ */

/* Hero: Kicker und die Linie darunter */
.ist-neurologie .awb-hero__kicker { color: #2fb4cc !important; }

.ist-neurologie .awb-hero--linie .fusion-title::after,
.ist-neurologie .awb-hero--linie .fusion-title-center::after {
	background: #2fb4cc;
}

/* Die goldene Trennlinie über dem Beratungsknopf und zwischen Blöcken */
.ist-neurologie .post-content .fusion-separator .fusion-separator-border,
.ist-neurologie .post-content hr.awb-trenner {
	border-color: #2fb4cc !important;
}

/* Kästen aus dem Baukasten: Linksrand und Symbolkreis */
.ist-neurologie .awb-karte,
.ist-neurologie .awb-zugang {
	border-left-color: #2fb4cc;
}

.ist-neurologie .awb-zugang__titel { color: #1b3a44 !important; }

.ist-neurologie .awb-zugang__tel a {
	color: #1b7f92;
	border-bottom-color: rgba(27, 127, 146, .35);
}

.ist-neurologie .awb-zugang__tel a:hover,
.ist-neurologie .awb-zugang__tel a:focus-visible { border-bottom-color: #1b7f92; }

/* Kicker-Überschriften (goldene Versalien) */
.ist-neurologie .awb-kontakt h3:not(.awb-zugang__titel),
.ist-neurologie .post-content .awb-kicker { color: #1b7f92 !important; }

/* Der Zugangskasten stand direkt auf der folgenden Trennlinie —
   im Fließtext braucht er unten denselben Abstand wie oben. */
.post-content .awb-zugang { margin-bottom: 26px; }

/* ------------------------------------------------------------------ *
 * SEGMENTKARTEN (Vita „Allgemeines", Regel 82)
 *
 * Der Abschnitt war eine Textwand von rund 3.700 Zeichen mit fünf
 * Zwischenüberschriften. Jetzt fünf Karten: Überschrift, ein sichtbarer
 * Absatz, der Rest hinter „mehr lesen" (dasselbe Skript wie auf den
 * Behandlungsseiten, Regel 29).
 *
 * Gesetzt als Mehrspalter (`columns`), NICHT als Raster — genau wie die
 * Themenkarten (Regel 40): Die Karten sind sehr unterschiedlich lang,
 * im Raster stünde unter jeder kurzen eine Lücke. `break-inside` hält
 * eine Karte zusammen, sonst reißt sie über die Spaltengrenze.
 * ------------------------------------------------------------------ */
.awb-segmente {
	margin: 26px 0 0;
	columns: 2;
	column-gap: 26px;
}

.awb-segment {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	display: inline-block;   /* Firefox bricht sonst trotz break-inside */
	width: 100%;
	margin: 0 0 26px;
	padding: 20px 22px;
	border: 1px solid #e7e0d2;
	border-left: 3px solid #c6a96c;
	border-radius: 10px;
	background: #fdfbf7;
}

.ist-neurologie .awb-segment {
	border-left-color: #2fb4cc;
	background: #f7fbfc;
	border-color: #dceef2;
}

.awb-segment h4 {
	margin: 0 0 10px !important;
	font-size: 17px !important;
	line-height: 1.3 !important;
	color: #1b3a44 !important;
}

.awb-segment p {
	margin: 0 0 12px;
	font-size: 15.5px;
	line-height: 1.6;
}

.awb-segment p:last-child { margin-bottom: 0; }

/* Der „mehr lesen"-Knopf sitzt in der Karte, nicht über die volle Breite. */
.awb-segment .awb-mehr-lesen__knopf { margin-top: 4px; }

/* Auf dem Telefon untereinander — zwei Spalten wären dort je 160 px breit. */
@media (max-width: 1000px) {
	.awb-segmente { columns: 1; }
}

/* Hero-Titel im neurologischen Bereich.
   Avadas eigene Regel lautet `.fusion-body #wrapper .fusion-title h1` und
   schlaegt mit ihrer ID jeden klassenbasierten Selektor — deshalb steht
   `#wrapper` auch hier (dieselbe Falle wie in Regel 50 und 71).
   Auf einem Foto ist Weiss die einzige Farbe mit sicherem Kontrast; den
   dunklen Verlauf darunter bringt Regel 71 mit. Ohne Bild bleibt der Titel
   dunkel — dort traegt `.awb-hero` die eigene Farbgebung. */
.fusion-body.ist-neurologie #wrapper .fusion-page-title-bar
	.fusion-title:not(.awb-hero__titel) h1,
.fusion-body.ist-neurologie #wrapper .fusion-page-title-bar
	.fusion-title p.fusion-title-heading {
	color: #1b3a44 !important;
}

/* Die Hero-Motive dieses Bereichs sind hell und lassen links bewusst Fläche
   für den Titel. Weiss war dort unlesbar, dunkel ist es nicht — dazu ein
   heller Schleier, der genau diese linke Hälfte aufhellt, statt wie bei den
   Bildmotiven der Ästhetik (Regel 71) abzudunkeln. */
.ist-neurologie .fusion-page-title-bar
	.fusion-fullwidth[style*="background-image"]::before {
	background: linear-gradient(90deg,
		rgba(255, 255, 255, .82) 0%,
		rgba(255, 255, 255, .55) 38%,
		rgba(255, 255, 255, 0) 62%);
}

.ist-neurologie .fusion-page-title-bar.awb-hero
	.fusion-title h1,
.ist-neurologie .fusion-page-title-bar.awb-hero
	.fusion-title p.fusion-title-heading {
	color: #1b3a44 !important;   /* Hero ohne Bild: dunkel auf hell */
}

/* Sprungziele der Neurologie-Listen unter der Kopfzeile absetzen.
   Bis 27.08.2026 hat das JavaScript nachkorrigiert: Der Browser sprang zuerst
   an den oberen Rand, danach schob das Skript um 110 px — sichtbar als
   Stocken und zweiter Sprung. `scroll-margin-top` erledigt das nativ, ohne
   zweiten Schritt und auch dann, wenn kein JavaScript läuft. */
[data-umschalter],
.awb-umschalt-liste {
	scroll-margin-top: 110px;
}

/* ------------------------------------------------------------------
   RUSSISCHE FASSUNG (Regel 88)
   ------------------------------------------------------------------
   Avada schreibt die Hero-Schriftgroesse fest ins Markup — berechnet fuer
   kurze deutsche Titel. Die russischen Entsprechungen sind regelmaessig
   ein Drittel laenger („Коррекция морщин гиалуроновой кислотой в Мюнстере"
   gegen „Hyaluron Unterspritzung") und liefen dadurch aus der Leiste heraus.
   Deshalb waechst der Titel hier mit der Fensterbreite statt fest zu stehen.

   ACHTUNG, anders als in den Regeln 50, 71 und 81: hier darf `#wrapper`
   NICHT im Selektor stehen. Die `fusion-page-title-bar` liegt ausserhalb
   davon — zwischen Header und `main` (Regel 7) — und der Selektor traf
   nichts. `html[lang="ru"]` haelt den Eingriff auf der russischen Fassung,
   die deutschen Seiten bleiben unveraendert.                                 */
html[lang="ru"] body .fusion-page-title-bar .fusion-title h1.fusion-title-heading,
html[lang="ru"] body .fusion-page-title-bar .fusion-title p.fusion-title-heading {
	font-size: clamp(1.5rem, 3.6vw, 2.9rem) !important;
	line-height: 1.18 !important;
	overflow-wrap: break-word;
	hyphens: auto;
}

/* Der Kurztitel ueber der goldenen Linie folgt derselben Logik. */
html[lang="ru"] body .post-content h2.awb-kurztitel,
html[lang="ru"] body .post-content .fusion-title-size-two {
	overflow-wrap: break-word;
	hyphens: auto;
}

/* ------------------------------------------------------------------
   FUSSBEREICH: ueberall derselbe weisse Grund (Regel 90)
   ------------------------------------------------------------------
   Avada legt den Footer je nach Seite INNERHALB oder AUSSERHALB des
   `.fusion-wrapper` ab — ein Unterschied aus dem WordPress-Bestand, keine
   Absicht. Der Wrapper ist weiss, der `body` dahinter grau (#e2e2e2).
   Auf den Seiten mit dem Footer ausserhalb (u. a. /leistungen/ und
   /botox-.../, samt ihren russischen Fassungen) stand der Fussbereich
   deshalb auf grauem Grund, auf allen anderen auf weissem.

   Statt das Markup von 51 Chrome-Dateien umzubauen, bekommt der Footer den
   Grund selbst. Die tuerkise Fussleiste und die dunkle Copyright-Zeile
   bringen ihren eigenen Hintergrund mit und bleiben unberuehrt.             */
.fusion-tb-footer.fusion-footer {
	background-color: #fff;
}

/* ------------------------------------------------------------------
   SPRACHSCHALTER als Kippschalter (Regel 88)
   ------------------------------------------------------------------
   Vorbild ist der Schalter aus iOS: der runde Knopf sitzt auf der Sprache,
   die gerade laeuft, auf der freien Flaeche steht die Sprache, zu der der
   Klick fuehrt. Ein blosses „RU" in der Leiste liesse offen, ob es den
   Zustand oder das Ziel meint.

   Er sitzt in der schmalen goldenen Kopfleiste, deshalb die Pille in
   halbtransparentem Weiss und der Knopf in Weiss mit braunem Text — auf
   Gold ist das der einzige Kontrast, der bei 11 px noch traegt.

   Ohne Flaggen: eine Flagge bezeichnet einen Staat, keine Sprache.        */
.awb-menu__li.awb-sprachschalter {
	display: flex;
	align-items: center;
}

.awb-sprachschalter .awb-sprachschalter__link {
	display: flex !important;
	align-items: center;
	padding: 0 0 0 14px !important;
}

.awb-sprachschalter__pille {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 2px;
	width: 62px;
	height: 24px;
	padding: 2px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .28);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18);
	transition: background .18s ease;
}

.awb-sprachschalter__knopf,
.awb-sprachschalter__ziel {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1;
}

/* Der Knopf ist die Kugel des Schalters — er zeigt die laufende Sprache. */
.awb-sprachschalter__knopf {
	height: 20px;
	border-radius: 999px;
	background: #fff;
	color: #8a6f38;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .28);
	transition: transform .18s ease;
}

/* Die freie Flaeche nennt das Ziel des Klicks. */
.awb-sprachschalter__ziel {
	color: #fff;
	opacity: .9;
}

.awb-sprachschalter__link:hover .awb-sprachschalter__pille,
.awb-sprachschalter__link:focus-visible .awb-sprachschalter__pille {
	background: rgba(255, 255, 255, .42);
}

.awb-sprachschalter__link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
	border-radius: 999px;
}

/* Sichtbare Rueckmeldung, dass der Schalter kippt: beim Ueberfahren wandert
   die Kugel ein Stueck in die Richtung, in die der Klick fuehrt. */
.awb-sprachschalter__pille[data-aktuell="de"] .awb-sprachschalter__link:hover &,
.awb-sprachschalter__link:hover .awb-sprachschalter__pille[data-aktuell="de"] .awb-sprachschalter__knopf {
	transform: translateX(3px);
}
.awb-sprachschalter__link:hover .awb-sprachschalter__pille[data-aktuell="ru"] .awb-sprachschalter__knopf {
	transform: translateX(-3px);
}

@media (prefers-reduced-motion: reduce) {
	.awb-sprachschalter__knopf,
	.awb-sprachschalter__pille { transition: none; }
	.awb-sprachschalter__link:hover .awb-sprachschalter__knopf { transform: none; }
}

/* Im mobilen Menue-Overlay steht der Schalter mit den uebrigen Punkten in
   einer Spalte — dort braucht er die Einrueckung der Leiste nicht. */
.awb-mobilmenu .awb-sprachschalter .awb-sprachschalter__link {
	padding-left: 0 !important;
}

/* ------------------------------------------------------------------
   KYRILLISCHE SCHRIFTSCHNITTE (Regel 93)
   ------------------------------------------------------------------
   Poppins und Lato liegen nur mit lateinischem Subset vor (gemessen:
   `unicode-range: U+0-FF …`). Auf den russischen Seiten fiel deshalb JEDES
   kyrillische Zeichen auf die System-Serife zurück — im Menü sichtbar als
   Times-artige Schrift mitten im Markenbild.

   Statt neue Selektoren zu schreiben, bekommen die **vorhandenen
   Familiennamen** je einen zusaetzlichen `@font-face` mit kyrillischem
   `unicode-range`. Der Browser waehlt die Datei dann pro ZEICHEN: Latein
   weiter aus Poppins/Lato, Kyrillisch aus der Ergaenzung. Das wirkt
   ueberall, ohne dass eine einzige Regel angefasst werden muss — auch dort,
   wo ein russisches Wort auf einer deutschen Seite steht (etwa im
   `title` des Sprachschalters).

   Gewaehlt nach Messung, nicht nach Gefuehl (27.08.2026, „ЭСТЕТИЧЕСКАЯ
   МЕДИЦИНА" bei 40 px):
     - **Jost** fuer Poppins — beide geometrisch/Futura-nah, 555 px und damit
       die schmalste Variante (Montserrat 604 px). Breite zaehlt hier, weil
       der russische Menuetext ohnehin rund 30 % laenger ist als der deutsche.
     - **Golos Text** fuer Lato — humanistische Grotesk, fuer Kyrillisch
       entworfen; Montserrat waere im Fliesstext zu geometrisch.
   Beide OFL-lizenziert und lokal abgelegt (kein Google-CDN, Regel 9).      */

@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/assets/fonts/jost-400-basis.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("/assets/fonts/jost-500-basis.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/assets/fonts/jost-700-basis.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "Lato";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/assets/fonts/golos-400-basis.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: "Lato";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/assets/fonts/golos-700-basis.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Kirchenslawisch/erweitertes Kyrillisch — selten, aber sonst faellt genau
   dieses eine Zeichen wieder auf die Serife zurueck. */
@font-face {
	font-family: "Lato";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/assets/fonts/golos-400-ext.woff2") format("woff2");
	unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* ------------------------------------------------------------------
   KOPFZEILE AUF RUSSISCH: mehr Platz fuers Menue (Regel 93)
   ------------------------------------------------------------------
   Gemessen bei 1600 px: die sechs Menuepunkte brauchen auf Russisch 700 px
   plus 6 x 30 px Abstand = 880 px, die Menuespalte ist aber nur 790 px breit
   (Avada teilt die Kopfzeile 1/3 Logo zu 2/3 Menue). Ergebnis war ein Umbruch
   in zwei Zeilen, sobald man auf Russisch schaltete — der deutsche Text
   passt mit 428 px muehelos.

   Statt die Schrift zu verkleinern, ruecken Menue und Logo zusammen: das
   Logo braucht 240 px, bekommt aber 395 px. Die Spalten werden ueber
   `:has()` gefunden, nicht ueber Avadas Zaehlklassen — die heissen je Seite
   anders (Regel 16).                                                       */
@media (min-width: 1000px) {
	/* Angesetzt wird an Avadas eigener Variable, nicht an `width` — die
	   Spaltenbreite rechnet Avada daraus, und so bleibt das Verhalten bei
	   Zwischenbreiten erhalten.

	   Getroffen wird ausschliesslich die Reihe MIT dem Hauptmenue: sie ist
	   die einzige mit mindestens fuenf Punkten. Ohne diese Bedingung schrumpfte
	   auch die schmale Leiste darueber (Rufnummer | Datenschutz …), die
	   ebenfalls ein `awb-menu` enthaelt. Der Container heisst
	   `.fusion-tb-header`, nicht `.fusion-header`.                          */
	html[lang="ru"] .fusion-tb-header
		.fusion-layout-column:has(.awb-menu__main-ul > li:nth-child(5)) {
		/* `!important` ist noetig, weil Avada die Variable INLINE am Element
		   setzt — ohne das gewinnt der Inline-Wert. */
		--awb-width-large: 75% !important;
	}
	html[lang="ru"] .fusion-tb-header
		.fusion-layout-column:has(+ .fusion-layout-column .awb-menu__main-ul > li:nth-child(5)) {
		--awb-width-large: 25% !important;
	}
	/* 15 px je Seite waren fuer den laengeren Text zu grosszuegig; 11 px
	   halten die Punkte klar getrennt und sparen 48 px auf die Reihe. */
	html[lang="ru"] .fusion-tb-header .awb-menu__main-li {
		margin-left: 11px !important;
		margin-right: 11px !important;
	}
}

/* ==========================================================================
   PRIVATSPRECHSTUNDE + TERMIN-KNOPF (Neurologie)
   --------------------------------------------------------------------------
   Steht ganz vorne auf der Startseite und auf der Neurologie-Seite
   (Wunsch der Praxis, 28.08.2026: "muss deutlich und sofort gesehen
   werden"). Der Knopf oeffnet die vorhandene 321-MED-Rezeption, er ist
   KEIN zweiter Terminkanal — die Begruendung steht in assets/js/termin.js.

   Tuerkis statt Gold, weil der Block zur Neurologie gehoert (Regel 81).
   Auf der Startseite steht er im Neurologie-Abschnitt, dort traegt der
   <body> aber die Aesthetik-Farbe — deshalb faerbt die eigene Klasse und
   nicht `.ist-neurologie`.
   ========================================================================== */

.awb-privat {
	margin: 0 0 26px;
	padding: 20px 24px;
	border: 1px solid #e3ddd0;
	border-left: 3px solid #2fb4cc;
	border-radius: 6px;
	background: #f7fcfd;
}

.awb-privat__satz {
	margin: 0 0 16px;
	font-size: 17px;
	line-height: 1.55;
	color: #1b3a44;
}

.awb-privat__satz strong { font-weight: 700; }

/* Der Knopf ist im Markup ein tel:-Link und wird erst durch termin.js zum
   Oeffner der Rezeption — ohne JavaScript bleibt er also brauchbar. */
.awb-termin__knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 13px 24px;
	border-radius: 999px;
	background: #2fb4cc;
	color: #fff !important;
	font-weight: 700;
	font-size: 16px;
	letter-spacing: .02em;
	text-decoration: none !important;
	border: 0;
	cursor: pointer;
	transition: background .18s ease, transform .18s ease;
}

.awb-termin__knopf svg { width: 19px; height: 19px; flex: none; }

/* Im Fussbereich steht derselbe Einstieg in einer Zeile mit Anschrift und
   Rufnummer (seit 01.09.2026 anstelle der E-Mail-Adresse). Ein Pillenknopf
   zwischen zwei Textzeilen wuerde die Liste sprengen — hier bleibt es Text,
   der sich beim Ueberfahren als anklickbar zu erkennen gibt. Die Klasse
   `awb-termin__knopf` traegt er trotzdem: daran haengt `termin.js`, das die
   321-MED-Rezeption oeffnet (Regel 94), und ohne JavaScript bleibt der
   `tel:`-Link brauchbar. */
.awb-termin__knopf--zeile {
	display: inline;
	padding: 0;
	border-radius: 0;
	background: none;
	color: inherit !important;
	font: inherit;
	letter-spacing: inherit;
	text-decoration: none !important;
}

.awb-termin__knopf--zeile:hover,
.awb-termin__knopf--zeile:focus-visible {
	background: none;
	transform: none;
	color: inherit !important;
	text-decoration: underline !important;
}

.awb-termin__knopf:hover,
.awb-termin__knopf:focus-visible {
	background: #1b8ea3;
	transform: translateY(-1px);
	color: #fff !important;
}

/* Die globale Regel .post-content a::after setzt sonst ein Pfeilzeichen
   hinter den Knopftext — dieselbe Falle wie bei den Themenkarten (Regel 40). */
.post-content .awb-termin__knopf::after,
.post-content .awb-termin__knopf::before { content: none; }

.awb-termin__hinweis {
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: #5d6f76;
}

@media (prefers-reduced-motion: reduce) {
	.awb-termin__knopf { transition: none; }
	.awb-termin__knopf:hover { transform: none; }
}

/* Auf dem Telefon bricht "Termin über die Online-Rezeption" in zwei Zeilen.
   Statt den Text zu kuerzen — er sagt genau, wohin der Knopf fuehrt — nimmt
   der Knopf dort die volle Breite und setzt Symbol und Beschriftung mittig.
   Zweizeilig wirkt dann gewollt und nicht wie ein Umbruchunfall. */
@media (max-width: 600px) {
	.awb-privat { padding: 18px; }

	.awb-termin__knopf {
		display: flex;
		width: 100%;
		font-size: 15px;
		padding: 14px 16px;
		text-align: center;
	}

	/* Symbol weg: neben zwei Textzeilen sitzt es links und der Knopf wirkt
	   schief. Es traegt keine Information, die der Text nicht schon gibt. */
	.awb-termin__knopf svg { display: none; }
}