/**
 * Anpassungen an CookieConsent.
 *
 * Die Bibliothek unter assets/vendor/ bleibt unveraendert, damit sie sich
 * jederzeit gegen eine neuere Fassung tauschen laesst. Alles Eigene steht
 * in dieser Datei und arbeitet ueber die Variablen der Bibliothek.
 *
 * Wer die Darstellung an eine Kundenseite anpassen will, aendert in der
 * Regel nur die Akzentfarbe weiter unten.
 */

#cc-main {
	/* Akzentfarbe. Neutral gehalten, damit sie auf jeder Seite passt. */
	--cc-btn-primary-bg: #1f2a24;
	--cc-btn-primary-border-color: #1f2a24;
	--cc-btn-primary-hover-bg: #34463c;
	--cc-btn-primary-hover-border-color: #34463c;
	--cc-btn-primary-color: #ffffff;
	--cc-btn-primary-hover-color: #ffffff;

	--cc-bg: #ffffff;
	--cc-primary-color: #1c1c1c;
	--cc-secondary-color: #4a4a4a;
	--cc-link-color: #1f2a24;

	--cc-btn-secondary-bg: #f1f1ef;
	--cc-btn-secondary-border-color: #f1f1ef;
	--cc-btn-secondary-color: #1c1c1c;
	--cc-btn-secondary-hover-bg: #e3e3e0;
	--cc-btn-secondary-hover-border-color: #e3e3e0;

	--cc-separator-border-color: #e3e3e0;
	--cc-cookie-category-block-bg: #f7f7f5;
	--cc-cookie-category-block-border: #e3e3e0;
	--cc-cookie-category-block-hover-bg: #f1f1ef;
	--cc-cookie-category-block-hover-border: #d7d7d3;

	--cc-toggle-on-bg: #1f2a24;
	--cc-toggle-off-bg: #9a9a96;
	--cc-toggle-readonly-bg: #d7d7d3;

	--cc-modal-border-radius: 6px;
	--cc-btn-border-radius: 4px;

	/*
	 * Die Ebene gibt die Bibliothek vor und sie liegt bereits am oberen
	 * Anschlag. Nicht ueberschreiben: ein eigener Wert kann den Banner
	 * nur senken, etwa unter Avadas Kopfzeile.
	 */

	/* Die Seite gibt die Schrift vor, nicht die Bibliothek. */
	--cc-font-family: inherit;
}

/*
 * Mobil.
 *
 * Die Bibliothek begrenzt den Beschreibungstext selbst auf 40vh und
 * macht ihn scrollbar. Alles, was darueber hinaus eine Hoehe begrenzt,
 * muss den Text treffen und niemals .cm__body: darin stehen auch die
 * Schaltflaechen, die dann unsichtbar aus dem Kasten laufen.
 */
@media screen and (max-width: 640px) {

	/*
	 * Der Kasten bleibt in jedem Fall im Bild. dvh beachtet die
	 * ein- und ausfahrende Leiste mobiler Browser, vh ist der
	 * Rueckfall fuer aeltere Fassungen.
	 */
	#cc-main .cm {
		max-height: calc(100vh - 1em);
		max-height: calc(100dvh - 1em);
	}

	/*
	 * Nur der Text gibt nach, der Rest wird gescrollt. Der Wert ist
	 * der Hebel, mit dem die Gesamthoehe des Banners eingestellt wird.
	 */
	#cc-main .cm__desc {
		max-height: 18vh;
		max-height: 18dvh;
		overscroll-behavior: contain;
	}

	/* Etwas engerer Schaltflaechenblock, spart rund zehn Pixel Hoehe. */
	#cc-main .cm__btns {
		padding-bottom: 0.8rem !important;
		padding-top: 0.8rem !important;
	}

	#cc-main .cm__texts {
		min-height: 0;
	}

	/*
	 * Schaltflaechen und Fusszeile duerfen nicht schrumpfen. Ohne das
	 * waeren sie bei wenig Platz das Erste, was der Flexsatz kuerzt.
	 */
	#cc-main .cm__btns,
	#cc-main .cm__footer {
		flex-shrink: 0;
	}

	/*
	 * Akzeptieren und Ablehnen nebeneinander, gleich breit. Das spart
	 * die Hoehe einer Schaltflaeche und haelt beide Wege weiterhin
	 * gleich gewichtet. Einstellungen steht darunter in voller Breite.
	 * Die Bibliothek erzwingt mobil eine Spalte, deshalb !important.
	 */
	#cc-main .cm__btn-group:first-child {
		flex-direction: row !important;
	}

	/*
	 * flex-basis 0 statt auto: sonst bemisst der Flexsatz die beiden
	 * Schaltflaechen nach ihrer Textlaenge und "Alle akzeptieren" wird
	 * breiter als "Alle ablehnen". Gleich gewichtet heisst gleich breit.
	 */
	#cc-main .cm__btn-group:first-child .cm__btn {
		flex: 1 1 0 !important;
		min-width: 0 !important;
	}

	#cc-main .cm__btn-group:first-child .cm__btn + .cm__btn {
		margin: 0 0 0 0.375rem !important;
	}
}

/**
 * Zugang zu den Einstellungen nach der ersten Entscheidung.
 *
 * Zwei Schalter, beide aus GWC_Revoke: das Symbol unten links auf jeder
 * Seite und die Schaltflaeche des Shortcodes in der
 * Datenschutzerklaerung. Sie stehen ausserhalb von #cc-main und koennen
 * die Variablen der Bibliothek deshalb nicht erben, die Werte stehen
 * hier noch einmal.
 */

.gwc-settings-icon {
	position: fixed;
	bottom: 1rem;
	left: 1rem;

	/*
	 * Knapp unter der Bibliothek. Die liegt am oberen Anschlag, und das
	 * ist richtig so: oeffnet sich das Einstellungsfenster, gehoert es
	 * ueber das Symbol. Hoeher als Avadas Elemente muss es trotzdem
	 * liegen, sonst verschwindet es unter einer klebenden Fusszeile.
	 */
	z-index: 2147483644;

	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid #d7d7d3;
	border-radius: 50%;
	background: #ffffff;
	color: #1f2a24;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
	cursor: pointer;

	/* Die Zeichnung erbt ueber currentColor, sonst faerbt nichts. */
	line-height: 0;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.gwc-settings-icon:hover,
.gwc-settings-icon:focus {
	background: #f1f1ef;
	border-color: #9a9a96;
	color: #1f2a24;
}

.gwc-settings-icon:focus-visible,
.gwc-settings-button:focus-visible {
	outline: 2px solid #1f2a24;
	outline-offset: 2px;
}

/*
 * Solange Banner oder Einstellungsfenster offen sind, ist das Symbol
 * ueberfluessig und im Weg. Beide Klassen setzt die Bibliothek am
 * html-Element.
 */
.show--consent .gwc-settings-icon,
.show--preferences .gwc-settings-icon {
	display: none;
}

/*
 * Schaltflaeche des Shortcodes.
 *
 * Bewusst eigenstaendig gestaltet und nicht dem Theme ueberlassen: das
 * Plugin laeuft auf vier Seiten mit unterschiedlichen Themes, und eine
 * Schaltflaeche, die je nach Seite anders oder gar nicht aussieht, ist
 * in der Datenschutzerklaerung die schlechteste Stelle fuer eine
 * Ueberraschung. Eine einzelne Klasse als Wahlhebel, damit ein
 * Child-Theme sie ohne Muehe ueberschreiben kann.
 */
.gwc-settings-button {
	display: inline-block;
	padding: 0.55em 1.1em;
	border: 1px solid #1f2a24;
	border-radius: 4px;
	background: #1f2a24;
	color: #ffffff;
	font: inherit;
	line-height: 1.3;
	text-align: center;
	cursor: pointer;
}

.gwc-settings-button:hover,
.gwc-settings-button:focus {
	background: #34463c;
	border-color: #34463c;
	color: #ffffff;
}

@media screen and (max-width: 640px) {

	/*
	 * Etwas kleiner und naeher an die Ecke. Zusaetzlich die sichere
	 * Flaeche beachten, sonst liegt das Symbol auf dem iPhone unter der
	 * Leiste des Browsers.
	 */
	.gwc-settings-icon {
		bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
		left: calc(0.75rem + env(safe-area-inset-left, 0px));
		width: 2.5rem;
		height: 2.5rem;
	}
}

/* Auf Papier hat eine Schaltflaeche nichts verloren. */
@media print {

	.gwc-settings-icon {
		display: none;
	}
}