/*
Theme Name: AlenMed
Theme URI: https://www.alenmed-germany.ru/
Author: AlenMed
Description: Blockthema fuer AlenMed - Organisation von Diagnostik und Behandlung in Deutschland. Dreisprachig, mit Rechts-nach-links-Satz fuer Arabisch.
Version: 0.1.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: alenmed
Tags: block-templates, full-site-editing, rtl-language-support, translation-ready
*/

/*
 * Die Gestaltung steht in theme.json. Hier steht nur, was sich dort nicht
 * ausdruecken laesst.
 */


/* --- Navigation -----------------------------------------------------------
 * Im Fliesstext ist eine Unterstreichung ein Hinweis: hier geht es weiter.
 * In einer Menuezeile ist sie nur Laerm, weil dort ohnehin alles ein Link
 * ist. Darum ohne Linie, dafuer mit deutlichem Wechsel beim Ueberfahren.
 */
.wp-block-navigation a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--tinte);
	text-decoration: none;
	padding-block: 0.35rem;
	border-bottom: 2px solid transparent;
}

.wp-block-navigation a:where(:not(.wp-element-button)):hover,
.wp-block-navigation a:where(:not(.wp-element-button)):focus-visible {
	color: var(--wp--preset--color--petrol);
	border-bottom-color: var(--wp--preset--color--petrol);
}

/* Der Punkt, auf dem der Leser gerade steht. */
.wp-block-navigation .current-menu-item > a {
	color: var(--wp--preset--color--petrol);
	border-bottom-color: var(--wp--preset--color--petrol);
}

/* Der Notfall-Eintrag traegt eine eigene Farbe - auch im ausgeklappten
 * Menue, wo der Navigationsblock sonst jede Farbe auf "inherit" zwingt.
 * Darum die Regel an die Adresse geknuepft und nicht an den Block. */
.wp-block-navigation a[href*="ekstrenno"].wp-block-navigation-item__content {
	color: var(--wp--preset--color--dringend);
}

.wp-block-navigation a[href*="ekstrenno"]:hover,
.wp-block-navigation a[href*="ekstrenno"]:focus-visible {
	color: var(--wp--preset--color--dringend);
	border-bottom-color: var(--wp--preset--color--dringend);
}

/* Ausgeklappt auf dem Telefon steht das Menue auf hellem Grund. */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--grund);
}


/* --- Links auf dunklem Grund ---------------------------------------------
 * Petrol auf Tinte ist nicht lesbar. Auf dunklen Flaechen erbt der Link die
 * Textfarbe und wird durch eine zurueckhaltende Linie kenntlich gemacht.
 */
.has-tinte-background-color a:where(:not(.wp-element-button)) {
	color: inherit;
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
	text-underline-offset: 0.2em;
}

.has-tinte-background-color a:where(:not(.wp-element-button)):hover {
	text-decoration-color: currentColor;
}


/* --- Listen ohne Aufzaehlungszeichen --------------------------------------
 * Fuer Linklisten im Fussbereich: dort ist die Reihe selbst schon die
 * Gliederung, ein Punkt davor traegt nichts bei.
 */
.wp-block-list.is-style-blank {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

body:where(.rtl) .wp-block-list.is-style-blank {
	padding-right: 0;
	margin-right: 0;
}


/* --- Tastaturbedienung ----------------------------------------------------
 * Wer die Seite mit der Tastatur bedient, muss sehen, wo er steht. Der
 * Standardrahmen des Browsers verschwindet auf hellem Grund zu leicht.
 */
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--petrol);
	outline-offset: 2px;
	border-radius: 2px;
}

.has-tinte-background-color :where(a, button, input, textarea):focus-visible {
	outline-color: var(--wp--preset--color--grund);
}


/* --- Ueberschriften -------------------------------------------------------
 * Keine automatische Trennung: die Seite ist als russisch ausgezeichnet,
 * und der Browser trennte lateinische Namen nach russischen Regeln
 * ("Kinderwunsc-h Centrum"). Die wenigen russischen Woerter, die in eine
 * Ueberschrift oder Karte nicht passen, tragen weiche Trennstellen -
 * die Liste steht in inc/satz.php und wird beim Ausgeben eingesetzt.
 */
h1, h2, h3 {
	text-wrap: balance;
	hyphens: manual;
}

p {
	text-wrap: pretty;
}


/* --- Wortumbruch in Ueberschriften ----------------------------------------
 * WordPress setzt word-break: break-word. Damit wird ein langes russisches
 * Wort mitten im Wort abgeschnitten, ohne Trennstrich - der Leser stolpert.
 * Normale Trennung nach den Regeln der Sprache genuegt; passt ein Wort
 * wirklich nicht, darf es lieber ueberstehen als falsch getrennt werden.
 */
:where(h1, h2, h3, h4, h5, h6) {
	word-break: normal;
	overflow-wrap: break-word;
}


/* --- Gedaempfte Schrift auf dunklem Grund ---------------------------------
 * "Gedaempft" ist fuer helle Flaechen gemischt. Auf Tinte bleibt davon ein
 * Grau uebrig, das man bei Tageslicht auf dem Telefon nicht mehr liest -
 * gemessen etwa 2,7:1, verlangt sind 4,5:1. Darum dort eine eigene Mischung.
 */
.has-tinte-background-color .has-gedaempft-color {
	color: color-mix(in srgb, var(--wp--preset--color--grund) 68%, var(--wp--preset--color--tinte));
}


/* --- Kopf auf dem Telefon -------------------------------------------------
 * Oben stehen Name, Sprechzeiten, Schaltflaeche und Menue untereinander -
 * das schiebt den eigentlichen Anfang der Seite aus dem Bild. Auf schmalen
 * Geraeten treten die Sprechzeiten zurueck; sie stehen ohnehin im Fuss.
 * Der Menueknopf rueckt an den rechten Rand, wo der Daumen ihn erreicht.
 */
@media (max-width: 599px) {
	.alenmed-sprechzeiten {
		display: none;
	}

	/* Der Menueknopf steht in der Namenszeile rechts oben, nicht in einer
	 * eigenen Zeile darunter. Die Zeile der Leiste war auf dem Telefon
	 * bis auf diesen einen Knopf leer und kostete samt Strich gut 60
	 * Punkte des ersten Bildschirms. Der Kopf ist position: relative
	 * (siehe unten, wegen der Sprachwahl), der Knopf richtet sich an ihm
	 * aus. */
	.wp-site-blocks > header .wp-block-navigation__responsive-container-open {
		position: absolute;
		top: 1.05rem;
		right: var(--wp--style--root--padding-right, 1.25rem);
		margin: 0;
	}

	.wp-site-blocks > header .wp-block-group:has(> .wp-block-navigation) {
		border-top-width: 0 !important;
		/* Der Blockabstand (28 Punkte) stuende sonst als leerer Streifen
		 * ueber einer Zeile, die keine Hoehe mehr hat. */
		margin-top: 0 !important;
	}

	.wp-site-blocks > header .wp-block-navigation {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		/* Der Kern setzt die Leiste position: relative (fuer Untermenues).
		 * Dann waere sie der Bezug des Knopfs, und der saesse wieder in
		 * seiner leeren Zeile. Der Bezug soll der Kopf sein. */
		position: static;
	}
}


/* --- Anfrageformular ------------------------------------------------------
 * Steht auf dunklem Grund. Die Felder selbst sind hell: ein Eingabefeld muss
 * aussehen wie Papier, auf dem man schreibt, sonst zoegert der Besucher.
 */
.alenmed-formular {
	background: var(--wp--preset--color--grund);
	border-radius: 4px;
	padding: clamp(1.4rem, 3vw, 2.2rem);
	color: var(--wp--preset--color--tinte);
}

.alenmed-feld {
	margin: 0 0 1.1rem;
}

.alenmed-feld > label,
.alenmed-feld legend {
	display: block;
	margin-bottom: 0.35rem;
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 500;
	color: var(--wp--preset--color--tinte);
}

.alenmed-feld input[type="text"],
.alenmed-feld input[type="tel"],
.alenmed-feld input[type="email"],
.alenmed-feld input[type="file"],
.alenmed-feld textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.7rem 0.85rem;
	font: inherit;
	font-size: var(--wp--preset--font-size--text);
	color: var(--wp--preset--color--tinte);
	background: var(--wp--preset--color--grund);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 3px;
}

.alenmed-feld textarea {
	resize: vertical;
	line-height: 1.5;
}

.alenmed-feld input:focus,
.alenmed-feld textarea:focus {
	border-color: var(--wp--preset--color--petrol);
}

/* Die Wahl des Kanals steht in einer Zeile, solange Platz ist. Fuer viele
 * Patienten ist WhatsApp der einzige Weg, auf dem sie erreichbar sind. */
.alenmed-feld--wahl {
	border: 0;
	padding: 0;
	margin-bottom: 1.1rem;
}

.alenmed-feld--wahl label {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-right: 1rem;
	font-size: var(--wp--preset--font-size--klein);
	white-space: nowrap;
}

.alenmed-feld--zustimmung label {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 400;
	line-height: 1.5;
	color: var(--wp--preset--color--gedaempft);
}

.alenmed-feld--zustimmung input {
	margin-top: 0.2rem;
	flex: 0 0 auto;
}

.alenmed-hinweis {
	display: block;
	margin-top: 0.35rem;
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--gedaempft);
}

.alenmed-knopf {
	width: 100%;
	padding: 0.95rem 1.5rem;
	font: inherit;
	font-weight: 600;
	color: var(--wp--preset--color--grund);
	background: var(--wp--preset--color--petrol);
	border: 0;
	border-radius: 3px;
	cursor: pointer;
}

.alenmed-knopf:hover {
	background: var(--wp--preset--color--petrol-tief);
}

/* Die Falle gegen Maschinen. Nicht display:none - manche Roboter erkennen
 * das und lassen das Feld dann leer. */
.alenmed-formular__falle {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Rueckmeldung nach dem Absenden. */
.alenmed-meldung {
	margin: 0 0 1rem;
	padding: 0.9rem 1.1rem;
	border-radius: 3px;
	border-left: 3px solid;
	font-size: var(--wp--preset--font-size--klein);
	background: var(--wp--preset--color--grund);
	color: var(--wp--preset--color--tinte);
}

.alenmed-meldung--gut {
	border-left-color: var(--wp--preset--color--bestaetigt);
}

.alenmed-meldung--schlecht {
	border-left-color: var(--wp--preset--color--dringend);
}


/* --- Zeichen ---------------------------------------------------------------
 * Alle Zeichen liegen als SVG im Thema (assets/icons) - ein Zeichensatz von
 * aussen wuerde fuer sechs Bilder eine ganze Schrift laden.
 */

/* Haekchen vor den Zusagen des ersten Bildschirms, wie im Entwurf. */
.alenmed-punkte {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

.alenmed-punkte li {
	background: url("assets/icons/check.svg") no-repeat 0 0.25em;
	background-size: 1.05em;
	padding-left: 1.7em;
}

/* Zeichen neben den Ueberschriften der Ankunfts-Punkte. */
img.alenmed-symbol {
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	display: block;
}

/* Boten-Zeichen in den Kontaktzeilen; currentColor - sie stehen auf
 * dunklem Grund und uebernehmen die Textfarbe. */
svg.alenmed-kontakt-symbol {
	width: 1.15em;
	height: 1.15em;
	vertical-align: -0.2em;
	margin-right: 0.4em;
	display: inline-block;
}


/* --- Fotografien -----------------------------------------------------------
 * Echte Aufnahmen aus der Muenchner Strahlentherapie. Die Unterschrift sagt,
 * wo das Bild entstanden ist - ein benanntes Foto wirkt als Beleg, ein
 * unbenanntes als Dekoration.
 */
.alenmed-foto {
	margin: 0;
}

.alenmed-foto img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
}

.alenmed-foto figcaption {
	margin-top: 0.5rem;
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--gedaempft);
}

/* Nie ueber die Aufnahmebreite hinaus vergroessern - hochgerechnete Fotos
 * wirken weich. Doppelte Klasse im Selektor, weil die Layout-Regeln von
 * WordPress fuer .alignwide sonst ueberstimmen. */
figure.alenmed-foto--breit.alignwide {
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}


/* Grosses Zeichen mittig in der Karte, zwischen Nummer und Ueberschrift. */
.alenmed-symbolzeile {
	display: flex;
	justify-content: center;
	margin: 0.25rem 0 0.5rem;
}

img.alenmed-symbol--gross {
	width: 48px;
	height: 48px;
}


/* --- Schritt-Karten --------------------------------------------------------
 * Die Beschreibungen sind unterschiedlich lang. Der Beschreibungsabsatz
 * wird an den unteren Rand der Karte gedrueckt, damit die letzte Textzeile
 * in allen drei Karten auf einer Hoehe endet.
 */
.alenmed-schritte > .wp-block-column {
	display: flex;
	flex-direction: column;
}

.alenmed-schritte > .wp-block-column > p:last-child {
	margin-top: auto;
	/* margin-top:auto frisst den normalen Absatzabstand - in der laengsten
	 * Karte klebte der Text an der Ueberschrift. */
	padding-top: 1rem;
}


/* Die Schrittnummer im Kreis. */
.alenmed-nummer {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.1em;
	height: 2.1em;
	border: 2px solid var(--wp--preset--color--petrol);
	border-radius: 50%;
	line-height: 1;
}


/* --- Rechts-nach-links (arabischer Strang) --------------------------------
 * Die Richtung dreht Flex- und Rasterreihen von selbst; hier stehen nur die
 * Stellen, an denen physische Eigenschaften (left/right) im Weg sind, und
 * die arabische Schrift mit groesserer Zeilenhoehe - lateinische Metriken
 * lassen arabischen Text zusammenkleben.
 */
.alenmed-rtl {
	direction: rtl;
	text-align: right;
	font-family: 'Noto Naskh Arabic', 'Onest', system-ui, sans-serif;
}

.alenmed-rtl :is(h1, h2, h3) {
	font-family: 'Noto Naskh Arabic', 'Literata', Georgia, serif;
	line-height: 1.55;
	letter-spacing: 0;
}

.alenmed-rtl :is(p, li) {
	line-height: 1.95;
}

.alenmed-rtl .alenmed-punkte li {
	padding-left: 0;
	padding-right: 1.7em;
	background-position: right 0.35em;
}

.alenmed-rtl svg.alenmed-kontakt-symbol {
	margin-right: 0;
	margin-left: 0.4em;
}

.alenmed-rtl .alenmed-feld--wahl label {
	margin-right: 0;
	margin-left: 1rem;
}

.alenmed-rtl .alenmed-meldung {
	border-left: 0;
	border-right: 3px solid;
}

.alenmed-rtl .alenmed-meldung--gut {
	border-right-color: var(--wp--preset--color--bestaetigt);
}

.alenmed-rtl .alenmed-meldung--schlecht {
	border-right-color: var(--wp--preset--color--dringend);
}


/* --- Sprachwahl im Kopf ----------------------------------------------------
 * Wie beim Vorbild: aktuelle Sprache als Flagge mit Kuerzel, beim Klick
 * klappt eine dunkle Liste mit den vollen Sprachnamen auf. <details>
 * braucht kein Skript und funktioniert auch rechts nach links.
 */
.alenmed-sprachwahl {
	position: relative;
	font-size: var(--wp--preset--font-size--klein);
}

.alenmed-sprachwahl summary {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	cursor: pointer;
	list-style: none;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--tinte);
	padding: 0.3rem 0.4rem;
	border-radius: 3px;
}

.alenmed-sprachwahl summary::-webkit-details-marker {
	display: none;
}

.alenmed-sprachwahl summary img {
	display: block;
	border-radius: 2px;
	box-shadow: 0 0 0 1px var(--wp--preset--color--linie);
}

/* Der Pfeil. Dreht sich, wenn die Liste offen ist. */
.alenmed-sprachwahl summary::after {
	content: "";
	width: 0.45em;
	height: 0.45em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-0.1em);
	transition: transform 0.15s;
}

.alenmed-sprachwahl[open] summary::after {
	transform: rotate(225deg) translateY(-0.1em);
}

.alenmed-sprachwahl ul {
	position: absolute;
	inset-inline-end: 0;
	top: calc(100% + 0.4rem);
	z-index: 50;
	margin: 0;
	padding: 0.4rem 0;
	list-style: none;
	min-width: 10rem;
	background: var(--wp--preset--color--tinte);
	border-radius: 3px;
	box-shadow: 0 8px 24px rgba(15, 38, 45, 0.25);
}

.alenmed-sprachwahl ul a {
	display: block;
	padding: 0.55rem 1.1rem;
	color: var(--wp--preset--color--grund);
	text-decoration: none;
	letter-spacing: 0.06em;
}

.alenmed-sprachwahl ul a:hover,
.alenmed-sprachwahl ul a:focus-visible {
	background: var(--wp--preset--color--petrol);
	color: var(--wp--preset--color--grund);
}

.alenmed-sprachwahl ul a[aria-current] {
	color: color-mix(in srgb, var(--wp--preset--color--grund) 55%, var(--wp--preset--color--tinte));
	pointer-events: none;
}




/* Der Kopf ueber dem Inhalt, sonst faengt der erste Abschnitt die Klicks
 * auf das aufgeklappte Sprachmenue ab (es liegt absolut, der Inhalt kommt
 * im Quelltext danach). */
.wp-site-blocks > header {
	position: relative;
	z-index: 20;
}


/* Karten-Raster der Rubrikseiten. Die ganze Karte ist die Schaltflaeche:
 * die Verweisung der Ueberschrift legt sich unsichtbar ueber die Karte,
 * damit auch ein Klick auf Zeichen oder Beschreibung traegt. Die
 * Auszeichnung bleibt dabei eine gewoehnliche Verweisung - Tastatur und
 * Vorleseprogramme finden weiterhin genau einen Eintrag pro Karte. */
.alenmed-karten > .wp-block-group {
	position: relative;
	cursor: pointer;
}

/* Auf den uebrigen Rubrikseiten stecken die Karten als Spalten eine
 * Ebene tiefer; getroffen wird die Kiste, die die Titelverweisung
 * traegt. Ohne :has bleibt es beim Klick auf die Ueberschrift. */
.alenmed-karten :is(.wp-block-group, .wp-block-column):has(> :is(h2, h3) > a) {
	position: relative;
	cursor: pointer;
}

.alenmed-karten :is(h2, h3) a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

/* Weitere Verweisungen in einer Karte bleiben ueber der Flaeche
 * anklickbar. */
.alenmed-karten :is(.wp-block-group, .wp-block-column) a:not(:is(h2, h3) a) {
	position: relative;
	z-index: 1;
}

.alenmed-karten .wp-block-group {
	transition: border-color 0.15s, box-shadow 0.15s;
}

.alenmed-karten .wp-block-group:hover {
	border-color: var(--wp--preset--color--petrol);
	box-shadow: 0 6px 20px rgba(15, 38, 45, 0.08);
}

.alenmed-karten :is(h2, h3) a {
	text-decoration: none;
	color: var(--wp--preset--color--tinte);
}

.alenmed-karten :is(.wp-block-group, .wp-block-column):hover :is(h2, h3) a {
	color: var(--wp--preset--color--petrol);
}

/* Karten-Spalten reagieren wie die Gruppen-Karten. */
.alenmed-karten .wp-block-column {
	transition: border-color 0.15s, box-shadow 0.15s;
	/* Eine Spalte darf schmaler werden als ihr laengstes Wort; das Wort
	 * traegt seine Trennstellen (inc/satz.php). */
	min-width: 0;
}

/* Die letzte Reihe fuellt huebs.php mit leeren Spalten auf. Der Kern gibt
 * jeder Spalte flex-basis: 0 und verteilt den Rest gleichmaessig - auf den
 * INHALT. Die Karte bringt Innenabstand und Rand mit, die leere Spalte
 * nicht: die einzelne Karte der letzten Reihe war darum 255 Punkte breit,
 * die Karten darueber 216. Die leeren Spalten bekommen denselben Abstand
 * und Rand, unsichtbar, und die Rechnung geht wieder auf. */
.alenmed-karten .wp-block-column:empty {
	padding: var(--wp--preset--spacing--30);
	border: 1px solid transparent;
}

.alenmed-karten .wp-block-column:hover {
	border-color: var(--wp--preset--color--petrol);
	box-shadow: 0 6px 20px rgba(15, 38, 45, 0.08);
}


/* In den Karten keine Silbentrennung - kurze Beschriftungen sollen ganz
 * stehen, nicht mit Trennstrich zerbrochen werden. */
.alenmed-karten :is(h2, h3) {
	/* Keine automatische Trennung. Die Seite ist als russisch
	 * ausgezeichnet, und der Browser trennt lateinische Namen nach
	 * russischen Regeln - aus "Kinderwunsch Centrum" wurde
	 * "Kinderwunsc-h Centrum". Die russischen Fachwoerter passen auch
	 * ungetrennt; wird eines doch zu lang, bricht es umbruchweise statt
	 * mit falschem Trennstrich. */
	hyphens: manual;
	overflow-wrap: break-word;
	text-wrap: balance;
}

/* Namen werden nicht getrennt - "Вольф-ганг" liest sich wie ein Fehler.
 * Lieber bricht die Zeile zwischen den Woertern. */
.alenmed-karten .alenmed-kartenportraet + h3,
.alenmed-arztbild + * h1 {
	hyphens: manual;
}


/* --- Klinikfotos -----------------------------------------------------------
 * Die Aufnahmen des alten Auftritts sind verschieden gross. Sie werden
 * nicht hochgerechnet - ein gestrecktes Foto wirkt weich und billig;
 * lieber steht ein kleines Bild kleiner da, dafuer scharf.
 */
.alenmed-klinikbild {
	margin: 0 0 var(--wp--preset--spacing--40);
}

/* Dasselbe Band wie am Kopf der Rubrikseiten. Vorher stand die
 * Klinikaufnahme in ihrer eigenen Hoehe da und fuellte den halben
 * Bildschirm - zwei Auftaktbilder derselben Art duerfen nicht
 * unterschiedlich hoch sein, sonst wirkt jede Seite anders gebaut. */
.alenmed-klinikbild img {
	display: block;
	width: 100%;
	height: clamp(11rem, 26vh, 17rem);
	object-fit: cover;
	object-position: center;
	border-radius: 4px;
}


/* Rubrikbild am Kopf der Seite - volle Spaltenbreite, feste Proportion. */
.alenmed-rubrikbild {
	margin: 0 0 var(--wp--preset--spacing--40);
}

/* Das Bild ist ein Auftakt, kein Plakat: bei 3:2 und voller Spaltenbreite
 * fuellte es den ganzen ersten Bildschirm und schob den Text darunter aus
 * dem Blick. Als Band ueber gut ein Drittel der Hoehe bleibt es Beiwerk.
 * object-fit schneidet dabei oben und unten ab statt zu stauchen. */
.alenmed-rubrikbild img {
	display: block;
	width: 100%;
	height: clamp(11rem, 26vh, 17rem);
	object-fit: cover;
	object-position: center;
	border-radius: 4px;
}


/* --- Arztportraets ---------------------------------------------------------
 * Die Aufnahmen des alten Auftritts sind nur 214x170 gross; groessere gibt
 * es nicht. Sie werden darum nie gestreckt - klein und scharf ist besser
 * als gross und weich.
 */
.alenmed-arztbild {
	/* Derselbe Abstand zum Text wie unter jedem anderen Auftaktbild
	 * (spacing-40); mit spacing-30 stand der Text auf den Arztseiten
	 * zwanzig Punkte hoeher als ueberall sonst. */
	margin: 0 0 var(--wp--preset--spacing--40);
}

.alenmed-arztbild img,
.alenmed-kartenportraet img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}

.alenmed-kartenportraet {
	margin: 0 0 var(--wp--preset--spacing--20);
}


/* --- Karten der Behandlungsrichtungen -------------------------------------
 * Das Zeichen steht mittig ueber dem Text - dann gehoert auch der Text in
 * die Mitte, sonst kippt die Karte optisch nach links.
 * Die Zeichen stammen aus Healthicons (MIT), auf die Themenfarbe umgefaerbt;
 * eigene Handzeichnungen waren fuer Formen wie Gehirn oder Darm zu grob.
 */
.alenmed-richtungen .alenmed-richtungskarte {
	text-align: center;
}

.alenmed-richtungen .alenmed-symbolzeile {
	margin: 0 0 var(--wp--preset--spacing--20);
}

img.alenmed-symbol--richtung {
	width: 72px;
	height: 72px;
	flex: 0 0 auto;
	display: block;
}


/* --- Schnellsuche der Rubrikseite -----------------------------------------
 * Der Besucher sucht nach seiner Krankheit, nicht nach der Fachrichtung.
 * Trifft die Suche, geht es mit der Eingabetaste sofort auf die Seite.
 */
/* Der Kopf ist mittig gesetzt wie die Karten darunter: Frage, Feld,
 * Erklaerung und Zwischentitel stehen auf einer Achse. Feld und Absatz
 * behalten eine lesbare Zeilenlaenge und stehen darum mit auto-Raendern
 * in der Mitte statt ueber die volle Breite. */
.alenmed-rubrikkopf {
	text-align: center;
}

.alenmed-rubrikkopf > p,
.alenmed-suche {
	max-width: 44rem;
	margin-left: auto;
	margin-right: auto;
}

.alenmed-suche {
	position: relative;
	margin-top: var(--wp--preset--spacing--30);
	text-align: left;
}

#alenmed-suchfeld,
#alenmed-suchfeld::placeholder {
	text-align: center;
}

/* Sichtbar nur fuer Vorleseprogramme: die Frage steht schon als
 * Ueberschrift darueber, zweimal dasselbe stoert. */
.alenmed-nur-vorlesen {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.alenmed-suche input {
	width: 100%;
	box-sizing: border-box;
	padding: 0.85rem 1rem;
	font: inherit;
	font-size: var(--wp--preset--font-size--text);
	color: var(--wp--preset--color--tinte);
	background: var(--wp--preset--color--grund);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 3px;
}

.alenmed-suche input:focus {
	border-color: var(--wp--preset--color--petrol);
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--petrol) 15%, transparent);
}

.alenmed-suche__liste {
	position: absolute;
	z-index: 30;
	left: 0;
	right: 0;
	margin: 0.3rem 0 0;
	padding: 0.3rem 0;
	list-style: none;
	background: var(--wp--preset--color--grund);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 3px;
	box-shadow: 0 10px 30px rgba(15, 38, 45, 0.12);
	max-height: 20rem;
	overflow-y: auto;
}

.alenmed-suche__liste li a {
	display: block;
	padding: 0.6rem 1rem;
	color: var(--wp--preset--color--tinte);
	text-decoration: none;
}

.alenmed-suche__liste li.ist-gewaehlt a,
.alenmed-suche__liste li a:hover {
	background: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--petrol);
}

.alenmed-suche__leer {
	margin: 0.5rem 0 0;
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--gedaempft);
}


/* --- Querverweise am Fuss einer Seite --------------------------------------
 * Ein ruhiger Kasten, abgesetzt durch eine Linie statt durch Farbe: er
 * gehoert zum Text, soll ihn aber nicht ueberstimmen. Die Liste laeuft in
 * Spalten, damit achtzehn kurze Namen nicht achtzehn Zeilen brauchen.
 */
.alenmed-querverweise {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--linie);
}

.alenmed-querverweise h2 {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--titel);
	font-size: var(--wp--preset--font-size--titel-klein);
}

.alenmed-querverweise ul {
	margin: 0;
	padding: 0;
	list-style: none;
	columns: 3 14rem;
	column-gap: var(--wp--preset--spacing--40);
}

.alenmed-querverweise li {
	break-inside: avoid;
	margin: 0 0 0.6rem;
	/* Groesse des Fliesstextes, nicht kleiner. Die Verweise SIND der
	 * Inhalt dieses Blocks; in Kleinschrift lesen sie sich wie eine
	 * Fussnote, und angeklickt wird, was man muehelos liest. */
	font-size: var(--wp--preset--font-size--text);
	line-height: 1.4;
}

/* Zeichen und Text stehen nebeneinander; bricht der Name um, laeuft er
 * unter sich weiter und nicht unter das Zeichen. */
.alenmed-querverweise a {
	display: flex;
	align-items: center;
	gap: 0.55rem;
}

img.alenmed-symbol--verweis {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	opacity: 0.75;
}

.alenmed-querverweise a:hover .alenmed-symbol--verweis,
.alenmed-querverweise a:focus-visible .alenmed-symbol--verweis {
	opacity: 1;
}

.alenmed-querverweise a {
	color: var(--wp--preset--color--petrol);
	text-decoration: none;
}

.alenmed-querverweise a:hover span,
.alenmed-querverweise a:focus-visible span {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.alenmed-querverweise__zurueck {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: var(--wp--preset--font-size--text);
}

.alenmed-querverweise--knapp {
	font-size: var(--wp--preset--font-size--text);
}

.alenmed-querverweise--knapp p {
	margin: 0;
	color: var(--wp--preset--color--gedaempft);
}


/* --- Zeichen auf den Karten der Rubrikseiten -------------------------------
 * Dieselbe Groesse wie im Raster der Behandlungsrichtungen. Die Karte ist
 * mittig gesetzt, das Zeichen steht darum ueber der Ueberschrift und nicht
 * daneben.
 */
.alenmed-karten .alenmed-symbolzeile {
	margin: 0 0 var(--wp--preset--spacing--20);
	text-align: center;
}

img.alenmed-symbol--karte {
	width: 72px;
	height: 72px;
}

.alenmed-karten .wp-block-column {
	text-align: center;
}


/* --- Klinikaufnahme auf der Karte ------------------------------------------
 * Die Aufnahmen der Haeuser sind gross und unterschiedlich hoch. Auf der
 * Karte bekommen sie ein gemeinsames Format, sonst steht jede Ueberschrift
 * auf einer anderen Hoehe und das Raster franst aus.
 */
.alenmed-kartenbild {
	margin: 0 0 var(--wp--preset--spacing--20);
}

.alenmed-kartenbild img {
	display: block;
	width: 100%;
	height: 9rem;
	object-fit: cover;
	object-position: center;
	border-radius: 3px;
}


/* Karten mit einer Aufnahme tragen einen Eigennamen, keinen Fachbegriff.
 * Der darf kleiner stehen - und muss es: "Kinderwunsch Centrum Muenchen"
 * ist bei 22 Punkten drei Punkte breiter als die Karte und zerbrach
 * mitten im Wort. */
.alenmed-kartentitel {
	font-size: 1.15rem;
	line-height: 1.3;
}


/* --- Logo statt Aufnahme ---------------------------------------------------
 * Zwei Haeuser haben uns nur ihr Zeichen hinterlassen. Ein Zeichen darf
 * nicht beschnitten werden: aus "Strahlentherapie Pasing Muenchen" wurde
 * durch den Zuschnitt "lentherapie P chen". Es wird darum in die Flaeche
 * eingepasst, nicht auf sie zugeschnitten, und steht auf Weiss - Zeichen
 * sind fuer weissen Grund gezeichnet.
 */
.alenmed-kartenbild--logo img,
.alenmed-klinikbild--logo img {
	object-fit: contain;
	background: #fff;
	padding: 0.6rem;
	/* Sonst zaehlt der Innenabstand zur Hoehe dazu und das Zeichen
	 * staende neunzehn Punkte hoeher als jede Aufnahme daneben. */
	box-sizing: border-box;
}




/* --- Verbindung Arzt und Haus ----------------------------------------------
 * Steht ueber den Querverweisen und sieht aus wie sie: der Fuss einer Seite
 * soll nicht aus zwei verschiedenen Baukaesten bestehen.
 */
.alenmed-verbindung {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--linie);
}

.alenmed-verbindung h2 {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--titel);
	font-size: var(--wp--preset--font-size--titel-klein);
}

.alenmed-verbindung ul {
	margin: 0;
	padding: 0;
	list-style: none;
	columns: 2 18rem;
	column-gap: var(--wp--preset--spacing--40);
}

.alenmed-verbindung li {
	break-inside: avoid;
	margin: 0 0 0.6rem;
	font-size: var(--wp--preset--font-size--text);
	line-height: 1.4;
}

.alenmed-verbindung a {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	color: var(--wp--preset--color--petrol);
	text-decoration: none;
}

.alenmed-verbindung a:hover span,
.alenmed-verbindung a:focus-visible span {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Das Fach steht neben dem Namen, aber leiser - gesucht wird der Name. */
.alenmed-verbindung__fach {
	color: var(--wp--preset--color--gedaempft);
	font-size: var(--wp--preset--font-size--klein);
}

.alenmed-verbindung__fach::before {
	content: " · ";
}


/* Haus ohne namentlich vorgestellten Arzt - dann steht dort ein Satz
 * statt einer leeren Stelle. */
.alenmed-verbindung--knapp p {
	margin: 0;
	max-width: 44rem;
	font-size: var(--wp--preset--font-size--text);
	color: var(--wp--preset--color--gedaempft);
}


/* Portraets in der Aerzteliste einer Klinik. Die Aufnahmen sind quer
 * (214x170); auf ein Quadrat beschnitten stehen alle Gesichter gleich
 * gross nebeneinander, statt dass jede Zeile anders hoch ist. */
.alenmed-verbindung__portraet {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	object-fit: cover;
	object-position: center 30%;
	border-radius: 3px;
}

.alenmed-verbindung__name {
	display: block;
}

/* Das Fach unter den Namen, nicht daneben: neben einem Portraet hat die
 * Zeile weniger Platz, und der Name soll nicht umbrechen muessen. */
.alenmed-verbindung li:has(.alenmed-verbindung__portraet) .alenmed-verbindung__fach {
	display: block;
}

.alenmed-verbindung li:has(.alenmed-verbindung__portraet) .alenmed-verbindung__fach::before {
	content: none;
}


/* --- Der Punkt, auf dem der Leser steht -------------------------------------
 * Ein Strich unter dem Wort, in der Farbe des Auftritts. Nicht fett und
 * nicht farbig: die Leiste soll ruhig bleiben, es geht nur darum, dass man
 * sich wiederfindet. Der Strich haengt am Wort, nicht am Listenpunkt -
 * sonst liefe er ueber den Abstand daneben mit.
 */
.wp-block-navigation-item.alenmed-ist-hier > a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.45em;
	/* currentColor und keine feste Farbe: "Экстренно" traegt seine eigene,
	 * und die steht als Stil am Element, nicht als Klasse - eine
	 * Ausnahmeregel dafuer waere ein Sonderfall, der beim naechsten
	 * farbigen Punkt wieder vergessen wird. */
	text-decoration-color: currentColor;
}

/* --- Sofortkontakt ---------------------------------------------------------
 * Rund, klein, unten in der Ecke - dort sucht man sie. Auf der arabischen
 * Fassung wandert sie auf die andere Seite: sie gehoert ans Ende der
 * Leserichtung, nicht an eine feste Kante.
 *
 * Die Farbe ist die von WhatsApp und nicht die des Auftritts. Das ist Absicht:
 * die Schaltflaeche verspricht eine bestimmte Anwendung, und wer sie am Gruen
 * erkennt, weiss vorher, was sich oeffnet.
 */
.alenmed-chat {
	position: fixed;
	right: clamp(1rem, 3vw, 2rem);
	bottom: clamp(1rem, 3vw, 2rem);
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;
	background: #25d366;
	color: #fff;
	box-shadow: 0 2px 10px rgb(0 0 0 / 0.22);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.alenmed-rtl .alenmed-chat {
	right: auto;
	left: clamp(1rem, 3vw, 2rem);
}

/* Steht der Webchat daneben, gehoert die WhatsApp-Schaltflaeche dem Telefon:
   auf dem Rechner gibt es kein WhatsApp, dort waere sie ein Umweg ueber die
   Webfassung. Der Chat setzt sich selbst in dieselbe Ecke - darum rueckt sie
   auf dem Telefon nach oben, damit beide nebeneinander Platz haben. */
@media (min-width: 768px) {
	.alenmed-chat--telefon { display: none; }
}

@media (max-width: 767px) {
	.alenmed-chat--telefon { bottom: calc(clamp(1rem, 3vw, 2rem) + 4rem); }
}

.alenmed-chat svg {
	width: 1.85rem;
	height: 1.85rem;
	display: block;
}

.alenmed-chat:hover,
.alenmed-chat:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 4px 14px rgb(0 0 0 / 0.28);
}

/* Wer die Bewegung abgestellt hat, bekommt sie nicht. */
@media (prefers-reduced-motion: reduce) {
	.alenmed-chat { transition: none; }
	.alenmed-chat:hover,
	.alenmed-chat:focus-visible { transform: none; }
}

/* --- Film auf "Ueber uns" ---------------------------------------------------
 * Kein Autostart, keine Schleife, kein Ton ohne Klick - der Film des alten
 * Auftritts lief von selbst mit Ton und begann nach jedem Ende von vorn.
 *
 * Und nicht auf volle Breite: die Aufnahme ist 640 Pixel breit, gestreckt
 * wird sie weich, und weich sieht nach alt aus. Lieber klein und scharf.
 */
.alenmed-film {
	margin: var(--wp--preset--spacing--40) 0;
	max-width: 640px;
}

.alenmed-film video {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
	background: var(--wp--preset--color--tinte);
}

.alenmed-film figcaption {
	margin-top: 0.6rem;
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--gedaempft);
	line-height: 1.5;
}