/* ==========================================================================
   fussballkrisen.de – gemeinsame Grundlagen aller Blöcke
   Stil-Tokens, Container, Kicker, Knöpfe, Instrumenten-Flächen, Abschnitte,
   Einblendungen, Pause-Knopf. Lädt im Frontend und im Editor.
   ========================================================================== */

/* Stil-Tokens. Die Werte kommen aus theme.json (Stil „Dunkel“) bzw. styles/klinisch.json
   (Stil „Klinisch“) als --wp--custom--*; der zweite Wert ist der Rückfall „Dunkel“, falls das
   Theme fehlt. Bedeutung und Regeln: STIL.md. Block-Stile nutzen nur diese Namen, keine festen Farben. */
:root {
	/* Marke – in beiden Stilen gleich */
	--navy: var(--wp--preset--color--navy, #13233f);
	--gruen: var(--wp--preset--color--gruen, #1e7a4f);
	--grau: var(--wp--preset--color--grau, #5a6474);
	--weiss: #ffffff; /* nur, wo Weiß in beiden Stilen Weiß bleibt (Text auf Navy- oder Grün-Füllung) */

	/* Fläche: helle Abschnitte, Karten, Lesetext */
	--flaeche: var(--wp--custom--flaeche, #f4f2ec);
	--flaeche-alt: var(--wp--custom--flaeche-alt, #ffffff);
	--flaeche-tief: var(--wp--custom--flaeche-tief, #ebe7dc);
	--karte: var(--wp--custom--karte, #ffffff);
	--titel: var(--wp--custom--titel, #121c2c);
	--text: var(--wp--custom--text, #253045);
	--text-leise: var(--wp--custom--text-leise, #5a6474);
	--linie: var(--wp--custom--linie, rgba(19, 35, 63, 0.12));
	--linie-stark: var(--wp--custom--linie-stark, rgba(19, 35, 63, 0.22));
	--akzent: var(--wp--custom--akzent, #1e7a4f);
	--auf-akzent: var(--wp--custom--auf-akzent, #050c18);

	/* Bühne: im Stil „Dunkel“ die dunklen Instrumentenflächen, im Stil „Klinisch“ hell */
	--buehne: var(--wp--custom--buehne, #08121f);
	--buehne-tief: var(--wp--custom--buehne-tief, #050c18);
	--buehne-hoch: var(--wp--custom--buehne-hoch, #0b1828);
	--buehne-hoeher: var(--wp--custom--buehne-hoeher, #102036);
	--buehne-kante: var(--wp--custom--buehne-kante, #1a2f4d);
	--buehne-titel: var(--wp--custom--buehne-titel, #ffffff);
	--buehne-text: var(--wp--custom--buehne-text, #dfe6f0);
	--buehne-leise: var(--wp--custom--buehne-leise, #8fa3c2);
	--buehne-gedaempft: var(--wp--custom--buehne-gedaempft, #3a5580);
	--buehne-linie: var(--wp--custom--buehne-linie, rgba(143, 163, 194, 0.16));
	--buehne-akzent: var(--wp--custom--buehne-akzent, #3ddc97);
	--buehne-quelle: var(--wp--custom--buehne-quelle, #7189ad);  /* Quellen, Kleingedrucktes, lesbar (AA) */
	--buehne-schein: var(--wp--custom--buehne-schein, #0f2440);  /* Lichthof in Bühnen-Verläufen */
	--buehne-chip: var(--wp--custom--buehne-chip, rgba(5, 12, 24, 0.35)); /* Grund kleiner Pillen auf der Bühne */
	--bild-grund: var(--wp--custom--bild-grund, #102036);         /* Grund hinter Beitragsbildern, solange sie laden */
	--glas: var(--wp--custom--glas, linear-gradient(180deg, rgba(16, 32, 54, 0.85), rgba(11, 24, 40, 0.85)));
	--glas-schatten: var(--wp--custom--glas-schatten, inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 30px 60px -30px rgba(0, 0, 0, 0.6));
	--glimmen: var(--wp--custom--glimmen, rgba(61, 220, 151, 0.55));
	--schatten-tief: var(--wp--custom--schatten-tief, 0 30px 60px -30px rgba(0, 0, 0, 0.6));
	--hover-flaeche: var(--wp--custom--hover-flaeche, #f7f6f1); /* Zeile/Feld unter dem Mauszeiger auf Fläche */

	/* Bedeutung */
	--warnung: var(--wp--custom--warnung, #f0a43a);
	--warnung-text: var(--wp--custom--warnung-text, #f0a43a);
	--auf-warnung: var(--wp--custom--auf-warnung, #050c18); /* Text auf einer Bernstein-Füllung */
	--hinweis: var(--wp--custom--hinweis, #b06d12);   /* Warnhinweis als Text auf hellem Grund (Editor) */
	/* Pfeil der Auswahlfelder im Krisenradar (eine Grafik kann keine Variable enthalten, daher das ganze Bild) */
	--auswahl-pfeil: var(--wp--custom--auswahl-pfeil, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%233ddc97' stroke-width='1.6'/%3E%3C/svg%3E"));
	--team: var(--wp--custom--team, #9dbbe3);
	--team-tief: var(--wp--custom--team-tief, #7fa6d9);

	/* Kopf- und Fußzeile, Logo */
	--kopf-glas: var(--wp--custom--kopf-glas, rgba(8, 18, 31, 0.82));
	--kopf-menue: var(--wp--custom--kopf-menue, rgba(8, 18, 31, 0.98));
	--fuss: var(--wp--custom--fuss, #050c18);
	--fuss-text: var(--wp--custom--fuss-text, #8fa3c2);
	--fuss-link: var(--wp--custom--fuss-link, #dfe6f0);
	--fuss-titel: var(--wp--custom--fuss-titel, #3a5580);
	--fuss-linie: var(--wp--custom--fuss-linie, rgba(143, 163, 194, 0.16));
	--fuss-akzent: var(--wp--custom--fuss-akzent, #3ddc97);
	--marke-punkt: var(--wp--custom--marke-punkt, #ffffff);
	--marke-akzent: var(--wp--custom--marke-akzent, #3ddc97);

	/* Schrift. Die *-mass-Werte sind Faktoren: im Stil „Dunkel“ 1, damit bleibt dort alles wie gebaut. */
	--schrift-titel: var(--wp--preset--font-family--titel, 'Archivo', 'Arial Narrow', sans-serif);
	--schrift-text: var(--wp--preset--font-family--text, 'Source Serif 4', Georgia, serif);
	--schrift-daten: var(--wp--preset--font-family--daten, 'IBM Plex Mono', ui-monospace, Consolas, monospace);
	--titel-mass: var(--wp--custom--titel-mass, 1);       /* Größe sehr großer Titel */
	--gewicht-mass: var(--wp--custom--gewicht-mass, 1);   /* Stärke von Titeln und Titel-Schrift */
	--etikett-schrift: var(--wp--custom--etikett-schrift, var(--schrift-daten)); /* Kicker, Etiketten */
	--etikett-mass: var(--wp--custom--etikett-mass, 1);   /* Größe von Etiketten */
	--versalien: var(--wp--custom--versalien, uppercase); /* Etiketten in Großbuchstaben? */
	--sperrung: var(--wp--custom--sperrung, 1);           /* Faktor für Buchstabenabstand von Etiketten */
	--etikett-strich: var(--wp--custom--etikett-strich, ''); /* Strich vor dem Kicker ('' = ja, none = nein) */
	--fs-mini: 0.75rem;
	--fs-lead: clamp(1.15rem, 0.9rem + 0.7vw, 1.4rem);

	/* Schmuck */
	--raster-deckkraft: var(--wp--custom--raster-deckkraft, 0.55);
	--schmuck: var(--wp--custom--schmuck, 1); /* Faktor für Schein, Raster, Glühen – nur auf der dunklen Bühne sinnvoll */
	--puls: var(--wp--custom--puls, fk-puls);
	--schatten-karte: var(--wp--custom--schatten-karte, none);

	/* Einzelfälle (STIL.md, Abschnitt „Einzelfälle“) */
	--warnung-linie: var(--wp--custom--warnung-linie, #f0a43a);   /* Bernstein als Linie/Fokus im Modell */
	--wirbel-schmal: var(--wp--custom--wirbel-schmal, 0.85);      /* Deckkraft des Wirbels hinter Text auf schmalen Schirmen */
	--ring-rest: var(--wp--custom--ring-rest, #3a5580);           /* Restbogen der Kennzahl-Ringe */
	--knopf-grund: var(--wp--custom--knopf-grund, rgba(5, 12, 24, 0.5));  /* Pause-Knopf über Animationen */
	--buehne-pille: var(--wp--custom--buehne-pille, transparent); /* Grund von Menüknopf und Datenstand in der Kopfzeile */
	--zitat-grund: var(--wp--custom--zitat-grund, #ffffff);
	--sortiert: var(--wp--custom--sortiert, #ff9da5);             /* aktive Sortierspalte im Krisenradar */
	--hilfe-text: var(--wp--custom--hilfe-text, #e4ebf4);         /* Text der Hilfe-Popups im Krisenradar */
	--strich-art: var(--wp--custom--strich-art, dashed);          /* Rahmen von Hinweisen im Editor */
	--platzhalter-deckkraft: var(--wp--custom--platzhalter-deckkraft, 0.62); /* leere Felder im Editor */
	--feld-kante: var(--wp--custom--feld-kante, rgba(19, 35, 63, 0.54));     /* Rand von Eingabefeldern (≥ 3 : 1) */

	/* Abstände */
	--s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
	--s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 7rem;
	--rand: clamp(1rem, 4vw, 3rem);
	--breite: 78rem;

	--radius-s: 4px;
	--radius-m: 8px;
	--radius-l: 14px;
	--bewegung: cubic-bezier(0.22, 1, 0.36, 1);
	--header-hoehe: 4.25rem;
}

/* Container innerhalb vollbreiter Blöcke */
.fk-inhalt { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }
.fk-inhalt--breit { width: min(100% - 2 * var(--rand), 90rem); margin-inline: auto; }

/* Vollbreite Abschnitte (jeder große Block ist einer) */
.fk-sektion { position: relative; padding-block: var(--s-9); }
.fk-sektion--papier { background: var(--flaeche); color: var(--text); }
.fk-sektion--weiss { background: var(--flaeche-alt); color: var(--text); }
.fk-sektion--dunkel { background: var(--buehne); color: var(--buehne-text); }
.fk-sektion--dunkel :is(h1, h2, h3, h4) { color: var(--buehne-titel); }
.fk-sektion--raster::before {
	/* feines Messraster */
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background-image: linear-gradient(var(--buehne-linie) 1px, transparent 1px), linear-gradient(90deg, var(--buehne-linie) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 100%);
	opacity: var(--raster-deckkraft);
}
.fk-sektion--ohne-oben { padding-top: 0; }

/* Kopf eines Abschnitts: Kicker + Überschrift links, Text rechts */
.fk-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-5) var(--s-7); align-items: end; margin-bottom: var(--s-7); }
.fk-kopf h2 { margin: 0; max-width: 18ch; font-size: calc(clamp(2rem, 1.3rem + 2.4vw, 3.4rem) * var(--titel-mass)); font-stretch: 110%; letter-spacing: -0.03em; line-height: 1.04; }
.fk-kopf > p, .fk-kopf > .fk-kopf__text { margin: 0; max-width: 32rem; }
@media (max-width: 52rem) { .fk-kopf { grid-template-columns: 1fr; } }

/* Kicker: Datenlabel über Überschriften */
.fk-kicker {
	display: inline-flex; align-items: center; gap: .65rem;
	font-family: var(--etikett-schrift); font-size: calc(var(--fs-mini) * var(--etikett-mass)); font-weight: 500;
	letter-spacing: calc(.14em * var(--sperrung)); text-transform: var(--versalien); color: var(--akzent);
	margin: 0 0 var(--s-4);
}
.fk-kicker::before { content: var(--etikett-strich); width: 1.6rem; height: 1px; background: currentColor; flex: 0 0 auto; }
.fk-sektion--dunkel .fk-kicker, .fk-dunkel .fk-kicker { color: var(--buehne-akzent); }
.fk-kicker__nr { color: var(--text-leise); }
.fk-sektion--dunkel .fk-kicker__nr { color: var(--buehne-leise); }
.fk-sektion--dunkel :where(p, li) { color: var(--buehne-text); }
.fk-sektion--dunkel :where(a:not(.fk-knopf)) { color: var(--buehne-akzent); }

.fk-lead { font-size: var(--fs-lead); line-height: 1.5; max-width: 40rem; }
.fk-sektion--dunkel .fk-lead { color: var(--buehne-text); }

/* Knöpfe */
.fk-knopf {
	--k-farbe: var(--buehne-akzent);
	display: inline-flex; align-items: center; gap: .7rem;
	padding: .85rem 1.35rem;
	font-family: var(--schrift-titel); font-weight: calc(650 * var(--gewicht-mass)); font-size: .95rem; font-stretch: 105%; letter-spacing: .01em; line-height: 1.2;
	color: var(--auf-akzent); background: var(--k-farbe); border: 1px solid var(--k-farbe); border-radius: var(--radius-s);
	text-decoration: none; cursor: pointer;
	transition: transform .35s var(--bewegung), box-shadow .35s var(--bewegung), background .2s;
}
.fk-knopf:hover, .fk-knopf:focus-visible { color: var(--auf-akzent); transform: translateY(-2px); box-shadow: 0 10px 30px -10px var(--glimmen); }
.fk-knopf__pfeil { transition: transform .35s var(--bewegung); }
.fk-knopf:hover .fk-knopf__pfeil { transform: translateX(4px); }
.fk-knopf--geist { background: transparent; color: var(--buehne-titel); border-color: color-mix(in srgb, var(--buehne-text) 35%, transparent); }
.fk-knopf--geist:hover, .fk-knopf--geist:focus-visible { color: var(--buehne-titel); border-color: var(--buehne-titel); box-shadow: none; background: color-mix(in srgb, var(--buehne-titel) 4%, transparent); }
.fk-knopf--hell { --k-farbe: var(--navy); color: var(--weiss); }
.fk-knopf--hell:hover { color: var(--weiss); box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--navy) 60%, transparent); }
.fk-knopfreihe { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.fk-textlink {
	font-family: var(--schrift-titel); font-weight: calc(650 * var(--gewicht-mass)); font-size: .95rem;
	color: var(--akzent); text-decoration: none; display: inline-flex; gap: .5rem; align-items: center;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .4s var(--bewegung);
}
.fk-textlink:hover { background-size: 100% 1px; }
.fk-sektion--dunkel .fk-textlink { color: var(--buehne-akzent); }

/* Instrumenten-Fläche (Glas-Karte auf der Bühne; im Stil „Klinisch“ weiße Karte mit Haarlinie) */
.fk-instrument {
	background: var(--glas);
	border: 1px solid var(--buehne-linie); border-radius: var(--radius-l);
	box-shadow: var(--glas-schatten);
	position: relative; overflow: hidden; color: var(--buehne-text);
}
.fk-instrument__kopf { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--buehne-linie); font-family: var(--etikett-schrift); font-size: calc(.72rem * var(--etikett-mass)); letter-spacing: calc(.08em * var(--sperrung)); text-transform: var(--versalien); color: var(--buehne-leise); }
.fk-instrument__kopf b { color: var(--buehne-titel); font-weight: 500; }
.fk-instrument__fuss { padding: var(--s-3) var(--s-5); font-family: var(--etikett-schrift); font-size: calc(.66rem * var(--etikett-mass)); color: var(--buehne-gedaempft); border-top: 1px solid var(--buehne-linie); display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
@media (max-width: 40rem) { .fk-instrument__kopf { flex-direction: column; align-items: flex-start; gap: .3rem; } }

.fk-marke-neu { display: inline-block; font-family: var(--etikett-schrift); font-size: calc(.62rem * var(--etikett-mass)); letter-spacing: calc(.1em * var(--sperrung)); text-transform: var(--versalien); color: var(--auf-akzent); background: var(--buehne-akzent); padding: .12rem .4rem; border-radius: 3px; margin-left: .5rem; vertical-align: .2em; }

/* Einblenden beim Laden (gestaffelt) */
.fk-einblenden { animation: fk-einblenden 1s var(--bewegung) both; animation-delay: calc(var(--i, 0) * 110ms + 150ms); }
@keyframes fk-einblenden { from { opacity: 0; transform: translateY(18px); } }
/* Kicker, Titel und Startzeile der Seitenköpfe sind vom ersten Bild an zu lesen und blenden nur halb
   ein: Google misst die Ladezeit (LCP) an diesem größten Text, und aus Deckkraft 0 zählte er auf dem
   Handy erst rund eine Sekunde später (SEO-Analyse 30.10.2026). */
.fk-einblenden--sofort { animation-name: fk-einblenden-halb; }
@keyframes fk-einblenden-halb { from { opacity: .5; transform: translateY(18px); } }

/* Einblenden beim Scrollen – nur im Frontend mit JavaScript (Klasse fk-js am <html>),
   im Editor und ohne JavaScript bleibt alles sichtbar */
.fk-js [data-zeigen]:not(.ist-sichtbar) { opacity: 0; transform: translateY(28px); }
.fk-js [data-zeigen] { transition: opacity .9s var(--bewegung), transform .9s var(--bewegung); transition-delay: calc(var(--i, 0) * 90ms); }

/* Pause für Endlos-Animationen (WCAG 2.2.2): Ein Klick auf die Animation hält an (grundlagen.js,
   .fk-bewegung-flaeche). Der Knopf ist dafür nicht zu sehen – nur mit Tastaturfokus; Bildschirmleser
   finden ihn immer. Die Rückmeldung nach dem Klick ist nicht der Knopf, sondern .fk-bewegung-meldung. */
.fk-bewegung-knopf {
	position: absolute; right: var(--rand); top: calc(var(--header-hoehe) + 1rem); z-index: 3;
	display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
	font-family: var(--etikett-schrift); font-size: calc(.68rem * var(--etikett-mass)); letter-spacing: calc(.08em * var(--sperrung)); text-transform: var(--versalien);
	color: var(--buehne-leise); background: var(--knopf-grund); border: 1px solid var(--buehne-linie); border-radius: 99px; padding: .4rem .7rem;
	backdrop-filter: blur(6px);
	transition: opacity .3s;
}
.fk-bewegung-knopf:not(:focus-visible) { opacity: 0; pointer-events: none; }
/* Hand-Zeiger nur, wo ein Klick wirklich anhält: Bei „Bewegung reduzieren“ läuft nichts, und Klicks tun nichts */
@media (prefers-reduced-motion: no-preference) { .fk-bewegung-flaeche { cursor: pointer; } }
.fk-bewegung-flaeche :is(p, h1, h2, h3, h4, li, dt, dd, figcaption, blockquote, input, select, textarea, label) { cursor: auto; }
.fk-bewegung-knopf:hover { color: var(--buehne-titel); border-color: var(--buehne-leise); }
.fk-bewegung-knopf i { display: inline-flex; gap: 2px; }
.fk-bewegung-knopf i::before, .fk-bewegung-knopf i::after { content: ''; width: 3px; height: 9px; background: currentColor; }
.fk-bewegung-knopf[aria-pressed='true'] i::after { display: none; }
.fk-bewegung-knopf[aria-pressed='true'] i::before { width: 0; height: 0; background: none; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
/* Rückmeldung nach dem Klick auf eine Animation (grundlagen.js): kurz an der Klickstelle der Zustand, der
   gerade gesetzt wurde – Pausenstriche und „Angehalten“, Dreieck und „Läuft wieder“. Kein Bedienelement
   (pointer-events: none) und nie als Symbol am Rand, damit sie sich nicht als „weiter“ oder „mehr“ liest.
   Ein- und Ausblenden als Übergang, nicht als Animation: Die hält .fk-bewegung-aus gerade an. */
.fk-bewegung-meldung {
	position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none;
	display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; line-height: 1.4;
	font-family: var(--etikett-schrift); font-size: calc(.68rem * var(--etikett-mass)); letter-spacing: calc(.08em * var(--sperrung)); text-transform: var(--versalien);
	color: var(--buehne-titel); background: var(--knopf-grund); border: 1px solid var(--buehne-linie); border-radius: 99px; padding: .4rem .7rem;
	box-shadow: var(--schatten-karte); backdrop-filter: blur(6px);
	opacity: 0; transition: opacity .35s;
}
.fk-bewegung-meldung.ist-sichtbar { opacity: 1; transition-duration: .12s; }
.fk-bewegung-meldung::before { content: ''; flex: none; width: 0; height: 0; border-left: 8px solid currentColor; border-block: 5px solid transparent; }
.fk-bewegung-meldung.ist-aus::before { width: 2px; height: 9px; border: 0 solid currentColor; border-inline-width: 3px; }
/* Auch Pseudo-Elemente: Der helle Strich des „Weiter“-Hinweises im Hero läuft auf i::after und lief sonst weiter */
.fk-bewegung-aus *, .fk-bewegung-aus *::before, .fk-bewegung-aus *::after { animation-play-state: paused !important; }
.fk-bewegung-aus .fk-einblenden { animation-play-state: running !important; }

.fk-puls { width: .45rem; height: .45rem; border-radius: 50%; background: var(--buehne-akzent); animation: var(--puls) 2.2s infinite; }
@keyframes fk-puls {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--buehne-akzent) 55%, transparent); }
	70% { box-shadow: 0 0 0 .55rem color-mix(in srgb, var(--buehne-akzent) 0%, transparent); }
	100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--buehne-akzent) 0%, transparent); }
}

.fk-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Platzhalter, solange Live-Daten laden */
.fk-platzhalter { background: linear-gradient(110deg, var(--flaeche-tief) 30%, color-mix(in srgb, var(--flaeche) 75%, #fff) 50%, var(--flaeche-tief) 70%) 0 0 / 300% 100%; animation: fk-schimmer 1.6s linear infinite; border-radius: var(--radius-l); min-height: 16rem; }
@keyframes fk-schimmer { to { background-position: -150% 0; } }

@media (prefers-reduced-motion: reduce) {
	.fk-einblenden, .fk-js [data-zeigen] { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
	.fk-puls, .fk-platzhalter { animation: none; }
	.fk-bewegung-knopf, .fk-bewegung-meldung { display: none; }
}

/* Vollbreite Abschnitte schließen ohne Lücke aneinander an (WordPress gibt Blöcken sonst 1rem Abstand) */
.fk-sektion.alignfull { margin-block: 0; }

/* Editor-Seitenleiste: Linkfelder (fkEditor.Link) nicht breiter als die Leiste (WordPress setzt 300 px) */
.fk-editor-link .block-editor-url-input, .fk-editor-link .block-editor-url-input input { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }

/* Editor: Platzhalter leerer Felder (WordPress setzt .62; im Stil „Klinisch“ sonst zu blass) */
.editor-styles-wrapper [data-rich-text-placeholder]::after { opacity: var(--platzhalter-deckkraft); }