/*
 * Platzhalter der Zwei-Klick-Karte.
 *
 * Eigene Datei statt Aenderung an gesundheitszentrumwoerth.css: fuer das
 * gebaute Stylesheet liegen keine SCSS-Quellen im Paket, ein Rebuild der
 * Agentur wuerde Aenderungen dort ueberschreiben.
 *
 * Farben und Abstaende sind aus dem Bestand uebernommen:
 *   #8eae46  Gruen der Ueberschriften und der Fussleiste
 *   #ebe8de  Fuellfarbe der Bildflaeche in .area--image .area__image
 *   #fcf7e9  Flaechenfarbe der Area-Kaesten
 */

.area--image .area__image--consent {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #ebe8de;
	border: 1px dashed #c8c8c8;
}

.externalimage {
	padding: 1.5em;
	max-width: 26em;
	text-align: center;
}

.externalimage__text {
	margin: 0 0 1em;
	font-size: 90%;
	line-height: 1.5;
	color: #000;
}

.externalimage__button {
	display: inline-block;
	padding: 0.7em 1.6em;
	border: 0;
	background-color: #8eae46;
	color: #fff;
	font-family: inherit;
	font-size: 100%;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.1s ease-out;
}

.externalimage__button:hover,
.externalimage__button:focus {
	background-color: #7a982f;
}

.externalimage__button:focus-visible {
	outline: 2px solid #000;
	outline-offset: 2px;
}

.externalimage__hint {
	margin: 1em 0 0;
	font-size: 80%;
}

.externalimage__hint a {
	color: #000;
	box-shadow: inset 0 -2px 0 #bad08a;
	text-decoration: none;
}

.externalimage__hint a:hover {
	color: #8eae46;
}

/* Nach dem Laden verhaelt sich die Flaeche wieder wie ein normales Bild. */
.area--image .area__image--geladen {
	background-size: cover;
	background-position: center;
	border: 0;
}