/**
 * Öffentliches Stylesheet des Plugins.
 *
 * Die Zustimmungsbox übernimmt die Gestaltung des Themes: Schriften, Farben,
 * Eckenradien, Schatten und den Button-Look aus #scss/_textstile.scss.
 * Alle Theme-Variablen stehen mit Rückfallwert (var(--x, #hex)), damit das
 * Plugin auch in einem anderen Theme brauchbar aussieht.
 *
 * Entfallen sind die Regeln zur ".iframewrap"-Variante: das zugehörige Markup
 * war in der PHP-Datei schon lange auskommentiert und wird nicht mehr erzeugt.
 */

.hph-gpdr-google-maps {
	position: relative;
	display: block;
	width: 100%;
	/* Kommen als Inline-Variablen aus dem Shortcode (breite / hoehe). */
	max-width: var(--hph-map-max-width, 1280px);
	height: var(--hph-map-height, 400px);
	margin: 0 auto;
	overflow: hidden;
	/* Asymmetrische Ecken wie bei den Bildern im Theme (oben links eckig). */
	border-radius: 0 var(--baseBorderRadiusMedium, 20px) var(--baseBorderRadiusMedium, 20px) var(--baseBorderRadiusMedium, 20px);
	font-family: var(--mainFont, 'Nunito Sans', Verdana, Arial, sans-serif);
}

.hph-gpdr-google-maps .map_inner,
.hph-gpdr-google-maps .map_image_wrap_inner{
	height: 100%;
}

.hph-gpdr-google-maps img.preview {
	position: relative;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	max-width: 100%;
	height: 100%;
	margin: 0 auto;
	display: block;
	object-fit: cover;
	object-position: center;
	transition: filter .4s ease-in-out;
}
.hph-gpdr-google-maps:hover img.preview,
.hph-gpdr-google-maps:focus-within img.preview{
	filter: blur(3px);
}

.hph-gpdr-google-maps .map_image_wrap_inner{
	position: relative;
	background: transparent;
	z-index: 3;
}

/*
 * Die Zustimmungsbox war früher opacity:0 und wurde nur bei :hover sichtbar.
 * Damit war sie für Tastatur- und Touch-Nutzung unerreichbar: der Button lag
 * unsichtbar über der Karte und konnte fokussiert werden, ohne dass zu sehen
 * war, worum es geht. Sie ist jetzt dauerhaft sichtbar - das entspricht auch
 * dem, was eine Einwilligung leisten muss.
 */
.hph-gpdr-google-maps .map_btn{
	display: block;
	position: absolute;
	z-index: 3;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 90%;
	max-width: 420px;
	max-height: calc(100% - 30px);
	overflow: auto;
	box-sizing: border-box;
	padding: 25px;
	text-align: left;
	background: var(--backgroundColor, #ffffff);
	color: var(--text-color, #363636);
	border-radius: 0 var(--baseBorderRadiusMedium, 20px) var(--baseBorderRadiusMedium, 20px) var(--baseBorderRadiusMedium, 20px);
	box-shadow: var(--boxShadow, 0 10px 40px 0 rgba(0, 0, 0, 0.15));
	font-size: var(--miniFontSize, 15px);
	line-height: 1.6;
}

.hph-gpdr-google-maps .googlemaps_headline{
	display: block;
	margin: 0 0 10px;
	font-family: var(--headline, 'Work Sans', Verdana, Arial, sans-serif);
	font-weight: 500;
	font-size: 20px;
	line-height: normal;
	color: var(--primary-dark, #0D2636);
}

.hph-gpdr-google-maps .map_btn .privacytext{
	display: block;
	margin: 0 0 15px;
}
.hph-gpdr-google-maps .map_btn .privacytext a{
	color: var(--main-color, #3B96D4);
	text-decoration: underline;
}
.hph-gpdr-google-maps .map_btn .privacytext a:hover{
	text-decoration: none;
}

/*
 * "Zustimmung merken" war ein <span> mit einem Haken als ::before-Zeichen, per
 * JavaScript umgeschaltet - nicht fokussierbar, kein vorlesbarer Zustand.
 * Jetzt eine echte Checkbox mit <label>.
 */
.hph-gpdr-google-maps span.consent_remember_setting {
	display: flex;
	align-items: center;
	gap: 10px;
	position: relative;
	margin: 0 0 18px;
}
.hph-gpdr-google-maps .consent_remember_setting__input {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0;
	cursor: pointer;
	accent-color: var(--main-color, #3B96D4);
	/* Das Theme legt input/select/textarea eine Formularfeld-Optik auf, jeweils
	   mit !important. Fuer eine Checkbox ist das falsch, daher hier zurueck. */
	padding: 0 !important;
	background-color: initial !important;
	font-size: inherit !important;
	box-shadow: none !important;
	border-radius: 0;
	appearance: auto;
}
.hph-gpdr-google-maps .consent_remember_setting__label {
	cursor: pointer;
}

/* Button wie im Theme (#scss/_textstile.scss): orange, asymmetrische Ecken,
   Pfeil-Icon, das sich beim Hover zu einer weicheren Form öffnet. */
.hph-gpdr-google-maps BUTTON.button{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: none;
	cursor: pointer;
	width: auto;
	/* Nicht auf den Reset des Themes verlassen. */
	box-sizing: border-box;
	padding: 12px 25px;
	color: var(--contrastColorInverted, #ffffff);
	border-radius: 0 15px 15px 10px;
	background: var(--secondary-light, #F28A3D);
	box-shadow: var(--boxShadow, 0 10px 40px 0 rgba(0, 0, 0, 0.15));
	/* Ausdruecklich ohne outline - siehe Hinweis beim Fokusrahmen weiter unten. */
	transition: background-color .4s ease-in-out, border-radius .4s ease-in-out, box-shadow .4s ease-in-out;
	font-family: var(--mainFont, 'Nunito Sans', Verdana, Arial, sans-serif);
	font-size: 17px;
	font-weight: 700;
	line-height: normal;
	text-align: left;
}
.hph-gpdr-google-maps BUTTON.button::after{
	content: '';
	display: inline-block;
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	mask-image: url("data:image/svg+xml,%3Csvg width=%2214%22 height=%2214%22 viewBox=%220 0 14 14%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E %3Cpath d=%22M3.83765 3.38314C3.69769 3.37028 3.55852 3.41744 3.45482 3.51258C3.35073 3.60731 3.29148 3.74141 3.29147 3.88255C3.29148 4.0229 3.35074 4.15701 3.45443 4.25214C3.55852 4.34687 3.6977 4.39405 3.83765 4.38118L8.93305 4.38428L3.5118 9.80553C3.33286 10.004 3.34105 10.3077 3.53012 10.4967C3.71881 10.6854 4.02251 10.6936 4.22133 10.5151L9.64258 5.09381L9.63829 10.1896C9.64453 10.4625 9.86441 10.6824 10.1373 10.6886C10.2695 10.689 10.3969 10.6364 10.4905 10.5428C10.5841 10.4492 10.6363 10.3222 10.6363 10.1896L10.6363 3.88171L10.6363 3.88249C10.6387 3.74916 10.5872 3.62051 10.4932 3.52656C10.3989 3.43221 10.2702 3.38075 10.1373 3.38348L3.83765 3.38314Z%22 fill=%22%23363636%22/%3E %3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg width=%2214%22 height=%2214%22 viewBox=%220 0 14 14%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E %3Cpath d=%22M3.83765 3.38314C3.69769 3.37028 3.55852 3.41744 3.45482 3.51258C3.35073 3.60731 3.29148 3.74141 3.29147 3.88255C3.29148 4.0229 3.35074 4.15701 3.45443 4.25214C3.55852 4.34687 3.6977 4.39405 3.83765 4.38118L8.93305 4.38428L3.5118 9.80553C3.33286 10.004 3.34105 10.3077 3.53012 10.4967C3.71881 10.6854 4.02251 10.6936 4.22133 10.5151L9.64258 5.09381L9.63829 10.1896C9.64453 10.4625 9.86441 10.6824 10.1373 10.6886C10.2695 10.689 10.3969 10.6364 10.4905 10.5428C10.5841 10.4492 10.6363 10.3222 10.6363 10.1896L10.6363 3.88171L10.6363 3.88249C10.6387 3.74916 10.5872 3.62051 10.4932 3.52656C10.3989 3.43221 10.2702 3.38075 10.1373 3.38348L3.83765 3.38314Z%22 fill=%22%23363636%22/%3E %3C/svg%3E");
	mask-size: contain;
	-webkit-mask-size: contain;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-position: center center;
	-webkit-mask-position: center center;
	background-color: currentColor;
}
.hph-gpdr-google-maps BUTTON.button:hover{
	border-radius: 15px 15px 15px 10px;
	background: var(--secondary-dark, #E86F16);
}

/*
 * Fokusrahmen.
 *
 * Zwei Dinge aus dem Theme stehen dem im Weg:
 *
 * 1. #scss/_forms.scss setzt "input, select, textarea { outline: none
 *    !important; }". Das schlaegt jede noch so spezifische Regel von hier,
 *    deshalb stehen die Rahmen als Einzeleigenschaften mit !important.
 *
 * 2. #scss/_typography.scss setzt ".cont a { transition: all .4s }", und der
 *    Button erbte ueber --baseTransition dasselbe. "all" schliesst
 *    outline-color und outline-offset mit ein: der Rahmen wurde also
 *    eingeblendet und war erst nach 0,4 Sekunden vollstaendig da. Beim zuegigen
 *    Durchtabben sah es aus, als gaebe es gar keinen. Die Liste unten nennt die
 *    zu animierenden Eigenschaften deshalb ausdruecklich - ohne outline.
 *
 * Farbe: dunkler Ring aus der Theme-Palette. Auf der weissen Box und auf dem
 * orangen Button gut sichtbar.
 */
.hph-gpdr-google-maps a,
.hph-gpdr-google-maps button,
.hph-gpdr-google-maps input,
.hph-gpdr-google-maps [tabindex]{
	transition-property: color, background-color, border-radius, box-shadow, filter;
}
.hph-gpdr-google-maps .consent_remember_setting__input:focus-visible,
.hph-gpdr-google-maps BUTTON.button:focus-visible,
.hph-gpdr-google-maps .map_btn a:focus-visible {
	outline-style: solid !important;
	outline-width: 3px !important;
	outline-color: var(--primary-dark, #0D2636) !important;
	outline-offset: 2px !important;
}

/*
 * Die geladene Google-Karte liegt im selben Dokument (kein iframe), ihre
 * Bedienelemente sind also ganz normale Elemente und lassen sich hier
 * mitgestalten: der Link "Auf Google Maps ansehen", die Nutzungsbedingungen,
 * die Zoom-Schaltflaechen und der Marker.
 *
 * Weil der Untergrund dort das Kartenbild ist und jede Farbe haben kann,
 * bekommt der dunkle Ring zusaetzlich einen weissen Aussenrand - so bleibt er
 * auf hellen wie auf dunklen Kartenausschnitten erkennbar.
 */
.hph-gpdr-google-maps [id^="map_uid"] a:focus-visible,
.hph-gpdr-google-maps [id^="map_uid"] button:focus-visible,
.hph-gpdr-google-maps [id^="map_uid"] area:focus-visible,
.hph-gpdr-google-maps [id^="map_uid"] [role="button"]:focus-visible,
.hph-gpdr-google-maps [id^="map_uid"] [role="link"]:focus-visible,
.hph-gpdr-google-maps [id^="map_uid"] [tabindex]:focus-visible {
	outline-style: solid !important;
	outline-width: 3px !important;
	outline-color: var(--primary-dark, #0D2636) !important;
	outline-offset: 1px !important;
	box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.95) !important;
	border-radius: 2px;
}

/* Der Kartencontainer selbst - er erhaelt nach der Zustimmung den Fokus. */
.hph-gpdr-google-maps [id^="map_uid"]:focus-visible{
	outline-style: solid !important;
	outline-width: 3px !important;
	outline-color: var(--primary-dark, #0D2636) !important;
	outline-offset: -3px !important;
}

/* Nur für Screenreader, z.B. der Hinweis auf einen neuen Tab. */
.hph-gdpr-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/*
 * Auf schmalen Bildschirmen deckt die Box die Karte fast vollstaendig ab.
 * Deshalb dort nicht ueberlagern, sondern stapeln: Kartenausschnitt oben,
 * Einwilligungstext darunter im Fluss.
 */
@media screen and (max-width: 640px) {
	.hph-gpdr-google-maps{
		height: auto;
	}
	.hph-gpdr-google-maps .map_image_wrap_inner{
		height: auto;
	}
	.hph-gpdr-google-maps img.preview{
		height: 180px;
	}
	.hph-gpdr-google-maps .map_btn{
		position: static;
		transform: none;
		width: 100%;
		max-width: none;
		max-height: none;
		overflow: visible;
		padding: 20px;
		border-radius: 0;
		box-shadow: none;
	}
	.hph-gpdr-google-maps .googlemaps_headline{
		font-size: 18px;
	}
	.hph-gpdr-google-maps BUTTON.button{
		width: 100%;
		justify-content: space-between;
		font-size: 16px;
		padding: 12px 18px;
	}
	/* Der Unschaerfe-Effekt beim Hover ergibt hier keinen Sinn mehr. */
	.hph-gpdr-google-maps:hover img.preview,
	.hph-gpdr-google-maps:focus-within img.preview{
		filter: none;
	}
}

/* Wer im Betriebssystem weniger Bewegung angefordert hat, bekommt keine
   Übergänge. */
@media (prefers-reduced-motion: reduce) {
	.hph-gpdr-google-maps *,
	.hph-gpdr-google-maps img.preview{
		transition: none;
	}
}

/* Adressfenster am Kartenpin ---------------------------------------------- */

/* Google setzt im InfoWindow eigene Schriftgroessen. Damit die Adresse zum
   Rest der Seite passt, erben wir Schrift und Farbe vom Theme. */
.hph-gdpr-infowindow {
	font: inherit;
	color: inherit;
	line-height: 1.5;
	padding: 2px 4px 4px;
}