/*
 * KI-Transparenz frontend.
 *
 * Three constraints drive most of this:
 *
 *  - ZERO LAYOUT SHIFT. Adding a badge must not move the image or its container
 *    by a single pixel. See .kit-wrap below.
 *  - The badge must never swallow clicks. A badge intercepting a click on a
 *    linked image is the single most common support ticket in this category.
 *    ONE scoped exception since 0.9.0: .kit-badge--tip takes pointer events on a
 *    fine pointer, because that variant keeps its wording on a hover layer and
 *    an unhoverable trigger would make the official mark decorative -- the one
 *    thing the Commission's icon guidance rules out. It is ~36x30px in a corner,
 *    it is switched back off wherever a coarse pointer exists, and a click on it
 *    still bubbles to a surrounding link. See "mark alone: second layer" below.
 *  - The disclosure must survive print, forced colours and CSS minification.
 *    A badge that vanishes in any of those is a compliance failure, not a
 *    cosmetic one, so those rules are defensive on purpose.
 *
 * COLOURS come from custom properties emitted by KIT_Appearance::css_vars().
 * Every var() carries a literal fallback so an aggressive unused-CSS pass that
 * strips the :root block degrades to the default badge rather than to
 * transparent text on a photograph.
 */

/* --------------------------------------------------------------- structure */

/*
 * Preferred host: an element the page already lays out (a <figure>, a card
 * <div>). Adding position:relative to it costs nothing. Used whenever the image
 * is its parent's only child.
 */
.kit-host {
	position: relative;
	isolation: isolate;
}

/*
 * Fallback wrapper, for images that share their parent with other content.
 *
 * An inline-block sits on the parent's text baseline, so the browser reserves
 * descender space beneath it -- about 4px -- which makes the container taller
 * and pushes everything below it down. vertical-align:top removes the baseline
 * relationship; line-height and font-size zero out inherited text metrics.
 * With all three, wrapped and unwrapped geometry are byte-identical.
 */
.kit-wrap {
	position: relative;
	display: inline-block;
	max-width: 100%;
	isolation: isolate;
	vertical-align: top;
	line-height: 0;
	font-size: 0;
}

/*
 * :where() has zero specificity, so the theme always wins. An earlier version
 * used a plain descendant selector plus `height: auto`, which overrode themes
 * that size images deliberately and visibly resized them.
 */
.kit-wrap > :where(img) {
	max-width: 100%;
}

/* ------------------------------------------------------------------- badge */

.kit-badge {
	position: absolute;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: .4em;
	margin: .9em;
	padding: .3em .55em;
	border-radius: 4px;
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	/* rem, not px: .kit-wrap sets font-size:0, and rem resolves against the root. */
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .01em;
	text-decoration: none;
	pointer-events: none;

	/* Centre positions must not overflow a narrow image and get clipped. */
	max-width: calc(100% - 1em);
	white-space: normal;
	overflow-wrap: anywhere;

	background: var(--kit-bg, rgba(17, 17, 17, .88));
	color: var(--kit-fg, #ffffff);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .35);

	/* Default corner, so an unknown position modifier still lands somewhere. */
	inset-inline-start: 0;
	bottom: 0;
}

/* ---------------------------------------------------------------- position */

.kit-wrap--top-left      .kit-badge,
.kit-host--top-left      .kit-badge { inset-inline-start: 0; inset-inline-end: auto; top: 0; bottom: auto; }
.kit-wrap--top-right     .kit-badge,
.kit-host--top-right     .kit-badge { inset-inline-end: 0; inset-inline-start: auto; top: 0; bottom: auto; }
.kit-wrap--bottom-left   .kit-badge,
.kit-host--bottom-left   .kit-badge { inset-inline-start: 0; inset-inline-end: auto; bottom: 0; top: auto; }
.kit-wrap--bottom-right  .kit-badge,
.kit-host--bottom-right  .kit-badge { inset-inline-end: 0; inset-inline-start: auto; bottom: 0; top: auto; }

.kit-wrap--top-center    .kit-badge,
.kit-host--top-center    .kit-badge,
.kit-wrap--bottom-center .kit-badge,
.kit-host--bottom-center .kit-badge {
	inset-inline-start: 50%;
	inset-inline-end: auto;
	transform: translateX(-50%);
}
.kit-wrap--top-center    .kit-badge,
.kit-host--top-center    .kit-badge { top: 0; bottom: auto; }
.kit-wrap--bottom-center .kit-badge,
.kit-host--bottom-center .kit-badge { bottom: 0; top: auto; }

/*
 * below-image: the badge leaves the photograph entirely and sits on the page
 * background. This is the only position where contrast is exactly knowable
 * rather than worst-case, so it is the most reliable presentation for low
 * vision readers -- and it needs no colour tuning to stay legible.
 */
.kit-wrap--below-image,
.kit-host--below-image { position: relative; }

.kit-wrap--below-image .kit-badge,
.kit-host--below-image .kit-badge {
	position: static;
	transform: none;
	display: inline-flex;
	margin: .35em 0 0;
	max-width: 100%;
	box-shadow: none;
}

/*
 * A figure with a caption is taller than its image, so a bottom-anchored badge
 * would float over the caption text. Anchor to the top instead.
 */
.kit-host--bottom-left:has(figcaption)   .kit-badge,
.kit-host--bottom-center:has(figcaption) .kit-badge,
.kit-host--bottom-right:has(figcaption)  .kit-badge { bottom: auto; top: 0; }

/* -------------------------------------------------------------------- icon */

/*
 * Official EU marks come in two aspect ratios: the plain "AI" disc is 1:1, the
 * worded "AI GENERATED" / "AI MODIFIED" pills are ~5:1. Sizing them the same
 * would squash the pill, so each gets its own box.
 */
.kit-badge .kit-icon {
	flex: 0 0 auto;
	display: block;
}

.kit-icon--ai { width: 15px; height: 15px; }

.kit-icon--ai-generated,
.kit-icon--ai-modified { width: 78px; height: 16px; }

/*
 * Stock is not an AI disclosure, so it is styled to read as a caption rather
 * than as a legal mark -- lighter weight, no icon slot.
 */
.kit-badge--stock {
	font-weight: 500;
	letter-spacing: 0;
}

/* Worded mark carries its own wording, so the badge needs less padding. */
.kit-badge--worded { padding: .35em .5em; }

/* ------------------------------------------------------------------ hiding */

/*
 * ONE visually-hidden utility. PHP decides which parts carry it -- CSS no
 * longer decides visibility, because when both did they could disagree and
 * produce an empty coloured pill that disclosed nothing.
 */
.kit-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------ mark alone: second layer */

/*
 * WHY THIS EXISTS, and why it reverses "Hover-to-reveal the label" -- listed
 * until 0.8.1 in the README as deliberately not built.
 *
 * When a badge shows the EU mark and no wording, the mark IS the whole visible
 * disclosure. The Commission specifies the plain mark for exactly that case --
 * "when a custom text label or interactive second layer is implemented" -- so
 * mark plus second layer is the documented pattern, not a workaround. What the
 * mark may NOT be is decorative: the guidance asks that it point at further
 * information and that the further information actually be reachable.
 *
 * The three reasons the earlier decision gave are ANSWERED, not overruled:
 *
 *  - "TOUCH HAS NO HOVER." Correct, and nothing here reaches touch: every rule
 *    that matters sits behind (hover: hover) and (pointer: fine). On any device
 *    with a coarse pointer the block near the end of this file keeps the wording
 *    permanently on screen instead -- second layer turned into first, which is
 *    the stronger disclosure and matches the Commission's own user testing
 *    ("performance improved across all measures" with a text label).
 *  - "NOTHING IS FOCUSABLE." Still true of the badge, and it stays that way: a
 *    <span tabindex="0"> is a role=generic tab stop that does nothing, one per
 *    labelled image, and it is interactive content, which HTML forbids inside
 *    <a> -- which is exactly where this site's card badges render. The reveal
 *    rides on the focusable ANCESTOR a linked image already has, below.
 *  - "DISCLOSURE AT FIRST EXPOSURE." What must be perceivable first is the MARK,
 *    and it is: 22px, opaque, in a free corner, no interaction required. The
 *    sentence is the additional information the guidance puts on the second
 *    layer. An operator who reads Art. 50(5) more strictly keeps the wording on
 *    screen above a chosen width with the kit_text_from_px filter.
 *
 * WHAT IS REVEALED is the description span the badge already carries:
 * .kit-badge__sr, the node the image points at with aria-describedby. It is
 * unhidden in place, never copied -- one sentence per image in the DOM, one
 * place to change the wording (languages/de_DE.php, desc_*).
 *
 * NO FLOATING BUBBLE, deliberately. A positioned bubble inside .kit-badge would
 * resolve percentage widths against the ~36px badge and be sliced by any
 * ancestor with overflow:hidden -- the helix theme's .hero-visual is exactly
 * that. The BADGE is positioned against the host, so letting the badge itself
 * grow is the one construction that CANNOT leave the picture: an absolutely
 * positioned box shrinks to the space between its own inset and the containing
 * block, margins already deducted. Measured on the live page (host 317x280) for
 * all six corner and centre positions: the opened pill stays 12-14px inside the
 * host on every edge, so no extra max-width is needed and none is added. It
 * also inherits all seven positions for free -- the inset rules above make it
 * open leftwards from top-right, rightwards from top-left, upwards from the
 * bottom row and symmetrically from the centres.
 *
 * SCOPED ON .kit-badge--tip, NOT on .kit-badge--iconic. --iconic means only "no
 * visible text", which is also true of the official worded mark and of EVERY
 * image under 320px via the compact rule -- this site's card images carry
 * width="260". Keying any of this on --iconic would hand pointer events, a
 * bigger disc and a tooltip to badges nobody configured. The class is emitted by
 * KIT_Renderer::badge_html(), so it cannot drift from what the visibility
 * arbiter decided.
 */

.kit-badge--tip {
	/*
	 * CLOSED STATE: THE MARK ALONE, NO PLAQUE.
	 *
	 * A filled rectangle around the disc reads as a pasted-on interface chip and
	 * breaks the photograph it sits on. It is also unnecessary here: the official
	 * disc is self-contained -- a solid fill carrying its own white lettering --
	 * so its legibility never depended on the plaque. Only its EDGE against the
	 * photograph did, and that is what the filter below restores.
	 *
	 * MEASURED before removing it, over the badge region (top right) of all 36
	 * theme images: the black disc clears WCAG 1.4.11 (3:1) on 35 of them, mostly
	 * far above it (15-20:1), because these motifs are bright. The single failure
	 * is a logo file that never carries a badge. A WHITE disc would have failed on
	 * 33 of 36 -- which is why the variant stays black here.
	 *
	 * The mean is not the whole story: inside that same region individual dark
	 * pixels drop to ~1:1 (a dark roof, a shadowed doorway). A disc with no edge
	 * would dissolve exactly there. Hence the two-part filter rather than nothing:
	 * a tight light halo separates the fill from dark ground, the soft dark
	 * shadow does the same over pale ground. Neither draws a box.
	 *
	 * NOT DONE: making the disc translucent. It would lower precisely the contrast
	 * the Commission asks for ("clearly visible size", explicitly not decorative)
	 * and buys nothing the filter does not already give.
	 *
	 * TRADE-OFF, stated plainly: --kit-icon-bg went through KIT_Contrast's gate,
	 * a drop-shadow cannot. The guarantee here rests on the measurement above and
	 * has to be re-checked if the image set changes character. The opened state
	 * below still uses the gated colour, because there the text needs a backdrop.
	 */
	background: none;
	box-shadow: none;
	padding: 0;
}

.kit-badge--tip .kit-icon {
	filter:
		drop-shadow(0 0 1px rgba(255, 255, 255, .9))
		drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
}

/*
 * 15px is right beside a word and wrong alone: the official "AI" lettering fills
 * about a third of the disc, so at 15px it renders ~5px tall and the mark reads
 * as a dot. 22px puts the whole badge at 36x30 CSS px (measured), past the 24x24
 * floor SC 2.5.8 asks of anything that is a pointer target.
 *
 * Outside the hover query on purpose: on a phone this badge shows mark plus
 * wording, and the mark has to be recognisable as the official mark there too.
 */
.kit-badge--tip .kit-icon--ai {
	width: 22px;
	height: 22px;
}

@media (hover: hover) and (pointer: fine) {

	/*
	 * The ONE place pointer-events comes back, and only where the primary
	 * pointer is a mouse. Every other badge keeps pointer-events:none from the
	 * .kit-badge block, so the click-swallowing bug returns for one badge
	 * variant, in one corner, on mouse devices -- and nowhere else.
	 *
	 * A click there still reaches a surrounding link, because the event bubbles.
	 * What it does cost is a lightbox or gallery script bound to the <img>
	 * itself, which no longer fires on that patch. That is the one real
	 * regression and it is named in the README.
	 */
	.kit-badge--tip {
		pointer-events: auto;

		/* The affordance, not a flourish. A mark that keeps information behind
		   itself has to say so; the default arrow says the opposite, and
		   "points at further information" is what separates a mark from
		   decoration. */
		cursor: help;
	}

	/*
	 * HOVERABLE (SC 1.4.13): the sentence is revealed INSIDE the badge, so the
	 * pointer never crosses a dead strip on its way from the disc to the text
	 * and :hover cannot drop mid-read. F95 avoided structurally rather than
	 * bridged with a transparent pseudo-element.
	 *
	 * :focus-visible as an ANCESTOR, not :focus-within or :has() on the host. A
	 * linked card renders as <a><span class="kit-wrap"><img><span
	 * class="kit-badge">, so the focusable element sits ABOVE the host, not
	 * inside it -- both of those would never fire. Only :focus-visible, so a
	 * mouse click on a link does not leave the sentence hanging open afterwards.
	 *
	 * :not([data-kit-tip]) is the Escape guard (assets/js/frontend.js). Written
	 * as a guard rather than as a later override, so the script needs neither
	 * !important nor a specificity contest.
	 *
	 * PERSISTENT (SC 1.4.13): no transition, no animation, no timer anywhere in
	 * this block. Nothing may end without a user action, and the Commission's
	 * guidance wants the label readable for as long as the reader needs it.
	 */
	/*
	 * OPENED STATE: the plaque comes back, because now there is a sentence and a
	 * sentence needs a backdrop. --kit-icon-bg is the gated, opaque tone, so the
	 * text sits on exactly the surface KIT_Contrast already approved -- the closed
	 * state is the only place that trades the gate for the measurement above.
	 * The disc keeps its filter; over an opaque plaque the halo is invisible and
	 * the soft shadow just seats the mark, so nothing has to be unset.
	 */
	.kit-badge--tip:not([data-kit-tip]):hover,
	:focus-visible .kit-badge--tip:not([data-kit-tip]) {
		background: var(--kit-icon-bg, rgba(17, 17, 17, 1));
		box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
		padding: .3em .55em;
	}

	.kit-badge--tip:not([data-kit-tip]):hover .kit-badge__sr,
	:focus-visible .kit-badge--tip:not([data-kit-tip]) .kit-badge__sr {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
		clip-path: none;

		/*
		 * .kit-sr-only pins white-space:nowrap. The print and forced-colours
		 * resets can leave that alone because they only ever restore a two-word
		 * label; a whole sentence that cannot wrap runs straight past the badge's
		 * width and is cut off by the theme's overflow:hidden. This one
		 * declaration is the difference between readable and clipped.
		 */
		white-space: normal;

		/* A sentence, not a label: 600 at 13px with letter-spacing is a wall. */
		font-weight: 400;
		letter-spacing: 0;
		line-height: 1.35;
	}
}

/* ------------------------------------------------- print and forced colours */

/*
 * Both of these MUST bring the wording back. A printed page or a high-contrast
 * rendering that shows the icon and no text carries no disclosure at all.
 *
 * Selectors are doubled (.kit-badge.kit-badge, 0-2-0) so they outrank theme
 * rules -- and, critically, so they still outrank the coloured .kit-badge rule
 * above. Without the doubling a white-on-white custom badge would print blank.
 */
@media print {
	.kit-badge.kit-badge {
		position: static !important;
		transform: none !important;
		display: inline-flex !important;
		background: none !important;
		color: #000 !important;
		box-shadow: none !important;
		max-width: 100% !important;
	}
	.kit-badge.kit-badge .kit-badge__text.kit-sr-only {
		position: static !important;
		width: auto !important;
		height: auto !important;
		margin: 0 !important;
		overflow: visible !important;
		clip: auto !important;
		clip-path: none !important;
	}

	/*
	 * The opened pill is an interaction layer, and paper has no interactions.
	 * The wording itself already came back through .kit-badge__text above, so
	 * this removes a duplicate, not the disclosure. Belt and braces: the reveal
	 * is already fenced behind (hover: hover), but the hover media feature is not
	 * uniformly specified for print and a disclosure must not be left to luck.
	 * Doubled selector for the same reason as its neighbours.
	 */
	.kit-badge.kit-badge .kit-badge__sr {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		margin: -1px !important;
		padding: 0 !important;
		overflow: hidden !important;
		clip: rect(0 0 0 0) !important;
		clip-path: inset(50%) !important;
	}

	.kit-panel { display: none !important; }
}

@media (forced-colors: active) {
	.kit-badge.kit-badge {
		background: Canvas !important;
		color: CanvasText !important;
		border: 1px solid CanvasText;
		forced-color-adjust: none;
	}
	.kit-badge.kit-badge .kit-badge__text.kit-sr-only {
		position: static !important;
		width: auto !important;
		height: auto !important;
		margin: 0 !important;
		overflow: visible !important;
		clip: auto !important;
		clip-path: none !important;
	}
	/* Chromium forces SVG fills to the system palette, collapsing the two-tone
	   mark into a single blob. Text alone is the reliable disclosure here. */
	.kit-badge.kit-badge .kit-icon { display: none !important; }
}

/*
 * Touch devices. As of 0.9.0 one thing here IS hover-dependent -- the second
 * layer on .kit-badge--tip -- which turns this rule from generous into
 * load-bearing: without hover there is nothing to open it with, so the wording
 * has to be on screen from the start. A bare disc with no reachable explanation
 * is "offer OFF, never offer FAKE-ON" in its purest form.
 *
 * ANY-POINTER, not (hover: none) and (pointer: coarse). The old query asks about
 * the PRIMARY input device, so a touch notebook or a Surface -- mouse primary,
 * finger available -- fell between the two blocks: it got the hover layer it
 * cannot open with a finger, and not the wording. any-pointer asks whether the
 * device has a coarse pointer AT ALL, which is the question that actually
 * matters here. A hybrid now gets both: wording on screen, tooltip for the mouse.
 *
 * A coarse pointer also means a hand covering part of the screen, which was the
 * original reason for this rule and still holds.
 *
 * The selector stays keyed on --iconic rather than on --tip on purpose: bringing
 * the wording back must never depend on the kit_badge_tooltip filter. Switching
 * the tooltip off must lose the tooltip, not the phone's disclosure.
 *
 * PRACTICAL CONSEQUENCE, and the operator has to be told before switching: with
 * badge_display = icon_only a phone still shows "mark + wording". The setting is
 * not broken; this is the deliberate fallback.
 */
@media (any-pointer: coarse) {
	/*
	 * DEFAULT ON TOUCH: the wording stays on screen. No hover exists here, so
	 * without this the mark would carry no reachable explanation at all.
	 *
	 * :not([data-kit-tap]) is the opt-out. assets/js/frontend.js stamps that
	 * attribute only onto badges it has made tappable, and only onto those it may
	 * safely make tappable (see below). Written as a guard rather than a later
	 * override so the no-JS path is the SAFE path: if the script never runs, the
	 * attribute never appears and every badge keeps its permanent wording.
	 */
	.kit-badge--iconic:not(.kit-badge--worded):not([data-kit-tap]) .kit-badge__text.kit-sr-only {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
		clip-path: none;
	}

	/*
	 * Re-asserted, not merely inherited, and doubled (0-2-0) so it wins over the
	 * fine-pointer grant regardless of source order. The invariant stands: on a
	 * device that can be touched, a badge is not a target -- a first tap that only
	 * opens a tooltip and eats the tap meant for the image is the failure the
	 * pointer-events rule at the top of this file exists for, and a hybrid device
	 * matches BOTH queries.
	 *
	 * The ONE exception is the tap variant, and it is narrow by construction: the
	 * script grants it only to a badge that is NOT inside a link, so there is no
	 * navigation for the tap to swallow. Everything else on a coarse pointer stays
	 * untouchable.
	 */
	.kit-badge.kit-badge { pointer-events: none; }
	.kit-badge.kit-badge[data-kit-tap] { pointer-events: auto; cursor: pointer; }

	/*
	 * Tap variant, closed: mark alone, exactly as on the desktop. Opened: the
	 * plaque and the sentence, driven by data-kit-open from the script. Same two
	 * states as :hover produces, so the two paths cannot drift apart visually.
	 */
	.kit-badge--tip[data-kit-tap][data-kit-open] {
		background: var(--kit-icon-bg, rgba(17, 17, 17, 1));
		box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
		padding: .3em .55em;
	}

	.kit-badge--tip[data-kit-tap][data-kit-open] .kit-badge__sr {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
		clip-path: none;
		white-space: normal;
		font-weight: 400;
		letter-spacing: 0;
		line-height: 1.35;
	}
}

/* ------------------------------------------------------------------ panel */

.kit-panel {
	position: fixed;
	inset-inline-end: 1rem;
	bottom: 1rem;
	z-index: 99990;
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.kit-panel__trigger {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: .55em .8em;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 999px;
	background: #111;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
}

.kit-panel__count {
	display: inline-block;
	min-width: 1.5em;
	padding: 0 .35em;
	border-radius: 999px;
	background: rgba(255, 255, 255, .18);
	text-align: center;
}

.kit-panel__dialog {
	position: absolute;
	inset-inline-end: 0;
	bottom: calc(100% + .6rem);
	width: min(24rem, calc(100vw - 2rem));
	max-height: min(28rem, 70vh);
	overflow-y: auto;
	padding: 1rem;
	border-radius: 10px;
	background: #fff;
	color: #111;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
}

.kit-panel__dialog[hidden] { display: none; }

.kit-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.kit-panel__head h2 { margin: 0; font-size: 15px; }
.kit-panel__close { border: 0; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: inherit; }
.kit-panel__intro { margin: .5rem 0 .75rem; font-size: 13px; }
.kit-panel__list { margin: 0; padding: 0; list-style: none; }

.kit-panel__item {
	display: flex;
	gap: .6rem;
	align-items: center;
	padding: .5rem 0;
	border-top: 1px solid rgba(0, 0, 0, .08);
}

.kit-panel__item img { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; flex: 0 0 auto; }
.kit-panel__meta { display: flex; flex-direction: column; font-size: 12px; min-width: 0; }
.kit-panel__meta span { color: #555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-panel__legal { margin: .75rem 0 0; font-size: 11px; color: #666; }

/* ------------------------------------------------------------ site notice */

/* Hintergrund, Textfarbe und Schrift sind ueber die Einstellungen steuerbar.
   Ohne gesetzte Variable greift jeweils der Fallback -- also transparent,
   geerbte Textfarbe und der Systemstack wie bisher. Wird eine Hintergrundfarbe
   gesetzt, faellt die pauschale Abdunklung per opacity weg: Auf einer eigenen
   Flaeche ist sie nicht mehr Zurueckhaltung, sondern nur noch schlechterer
   Kontrast. */
.kit-site-notice {
	padding: 1rem;
	font-family: var(--kit-notice-font, system-ui, -apple-system, "Segoe UI", sans-serif);
	font-size: 13px;
	text-align: center;
	background: var(--kit-notice-bg, transparent);
	color: var(--kit-notice-fg, inherit);
	opacity: .85;
}

/* Die Variable steht auf :root, ist am Element also nicht abfragbar -- die
   Klasse setzt deshalb PHP, wenn eine Hintergrundfarbe hinterlegt ist. */
.kit-site-notice--flaeche { opacity: 1; }

.kit-site-notice p { margin: 0 0 .25rem; }
.kit-site-notice__legal { font-size: 11px; opacity: .8; }