/*
 * NOUW cookie consent (WebToffee GDPR Cookie Consent): design "Katalog",
 * chosen 2026-10-01 from three proposals. White full-width strip (no top line),
 * Lettera Light copy, outlined square buttons, the product page's
 * vocabulary. "Ablehnen" and "Alle akzeptieren" are identical boxes (rejecting
 * must be as easy as accepting); "Einstellungen" is a secondary text link.
 *
 * Scoped under html:root only for specificity against the plugin's own CSS.
 * "!important" appears where the plugin writes inline styles (bar colours and
 * padding, button colours on load and on every hover, revisit tab position).
 * The plugin ignores its own popup colour settings, so the popup is styled
 * here too. Texts/buttons/categories come from the setup script
 * (~/Desktop/nouw-2026-backups/consent-setup/nouw-consent-setup.php).
 *
 * Markup (plugin):
 *   #cookie-law-info-bar > .cli-wrapper > span > .cli-bar-container.cli-style-v2
 *     > .cli-bar-message (text + privacy link)
 *     > .cli-bar-btn_container > a.cli_settings_button, a.cookie_action_close_header_reject, a.cookie_action_close_header
 *   #cookie-law-info-again > span          (revisit tab "Cookie-Einstellungen")
 *   .cli-modal > .cli-modal-dialog > .cli-modal-content
 *
 * Type: the theme registers both Lettera cuts under one family at the same
 * weight, so only the Light cut is ever used; the Bold cut is registered here
 * under its own name for buttons and titles.
 */

@font-face {
	font-family: "NOUW Lettera Bold";
	src: url("../fonts/LetteraTextStd-Bold.otf") format("opentype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

html:root {
	--cc-red: #ff5454;
	--cc-sand: #cba67e;
	--cc-grey: #ebebeb;
	--cc-black: #000;
	--cc-white: #fff;
	--cc-text: "Lettera-Txt", "Helvetica Neue", Arial, sans-serif;
	--cc-display: "NOUW Lettera Bold", "Lettera-Txt", "Helvetica Neue", Arial, sans-serif;
	--cc-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ------------------------------------------------------------------
 * Resets of plugin defaults
 * ------------------------------------------------------------------ */
html:root #cookie-law-info-bar {
	font-family: var(--cc-text) !important; /* inline font-family from plugin */
	font-weight: lighter;
	box-shadow: none;
	text-align: left !important;            /* inline */
	line-height: 1.45;
	-webkit-text-size-adjust: none; /* no mobile font boosting: the phone sizes below are deliberate */
	text-size-adjust: none;
}
html:root #cookie-law-info-bar .cli-wrapper,
html:root #cookie-law-info-bar > .cli-wrapper > span {
	display: block;
}
html:root #cookie-law-info-bar .cli-bar-message a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
html:root #cookie-law-info-bar .cli-bar-btn_container a {
	font-family: var(--cc-display);
	font-weight: 400;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	box-sizing: border-box;
	white-space: nowrap;
}
/* Reject and accept all: identical box, identical weight (legal: rejecting must be as easy as accepting) */
html:root #cookie-law-info-bar .cli-plugin-main-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 !important;                   /* inline */
	border-radius: 0 !important;            /* inline */
	font-size: inherit;
	transition: background-color 0.2s, color 0.2s;
}
html:root #cookie-law-info-bar .cli_settings_button {
	border: 0 !important;                   /* inline border-bottom */
	margin: 0 !important;                   /* inline */
	background: transparent !important;     /* set by plugin js on hover */
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
html:root #cookie-law-info-again {
	font-family: var(--cc-display) !important; /* inline */
	box-shadow: none;
	padding: 0;
	line-height: 1;
	z-index: 9999;
}
html:root #cookie-law-info-again span {
	display: block;
}
/* Settings popup: generic resets */
html:root .cli-modal .cli-modal-dialog {
	font-family: var(--cc-text);
	font-weight: lighter;
	font-size: 15px;
	line-height: 1.5;
}
html:root .cli-modal .cli-modal-content {
	border-radius: 0;
	box-shadow: none;
}
html:root .cli-modal h4#wt-cli-privacy-title {
	font-family: var(--cc-display);
	font-weight: 400;
	font-size: 24px;
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0 0 14px;
}
html:root .cli-modal .cli-privacy-content-text,
html:root .cli-modal .cli-tab-container p,
html:root .cli-modal .wt-cli-cookie-description {
	font-size: 15px;
	line-height: 1.5;
}
html:root .cli-modal a.cli-privacy-readmore {
	font-family: var(--cc-text);
	font-size: 13px;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	margin-top: 8px;
}
html:root .cli-modal .cli-privacy-overview {
	padding-bottom: 22px;
}
html:root .cli-modal .cli-tab-section {
	margin: 0;
}
html:root .cli-modal .cli-tab-header {
	border-radius: 0;
	padding: 16px 0;
	align-items: center;
	transition: none;
}
html:root .cli-modal .cli-tab-header a.cli-nav-link {
	font-family: var(--cc-display);
	font-size: 15px;
}
html:root .cli-modal .cli-tab-section .cli-tab-content {
	padding: 4px 0 20px;
}
html:root .cli-modal span.cli-necessary-caption,
html:root .cli-modal .cli-switch .cli-slider:after {
	font-family: var(--cc-text);
	font-size: 12px;
	letter-spacing: 0.02em;
}
html:root .cli-modal .cli-switch .cli-slider {
	border-radius: 999px;
	transition: background-color 0.25s;
}
html:root .cli-modal .cli-switch .cli-slider:before {
	transition: transform 0.25s var(--cc-ease);
}
html:root .cli-modal .cli-tab-footer {
	padding: 22px 0 0;
}
html:root .cli-modal .cli-tab-footer .cli-btn {
	font-family: var(--cc-display);
	font-size: 15px;
	border-radius: 0;
	padding: 14px 26px;
	transition: background-color 0.2s, color 0.2s;
}
html:root .cli-modal .cli-tab-footer .cli-btn:hover {
	opacity: 1;
}
html:root .cli-modal .cli-modal-close {
	width: 44px;
	height: 44px;
	padding: 10px;
	border-radius: 0;
	cursor: pointer;
}
html:root .cli-modal table.cookielawinfo-row-cat-table {
	font-size: 12px;
	line-height: 1.4;
	margin-top: 12px;
	width: 100%;
	border-collapse: collapse;
}
html:root .cli-modal table.cookielawinfo-row-cat-table th,
html:root .cli-modal table.cookielawinfo-row-cat-table td {
	text-align: left;
	vertical-align: top;
	padding: 6px 8px 6px 0;
	border-bottom: 1px solid currentColor;
	word-break: break-word;
}
html:root .cli-modal table.cookielawinfo-row-cat-table th {
	font-family: var(--cc-display);
	font-weight: 400;
}

/* Keyboard focus: a 2px black ring, offset so it reads on any fill.
   The plugin dims a focused button to opacity .7 instead of a ring; the ring replaces that. */
html:root #cookie-law-info-bar .cli-plugin-button:focus {
	opacity: 1;
}
html:root #cookie-law-info-bar a:focus-visible,
html:root #cookie-law-info-again:focus-visible,
html:root .cli-modal a:focus-visible,
html:root .cli-modal button:focus-visible,
html:root .cli-modal input:focus-visible + .cli-slider {
	outline: 2px solid var(--cc-focus, #000);
	outline-offset: 3px;
	box-shadow: none;
}

/* Motion: one entrance for the bar, one for the revisit tab, nothing else self-triggered */
@keyframes nouw-cc-rise {
	from { transform: translateY(24px); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}
@keyframes nouw-cc-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
html:root #cookie-law-info-bar {
	animation: nouw-cc-rise 0.45s var(--cc-ease) backwards; /* backwards, not both: the plugin dims the bar via inline opacity while the popup is open */
}
html:root #cookie-law-info-again {
	animation: nouw-cc-fade 0.3s ease-out backwards;
}
@media (prefers-reduced-motion: reduce) {
	html:root #cookie-law-info-bar,
	html:root #cookie-law-info-again {
		animation: none;
	}
	html:root #cookie-law-info-bar *,
	html:root .cli-modal * {
		transition: none !important;
	}
	html:root .cli-modal.cli-fade .cli-modal-dialog {
		transition: none;
		transform: none;
	}
}


/* ==================================================================
 * A  "Katalog": white full-width strip, hairline rules, outlined buttons.
 *    The product page's own vocabulary (1px border, square corners,
 *    Lettera Light copy) applied to the consent. Quiet and typographic.
 * ================================================================== */
html:root { --cc-focus: #000; }

html:root #cookie-law-info-bar {
	background-color: var(--cc-white) !important; /* inline */
	color: var(--cc-black) !important;            /* inline */
	border-top: 0; /* no hairline (user, 2026-10-01) */
	padding: 0 !important;                        /* inline */
	font-size: 16px;
}
html:root #cookie-law-info-bar .cli-bar-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px 48px;
	flex-wrap: wrap;
	max-width: none; /* full width (user: widen) */
	margin: 0;
	padding: 22px clamp(20px, 3vw, 48px);
}
html:root #cookie-law-info-bar .cli-bar-message {
	flex: 1 1 420px;
	max-width: none; /* text runs up to the buttons (user: widen) */
	margin: 0;
}
html:root #cookie-law-info-bar .cli-bar-btn_container {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 0 0 auto;
	margin-left: auto;
}
html:root #cookie-law-info-bar .cli_settings_button {
	color: var(--cc-black) !important;            /* plugin js */
	font-family: var(--cc-text);
	font-size: 14px;
	margin-right: 12px !important;
	padding: 6px 0;
}
html:root #cookie-law-info-bar .cli-plugin-main-button {
	background-color: transparent !important;     /* plugin js, also on hover */
	color: var(--cc-black) !important;
	border: 1px solid var(--cc-black);
	min-width: 160px;
	padding: 13px 24px !important;                /* inline */
	font-size: 15px;
}
html:root #cookie-law-info-bar .cli-plugin-main-button:hover {
	background-color: var(--cc-black) !important;
	color: var(--cc-white) !important;
}
/* revisit tab */
html:root #cookie-law-info-again {
	background-color: var(--cc-white) !important; /* inline */
	color: var(--cc-black) !important;
	border: 1px solid var(--cc-black);
	border-bottom: 0;
	left: 24px !important;                        /* inline right:100px */
	right: auto !important;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
html:root #cookie-law-info-again span { padding: 9px 14px 10px; }
html:root #cookie-law-info-again:hover { background-color: var(--cc-grey) !important; }
/* popup */
html:root .cli-modal .cli-modal-dialog { max-width: 620px; }
html:root .cli-modal .cli-modal-content {
	background-color: var(--cc-white);
	border: 1px solid var(--cc-black);
	padding: 36px 40px 32px;
}
html:root .cli-modal .cli-modal-close { right: 6px; top: 6px; }
html:root .cli-modal .cli-modal-close svg { fill: var(--cc-black); }
html:root .cli-modal .cli-modal-close:hover { background: var(--cc-grey); }
html:root .cli-modal .cli-privacy-overview { border-bottom: 1px solid var(--cc-black); }
html:root .cli-modal .cli-tab-header {
	background-color: transparent;
	border-bottom: 1px solid var(--cc-black);
}
html:root .cli-modal .cli-tab-content { background-color: transparent; }
html:root .cli-modal .cli-tab-section .cli-tab-content { border-bottom: 1px solid var(--cc-black); padding-top: 12px; }
html:root .cli-modal .cli-switch .cli-slider { background-color: #8a8a8a; }
html:root .cli-modal .cli-switch input:checked + .cli-slider { background-color: var(--cc-black); }
html:root .cli-modal .cli-tab-footer .wt-cli-privacy-accept-btn,
html:root .cli-modal .cli-tab-footer .wt-cli-privacy-accept-all-btn {
	background-color: transparent;
	color: var(--cc-black);
	border: 1px solid var(--cc-black);
}
html:root .cli-modal .cli-tab-footer .wt-cli-privacy-accept-btn:hover,
html:root .cli-modal .cli-tab-footer .wt-cli-privacy-accept-all-btn:hover {
	background-color: var(--cc-black);
	color: var(--cc-white);
}
/* phone */
@media (max-width: 700px) {
	html:root #cookie-law-info-bar { font-size: 13px; line-height: 1.35; }
	html:root #cookie-law-info-bar .cli-bar-container { gap: 12px; padding: 14px 16px 12px; }
	html:root #cookie-law-info-bar .cli-bar-message { flex-basis: 100%; max-width: none; }
	html:root #cookie-law-info-bar .cli-bar-btn_container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		width: 100%;
		margin: 0;
	}
	html:root #cookie-law-info-bar .cli_settings_button {
		grid-column: 1 / -1;
		grid-row: 2;
		justify-self: start;
		margin: 0 !important;
		font-size: 12px;
		padding: 2px 0;
	}
	html:root #cookie-law-info-bar .cli-plugin-main-button { min-width: 0; padding: 10px 8px !important; font-size: 13px; }
	html:root #cookie-law-info-again { left: 12px !important; }
	html:root .cli-modal .cli-modal-content { padding: 28px 20px 24px; }
}

/* ------------------------------------------------------------------
 * Landscape screens: the banner is a strip exactly as tall as the red
 * home bar (--divider-height) and lines up with its padding. On the home
 * page the hero gives up that height while the banner is shown, so red
 * bar + banner sit stacked at the bottom of the first screen; when the
 * banner slides away the hero grows back with it.
 * --nouw-cc-h = current banner height, kept up to date by js/nouw-consent.js
 * (0 when hidden); reserved before first paint by the head snippet in
 * inc/nouw-consent.php (html.nouw-cc-pending) so nothing jumps on load.
 * Portrait screens (phones) keep the banner laid over the bottom: the
 * home page stacks its images there, there is no single first screen.
 * ------------------------------------------------------------------ */
@media screen and (min-aspect-ratio: 801/1000) {
	html.nouw-cc-pending {
		--nouw-cc-h: var(--divider-height);
	}
	/* On the inner flex container: the plugin shows/hides the bar itself via inline display. */
	html:root #cookie-law-info-bar .cli-bar-container {
		min-height: var(--divider-height); /* = red bar; grows only if the text has to wrap */
		box-sizing: border-box;
		padding: 8px var(--padding);
		align-content: center;
	}
	.home .intro {
		height: calc((var(--vh, 1vh) * 100) - var(--divider-height) - var(--nouw-cc-h, 0px));
	}
}