/* ═══════════════════════════════════════════════════════════════════════════
   KW Atelier – Bild-Widget (kwat_image, Phase 16)

   Zwei Darstellungen aus EINEM Markup, Entwürfe mockups/bild-widget{,-2}.html:
   · kwat-im--mount „Der Abzug"  – Foto auf Karton, Beschriftung UNTER dem Bild
   · kwat-im--label „Das Etikett" – randloses Foto, Beschriftung IM Bild auf
     einer DECKENDEN Fläche (Alpha 1) – der Kontrast hängt nie am Motiv

   Tokens: --kwat-im-* (NICHT --kwat-img-*, das ist die geteilte Bild-Utility
   in shared.css). Reines CSS, kein JS – die Lightbox ist die geteilte.
   ═══════════════════════════════════════════════════════════════════════════ */

.kwat-im {
	/* Karton (Abzug): warmes Papier, damit die Schrift darauf nicht am Motiv hängt. */
	--kwat-im-mount: #e9e3d7;
	/* Etikett (Etikett-Stil): heller Zettel bzw. dunkles Markenfeld. */
	--kwat-im-paper: #efe9dc;
	--kwat-im-dark: #14171a;
	--kwat-im-ink: #272320;
	--kwat-im-ink-soft: #5c5348;
	/* Gold auf hellem Papier nachgedunkelt – das Marken-Gold käme dort auf ~2:1. */
	--kwat-im-accent: #7a5c18;
	--kwat-im-inset: clamp(0.75rem, 2cqi, 1.25rem);

	container-type: inline-size;
	position: relative;
	margin-block: 0;
	/* Ausrichtung über die eigene Property statt über eine von Elementor direkt
	   gesetzte Eigenschaft: die kam in der Kaskade nicht an (0px statt 340px).
	   Wirkt ohnehin erst mit einer Höchstbreite – sonst ist kein Platz zu verteilen.
	   ⚠️ Im Elementor-Kontext trägt erst die Regel am Dateiende – siehe dort. */
	margin-inline: var(--kwat-im-align, 0 auto);
	/* DREI Deckel, der kleinste gewinnt:
	   1. die eingestellte Höchstbreite – der Rückfall ist die VORAUSWAHL des
	      Controls, weil Elementor `selectors` nicht schreibt, solange der Wert
	      dem Default entspricht; ohne ihn liefe ein unangetastetes Widget wieder
	      über die volle Breite (live gemessen: 1716 × 1144px = 90 % der
	      Fensterhöhe, bei 2:3 sogar 203 %).
	   2. der verfügbare Platz.
	   3. die Breite der Bilddatei – ein Foto wird nie größer dargestellt, als es
	      ist (Auftraggeber 2026-08-04). Die Zahl steht als `data`-Attribut am
	      Markup, nicht als Inline-Style; wo typisiertes `attr()` fehlt, greift
	      der Rückfall 100% und es bleibt bei den ersten beiden Deckeln. */
	max-inline-size: min(
		var(--kwat-im-max, 1024px),
		100%,
		attr(data-kwat-im-w px, 100%)
	);
}

/* ── Bildfenster ──────────────────────────────────────────────────────────── */

.kwat-im__win {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--kwat-color-page);
	/* Bei „Original" ist die Höhe unbestimmt; die 100%-Höhe des Bildes wird dann
	   zu auto und das Foto bringt sein eigenes Format mit. */
	aspect-ratio: var(--kwat-im-ratio, 3 / 2);
}

/* Das width/height-Attribut aus wp_get_attachment_image bestimmt sonst BEIDE
   Achsen und setzt das eingestellte Seitenverhältnis außer Kraft.
   ⚠️ Die Doppel-Klasse ist PFLICHT: Elementor führt eine globale Regel
   `.elementor img { height: auto }` (Spezifität 0,1,1), die eine einfache
   Klasse (0,1,0) schlägt. Ohne sie fiel das Bild auf seine natürliche Höhe
   zurück – live gemessen 1400 × 933px in einem 1400 × 600px-Fenster: das
   eingestellte Seitenverhältnis, der Zuschnitt UND der Bildausschnitt waren
   damit allesamt wirkungslos, weil `object-fit` nur innerhalb der Elementbox
   wirkt. Im Harness ist der Fehler unsichtbar, dort lädt kein Elementor-CSS. */
.kwat-im .kwat-im__img {
	inline-size: 100%;
	block-size: 100%;
}

/* ── Vergrößern ───────────────────────────────────────────────────────────── */

/* Der Untergrund ist ein beliebiges Foto: ein heller Knopf verschwindet auf hellem
   Motiv, ein dunkler auf dunklem. Dunkler Kern MIT hellem Ring hält gegen beide
   Richtungen – WCAG 1.4.11 gilt der GRENZE, nicht nur der Schrift. */
.kwat-im__zoom {
	position: absolute;
	inset-block-start: 0.625rem;
	inset-inline-end: 0.625rem;
	z-index: 3;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	color: #f4f6f8;
	background: #13161a;
	box-shadow:
		0 0 0 2px color-mix(in srgb, #fff 90%, transparent),
		0 2px 10px color-mix(in srgb, #000 60%, transparent);
	transition: transform var(--kwat-duration-fast) var(--kwat-ease-standard);
}

.kwat-im__zoom svg {
	inline-size: 1.25rem;
	block-size: 1.25rem;
}

@media (hover: hover) {
	.kwat-im__win:hover .kwat-im__zoom {
		transform: scale(1.07);
	}
}

.kwat-im__win:focus-visible {
	outline: var(--kwat-focus-width) solid var(--kwat-color-focus);
	outline-offset: var(--kwat-focus-offset);
}

/* ── Beschriftung (Grundzüge, in beiden Darstellungen gleich) ─────────────── */

.kwat-im__cap {
	display: grid;
	gap: 0.1875rem;
	/* Rasterzelle mit langem Text: ohne dies wächst sie über ihre Spalte hinaus. */
	min-inline-size: 0;
}

.kwat-im__label {
	display: grid;
	gap: 0.1875rem;
	min-inline-size: 0;
}

.kwat-im__no {
	font-family: var(--kwat-font-heading);
	font-size: var(--kwat-text-xs);
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--kwat-im-accent);
}

.kwat-im__title {
	font-family: var(--kwat-font-heading);
	font-size: var(--kwat-text-lg);
	font-weight: 700;
	line-height: 1.25;
	color: var(--kwat-im-ink);
	text-wrap: balance;
}

.kwat-im__sub {
	font-family: var(--kwat-font-heading);
	font-style: italic;
	font-size: var(--kwat-text-sm);
	line-height: 1.45;
	color: var(--kwat-im-ink-soft);
}

.kwat-im__credit {
	display: block;
	font-size: var(--kwat-text-xs);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--kwat-im-ink-soft);
}

/* ═══ Darstellung „Der Abzug" ══════════════════════════════════════════════ */

.kwat-im--mount {
	padding: clamp(0.75rem, 1.5cqi, 1.375rem);
	background: var(--kwat-im-mount);
	background-image: radial-gradient(
		120% 80% at 12% 0%,
		color-mix(in srgb, #fff 48%, transparent),
		transparent 62%
	);
	border-radius: 2px;
	box-shadow:
		var(--kwat-shadow-lg),
		inset 0 0 0 1px color-mix(in srgb, #000 8%, transparent);
}

.kwat-im--mount .kwat-im__win {
	box-shadow: 0 0 0 1px color-mix(in srgb, #000 22%, transparent);
}

.kwat-im--mount .kwat-im__cap {
	padding-block: clamp(0.6875rem, 1.3cqi, 1.0625rem) clamp(0.125rem, 0.4cqi, 0.375rem);
	padding-inline: 2px;
	max-inline-size: 62ch;
}

/* Die Beschriftung lässt der Figur ihre Ecke frei. Ohne das wächst sie schmal
   in sie hinein – gemessen bei 390px: 32 × 23px über dem Bildnachweis, ohne
   Karton sogar über der Zusatzzeile. `:has()`, damit ohne Figur kein Leerraum
   stehenbleibt. */
.kwat-im--mount:has(.kwat-im__mascot) .kwat-im__cap {
	padding-inline-end: calc(var(--kwat-im-figure) + clamp(1.25rem, 2.8cqi, 2.5rem));
}

.kwat-im--mount .kwat-im__credit {
	margin-block-start: 0.375rem;
}

/* Zicklinde steht in der unteren Ecke des Kartons – in voller Farbe, wie beim
   Etikett (Auftraggeber 2026-08-10). Der frühere Blindstempel (entsättigt,
   30 % Deckkraft, `mix-blend-mode: multiply`) ist entfallen: gewollt war eine
   Prägung, angekommen ist eine halb verschwundene Figur.
   Die Breite steht als Token, weil die Beschriftung sie kennen muss (oben). */
.kwat-im--mount {
	--kwat-im-figure: clamp(2.875rem, 5cqi, 4.25rem);
}

.kwat-im--mount .kwat-im__mascot {
	position: absolute;
	inset-inline-end: clamp(0.625rem, 1.4cqi, 1.25rem);
	inset-block-end: clamp(0.5rem, 1cqi, 0.875rem);
	z-index: 1;
	inline-size: var(--kwat-im-figure);
	block-size: auto;
	display: block;
	pointer-events: none;
}

/* Ohne Karton: nur das Bild, die Beschriftung steht auf der dunklen Seite. */
.kwat-im--bare {
	padding: 0;
	background: none;
	box-shadow: var(--kwat-shadow-lg);
}

.kwat-im--bare .kwat-im__cap {
	padding-inline: 0;
}

.kwat-im--bare .kwat-im__title {
	color: var(--kwat-color-text);
}

.kwat-im--bare .kwat-im__sub,
.kwat-im--bare .kwat-im__credit {
	color: var(--kwat-color-text-muted);
}

.kwat-im--bare .kwat-im__no {
	color: var(--kwat-color-accent-hi);
}

/* ═══ Darstellung „Das Etikett" ════════════════════════════════════════════ */

/* Bild und Etikett teilen sich EINE Rasterzelle – kein position: absolute, damit
   ein Bildnachweis darunter im Fluss bleibt und die Figur nicht mitwandert. */
.kwat-im--label {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.625rem;
	isolation: isolate;
}

.kwat-im--label .kwat-im__win {
	grid-area: 1 / 1;
	border-radius: 3px;
	box-shadow: var(--kwat-shadow-lg);
}

.kwat-im--overlay .kwat-im__cap {
	grid-area: 1 / 1;
	z-index: 2;
	margin: var(--kwat-im-inset);
	padding: clamp(0.75rem, 1.4cqi, 1.125rem) clamp(0.875rem, 1.6cqi, 1.375rem);
	inline-size: min(46ch, 100%);
	/* Der Kern: DECKEND. Keine Halbtransparenz, kein Weichzeichner – sonst hängt
	   die Lesbarkeit am Motiv darunter. */
	background: var(--kwat-im-paper);
	color: var(--kwat-im-ink);
	box-shadow: 0 6px 18px color-mix(in srgb, #000 55%, transparent);
	rotate: -0.5deg;
}

/* Gestanzte Ecke – daran erkennt man das Etikett als aufgeklebten Zettel. */
.kwat-im--overlay.kwat-im--paper .kwat-im__cap::after {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;
	inline-size: 1rem;
	block-size: 1rem;
	background: linear-gradient(
		225deg,
		color-mix(in srgb, #000 18%, transparent) 0 50%,
		transparent 50%
	);
}

.kwat-im--overlay .kwat-im__cap {
	position: relative;
}

/* Vier Ecken – gesetzt über die Ausrichtung in der Zelle, nicht über inset. */
.kwat-im--pos-bl .kwat-im__cap {
	align-self: end;
	justify-self: start;
}

.kwat-im--pos-br .kwat-im__cap {
	align-self: end;
	justify-self: end;
}

.kwat-im--pos-tl .kwat-im__cap {
	align-self: start;
	justify-self: start;
}

/* Oben rechts sitzt der Vergrößern-Knopf – das Etikett weicht ihm aus. */
.kwat-im--pos-tr .kwat-im__cap {
	align-self: start;
	justify-self: end;
	margin-inline-end: calc(var(--kwat-im-inset) + 3.25rem);
}

/* Bodenband über die volle Breite – für längere Beschriftungen. */
.kwat-im--pos-band .kwat-im__cap {
	align-self: end;
	justify-self: stretch;
	margin: 0;
	inline-size: auto;
	max-inline-size: none;
	padding: clamp(0.875rem, 1.6cqi, 1.375rem) clamp(1rem, 2cqi, 1.75rem);
	rotate: none;
	box-shadow: none;
}

.kwat-im--pos-band .kwat-im__cap::after {
	display: none;
}

/* Material „Marke" und das Bodenband: dunkles Feld mit Goldlinie oben. */
.kwat-im--overlay.kwat-im--mark .kwat-im__cap,
.kwat-im--overlay.kwat-im--pos-band .kwat-im__cap {
	background: var(--kwat-im-dark);
	color: var(--kwat-color-text);
	border-block-start: 2px solid var(--kwat-color-accent);
	rotate: none;
}

.kwat-im--overlay.kwat-im--mark .kwat-im__cap::after {
	display: none;
}

.kwat-im--overlay.kwat-im--mark .kwat-im__title,
.kwat-im--overlay.kwat-im--pos-band .kwat-im__title {
	color: var(--kwat-color-text);
}

.kwat-im--overlay.kwat-im--mark .kwat-im__no,
.kwat-im--overlay.kwat-im--pos-band .kwat-im__no {
	color: var(--kwat-color-accent-hi);
}

.kwat-im--overlay.kwat-im--mark .kwat-im__sub,
.kwat-im--overlay.kwat-im--pos-band .kwat-im__sub {
	color: var(--kwat-color-text-muted);
}

/* Der Bildnachweis steht beim Etikett unter dem Bild – auf der dunklen Seite. */
.kwat-im--label .kwat-im__credit {
	color: var(--kwat-color-text-muted);
}

/* Zicklinde steht auf der unteren Bildkante, innerhalb des Bildes: was darüber
   hinausragt, kappt der Elementor-Container. */
/* Sie weicht dem Etikett aus: steht das unten RECHTS, geht die Figur nach links.
   Ohne das stand sie auf Titel und Zusatzzeile (live gemessen: 96 × 17px und
   96 × 46px Überdeckung) – ein Fehler, den nur ein Bild zeigt. */
.kwat-im--overlay.kwat-im--pos-br .kwat-im__mascot {
	justify-self: start;
	margin-inline: clamp(0.75rem, 2cqi, 2.125rem) 0;
}

/* Beim Bodenband ist die ganze untere Kante belegt – dort ist kein Platz für sie
   (gemessen: sie überdeckte Kennzeile, Titel UND Zusatzzeile). Wie schmal gilt:
   lieber keine Figur als eine, die den Text verdeckt. */
.kwat-im--overlay.kwat-im--pos-band .kwat-im__mascot {
	display: none;
}

.kwat-im--label .kwat-im__mascot {
	grid-area: 1 / 1;
	align-self: end;
	justify-self: end;
	z-index: 2;
	margin-inline-end: clamp(0.75rem, 2cqi, 2.125rem);
	inline-size: clamp(3.875rem, 7cqi, 6.5rem);
	block-size: auto;
	display: block;
	pointer-events: none;
	filter: drop-shadow(0 6px 14px color-mix(in srgb, #000 68%, transparent));
}

/* ── Schmal ───────────────────────────────────────────────────────────────── */

@container (max-width: 46rem) {
	/* Schmal deckt ein Etikett das Bild zu – bei längerem Text vollständig
	   (gemessen: 21:9 auf 351px Breite, vom Foto blieb nichts übrig). Es rutscht
	   deshalb UNTER das Bild und behält dort Material, Goldlinie und volle Breite;
	   verdeckt wird nichts mehr. Bewusste Abweichung vom Entwurf, der es auch
	   schmal über dem Foto zeigt. */
	.kwat-im--overlay {
		gap: 0;
	}

	.kwat-im--overlay .kwat-im__cap {
		grid-area: auto;
		margin: 0;
		inline-size: auto;
		padding: clamp(0.75rem, 3cqi, 1rem) clamp(0.875rem, 3.4cqi, 1.125rem);
		rotate: none;
		box-shadow: none;
		background: var(--kwat-im-dark);
		color: var(--kwat-color-text);
		border-block-start: 2px solid var(--kwat-color-accent);
	}

	/* Die Ecken-Regeln oben sind spezifischer – ohne dieselben Selektoren bliebe
	   das Etikett auf Inhaltsbreite stehen statt über das Bild zu laufen. */
	.kwat-im--overlay.kwat-im--pos-bl .kwat-im__cap,
	.kwat-im--overlay.kwat-im--pos-br .kwat-im__cap,
	.kwat-im--overlay.kwat-im--pos-tl .kwat-im__cap,
	.kwat-im--overlay.kwat-im--pos-tr .kwat-im__cap {
		align-self: auto;
		justify-self: stretch;
		margin-inline-end: 0;
	}

	.kwat-im--overlay.kwat-im--paper .kwat-im__cap::after {
		display: none;
	}

	.kwat-im--overlay .kwat-im__title {
		color: var(--kwat-color-text);
	}

	.kwat-im--overlay .kwat-im__no {
		color: var(--kwat-color-accent-hi);
	}

	.kwat-im--overlay .kwat-im__sub {
		color: var(--kwat-color-text-muted);
	}

	.kwat-im--overlay .kwat-im__credit {
		margin-block-start: 0.625rem;
	}

	/* Neben dem schmalen Bild bliebe für die Figur kein Platz. */
	.kwat-im--label .kwat-im__mascot {
		display: none;
	}

	.kwat-im__zoom {
		inline-size: 2.5rem;
		block-size: 2.5rem;
	}
}

/* ── Bewegung und Windows-Kontrastmodus ───────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.kwat-im__zoom {
		transition: none;
	}
}

@media (forced-colors: active) {
	/* Flächen und Schatten fallen dort ersatzlos weg – Karton, Etikett und Knopf
	   brauchen eine echte Kante, das Etikett zusätzlich einen deckenden Grund. */
	.kwat-im--mount {
		border: 1px solid;
		box-shadow: none;
	}

	.kwat-im__zoom {
		border: 1px solid;
	}

	.kwat-im--overlay .kwat-im__cap {
		border: 1px solid;
		background: Canvas;
		color: CanvasText;
		rotate: none;
	}

	/* ⚠️ Dieselben Selektoren wie in den Stil-Regeln – ein nacktes
	   `.kwat-im__mascot` (0,1,0) verliert gegen `.kwat-im--mount .kwat-im__mascot`
	   (0,2,0) und die Figur bliebe stehen (gemessen: display blieb `block`). */
	.kwat-im--mount .kwat-im__mascot,
	.kwat-im--label .kwat-im__mascot {
		display: none;
	}
}

/* ── Ausrichtung im Elementor-Kontext (ganz zum Schluss) ──────────────────── */

/* ⛔ Elementor setzt JEDER Figur in einem Widget `margin: 0` – mit dem Selektor
   `.elementor .elementor-widget:not(…):not(…) figure`, Spezifität (0,4,1). Die
   Kurzform überschreibt auch das `margin-inline` der Wurzel oben; die Ausrichtung
   war deshalb folgenlos, egal welche Stufe eingestellt war (live gemessen: 0px
   links wie rechts, das 768px breite Bild klebte in einer 1580px-Spalte am linken
   Rand). Nachweis, dass allein die Kaskade schuld war: dasselbe `margin-inline:
   auto` inline gesetzt ergab sofort 406px auf beiden Seiten.
   Dieselbe Not wie bei der Doppelklasse gegen `.elementor img { height: auto }` –
   nur eine Stufe höher, denn jener Selektor trägt eine Klasse, dieser vier. Die
   Kette misst (0,5,1) und gewinnt damit ohne Verlass auf die Ladereihenfolge. */
.elementor-widget figure.kwat-im.kwat-im.kwat-im.kwat-im {
	margin-inline: var(--kwat-im-align, 0 auto);
}