/* MLD - KI-Redakteur · Front-End-Design der Beitrags-Sonderelemente.
   Nur Klassen (keine Inline-Styles), damit es kses-fest ist. */

/* Fließtext etwas größer & luftiger für bessere Lesbarkeit.
   Wirkt nur auf KI-Beiträgen (das CSS wird ausschließlich dort geladen).
   ÜBERSCHRIFTEN bleiben bewusst unverändert. */
.entry-content p,
.entry-content li,
.entry-content .wp-block-table td,
.entry-content .wp-block-table th,
.wp-block-post-content p,
.wp-block-post-content li,
.wp-block-post-content .wp-block-table td,
.wp-block-post-content .wp-block-table th{
	font-size:1.08em;
	line-height:1.75;
}
/* Ausnahmen: Kopfzeile und Quellenliste bleiben dezent kleiner
   (höhere Spezifität als die Regel oben). */
.entry-content p.mld-kired-meta,
.wp-block-post-content p.mld-kired-meta{ font-size:.82em; }
.entry-content ol.mld-kired-sources li,
.wp-block-post-content ol.mld-kired-sources li{ font-size:inherit; }

/* ---- Das KI-Kennzeichnungs-Icon: ZWEITER RIEGEL (0.99.185) -----------------------------------
   Der erste Riegel ist der Inline-Stil im Renderer (mit !important, schlaegt jede fremde Regel).
   Dieser hier greift, falls ein Plugin den Inline-Stil entfernt — belegt am Live-Beitrag: ein
   fremdes Stylesheet setzt img{display:block} auf JEDES Bild, das Icon bekam dadurch eine eigene
   Zeile und stand ueber statt neben dem Text.
   DOPPELTE KLASSE statt Container-Name: (0,2,0) schlaegt jede einfache Klassen- oder
   Element-Regel, OHNE eine Annahme darueber zu treffen, in welchem Container das Theme den
   Beitrag ausgibt (PLUG-55). */
.mld-kired-ki-icon.mld-kired-ki-icon{
	display:inline-block!important;
	vertical-align:middle!important;
	float:none!important;
	width:auto!important;
	max-width:none!important;
	margin:0!important;
}

.mld-kired-meta{
	font-size:.82em;
	color:#667085;
	border-bottom:1px solid #e5e7eb;
	padding-bottom:.6em;
	margin-bottom:1.4em;
}

/* ===== Inhaltsverzeichnis als Overlay – ohne JavaScript =====
   Drei Zustände decken alle Geräte ab:
   :hover        Desktop (Maus darüber)
   :target       Touch (einmal antippen – der Auslöser-Link setzt das Ziel)
   :focus-within Tastatur (der Auslöser ist ein <a> und damit fokussierbar)
   Ein Klick auf einen Eintrag wechselt das :target-Ziel → das Overlay schließt sich von selbst. */
.mld-kired-toc{
	position:relative;
	display:inline-block;
	margin:0 0 1.4em;
}
.mld-kired-toc-btn{
	display:inline-flex;
	align-items:center;
	gap:.5em;
	padding:8px 14px;
	border:1px solid #dbe6f3;
	border-left:4px solid #1f5fa8;
	border-radius:8px;
	background:#eef4fb;
	text-decoration:none;
	color:inherit;
	cursor:pointer;
}
.mld-kired-toc-btn:hover,
.mld-kired-toc-btn:focus{ background:#e2edfa; text-decoration:none; }
.mld-kired-toc-icon{ font-size:1.05em; line-height:1; }
.mld-kired-toc-hint{
	font-size:.78em;
	color:#667085;
	white-space:nowrap;
}
.mld-kired-toc-hint::before{ content:"— "; }
/* Gerätegerechter Hinweis: „darüberfahren" nur dort, wo es einen Mauszeiger gibt. */
.hint-hover{ display:none; }
@media (hover:hover) and (pointer:fine){
	.hint-hover{ display:inline; }
	.hint-tap{ display:none; }
}
.mld-kired-toc-caret{
	font-size:.8em;
	line-height:1;
	transition:transform .15s ease;
}
.mld-kired-toc:hover .mld-kired-toc-caret,
.mld-kired-toc:focus-within .mld-kired-toc-caret{ transform:rotate(180deg); }

.mld-kired-toc-panel{
	display:none;
	position:absolute;
	top:calc(100% - 2px);
	left:0;
	z-index:60;
	min-width:min(92vw,340px);
	max-width:min(92vw,460px);
	max-height:min(60vh,420px);
	overflow-y:auto;
	background:#fff;
	border:1px solid #dbe6f3;
	border-radius:8px;
	box-shadow:0 10px 28px rgba(16,24,40,.16);
	padding:10px 8px;
}
.mld-kired-toc:hover .mld-kired-toc-panel,
.mld-kired-toc:focus-within .mld-kired-toc-panel,
.mld-kired-toc-panel:target{ display:block; }
.mld-kired-toc-panel ul{ margin:0; padding:0; list-style:none; }
.mld-kired-toc-panel li{ list-style:none; margin:0; }
/* Unterpunkte (H3) nur über Einrückung und Schriftgröße kennzeichnen – NICHT über die Farbe.
   Gelernt an einem echten Beitrag: Ein abweichend eingefärbter Link liest sich als abweichender
   ZUSTAND, nicht als Ebene. Der einzige H3-Eintrag sah aus, als sei er bereits besucht worden. */
.mld-kired-toc-panel li.is-sub a{ padding-left:26px; font-size:.94em; }
.mld-kired-toc-panel a{
	display:block;
	padding:7px 12px;
	border-radius:5px;
	text-decoration:none;
	line-height:1.4;
}
.mld-kired-toc-panel a:hover,
.mld-kired-toc-panel a:focus{ background:#eef4fb; text-decoration:none; }
/* Angesprungene Abschnitte nicht unter einer klebrigen Theme-Kopfzeile verstecken. */
.entry-content h2[id^="mld-s"],
.entry-content h3[id^="mld-s"],
.wp-block-post-content h2[id^="mld-s"],
.wp-block-post-content h3[id^="mld-s"]{ scroll-margin-top:90px; }
@media (prefers-reduced-motion:reduce){
	.mld-kired-toc-caret{ transition:none; }
}

.mld-kired-tldr{
	background:#eef4fb;
	border:1px solid #dbe6f3;
	border-left:4px solid #1f5fa8;
	border-radius:8px;
	padding:14px 18px;
}

.mld-kired-callout{
	background:#f5f7fa;
	border:1px solid #e3e8ee;
	border-left:4px solid #1f5fa8;
	border-radius:8px;
	padding:12px 18px;
}
.mld-kired-callout.is-warn{
	background:#fbf3e6;
	border-color:#ecd9ac;
	border-left-color:#b5761f;
}

/* ZITAT — wörtlich übernommener Wortlaut.
   Es muss sich vom eigenen Text UNTERSCHEIDEN, und zwar auf einen Blick: Genau darin besteht die
   rechtliche Kennzeichnung. Deshalb nicht nur Anführungszeichen, sondern eine eigene Form —
   eingerückt, mit deutlichem Balken und in Serifen gesetzt. Die Quellennummer dahinter bleibt eine
   normale Fußnote, damit sie sich wie jeder andere Beleg anfühlt und anklicken lässt. */
.mld-kired-zitat{
	margin:22px 0;
	padding:4px 0 4px 20px;
	border-left:4px solid #1f5fa8;
	background:none;
	font-family:Georgia,'Times New Roman',serif;
	font-size:1.05em;
	line-height:1.6;
	color:#2c3338;
}
.mld-kired-zitat p{ margin:0; }
.mld-kired-zitat p + p{ margin-top:10px; }
/* Der Sprecher steht unter dem Wortlaut, kleiner und gedämpft: Er ist die Zuschreibung, nicht
   Teil des Zitats — wer beides gleich setzt, macht aus der Quelle einen Satz des Beitrags. */
.mld-kired-zitat cite{
	display:block;
	margin-top:8px;
	font-family:inherit;
	font-size:.86em;
	font-style:normal;
	color:#646970;
}
.mld-kired-zitat cite::before{ content:"— "; }

/* ORIGINALWORTLAUT bei fremdsprachiger Quelle: steht klein unter der Übersetzung.
   Er ist die Belegstelle, nicht die Aussage — deshalb kleiner und gedämpft, aber weiter im
   Zitat-Block und in derselben Serifenschrift: Er gehört zum Zitat, er ist kein Kommentar dazu.
   Kursiv, damit die Fremdsprache auch dann als solche erkennbar bleibt, wenn sie der eigenen
   ähnlich sieht. */
.mld-kired-zitat p.mld-kired-zitat-original{
	margin-top:10px;
	font-size:.92em;
	font-style:italic;
	color:#50575e;
}
/* Der Hinweis „Übersetzt aus dem …" ist Beiwerk: Er erklärt, warum darüber zwei Fassungen stehen.
   Kleinste Stufe, aufrecht — sonst konkurriert er mit dem Wortlaut, den er nur einordnet. */
.mld-kired-zitat p.mld-kired-zitat-herkunft{
	margin-top:4px;
	font-family:inherit;
	font-size:.8em;
	font-style:normal;
	color:#787c82;
}

/* Rechtlicher Pflichthinweis ganz oben. Der Satz kommt aus der App, der Link „rechtlichen
   Informationen" aus dem Shortcode. Bewusst dezent (kleiner, gedämpft) – er soll da sein, ohne
   den Einstieg zu überlagern. */
.entry-content p.mld-kired-legal,
.wp-block-post-content p.mld-kired-legal{ font-size:.82em; }
.mld-kired-legal{
	font-size:.82em;
	color:#667085;
	margin-bottom:1em;
}
.mld-kired-legal a{ font-weight:600; }

/* DER PITCH — WAS→WIE-Brücke + Angebot als EIN abgesetzter Block.
   Er muss auffallen, ohne aus dem Beitrag zu fallen: dieselbe Formsprache wie die übrigen Kästen
   (heller Blauton, 4-px-Akzentbalken links, gerundet), aber bewusst kräftiger gerahmt und mit
   etwas mehr Luft — das hebt ihn über die reinen Info-Callouts (tldr/callout). Die Brücke steht
   OHNE Trennlinie direkt über dem Angebot; beide gehören sichtbar zusammen. */
.mld-kired-pitch{
	background:#eef4fb;
	border:1px solid #cfe0f5;
	border-left:4px solid #1f5fa8;
	border-radius:8px;
	padding:18px 22px;
	margin:26px 0;
}
/* Überschrift des Pitch — optisch eine Überschrift, technisch ein Absatz (kein Eintrag in
   Gliederung/Inhaltsverzeichnis, weil Werbung dort nicht hingehört). */
.mld-kired-pitch-titel{
	margin:0 0 8px;
	font-weight:700;
	font-size:1.08em;
	line-height:1.3;
	color:#1f5fa8;
}
/* Die Brücke steht im Pitch-Kasten dicht am Angebot — keine eigenen Ränder, kein Abstand nach oben. */
.mld-kired-pitch .mld-kired-bridge{ margin:0 0 4px; }

.mld-kired-fazit{
	background:#f5f7fa;
	border-radius:8px;
	padding:12px 18px;
}

.mld-kired-ref{
	font-size:.7em;
	line-height:0;
	vertical-align:super;
}
.mld-kired-ref a{
	text-decoration:none;
	font-weight:600;
}

.mld-kired-sources{
	font-size:.92em;
	color:#475467;
}
.mld-kired-sources a{
	word-break:break-word;
}
/* Veröffentlichungsdatum der Quelle – dezent, aber prüfbar. */
.mld-kired-qdate{
	color:#667085;
	white-space:nowrap;
}
/* Belegkraft aus der kritischen Prüfung – das Alleinstellungsmerkmal, sichtbar gemacht. */
.mld-kired-qrank{
	color:#667085;
	font-style:italic;
}

/* Entscheidungskasten: die Ampel trägt die Aussage, deshalb NICHT nur Farbe – jede Stufe hat
   zusätzlich ein eigenes Zeichen. Farbe allein schließt Farbsehschwächen aus (rund 8 % der Männer)
   und geht beim Ausdrucken verloren.

   ⚠ WARUM DIE KLASSE DOPPELT STEHT – das ist kein Tippfehler, sondern Absicht.
   Drei Anläufe, zwei davon falsch, deshalb hier die Rechnung:
   1. „.mld-kired-entscheidung li" ist (0,1,1). Die übliche Theme-Listenregel „.entry-content ul li"
      ist (0,1,2) – gleich viele Klassen, ein Element mehr, Theme gewinnt. Im Beitrag standen
      Theme-Quadrat UND eigenes Ampel-Zeichen nebeneinander.
   2. Verankerung an „.entry-content"/„.wp-block-post-content" ergibt (0,2,2) – rechnerisch stark,
      aber sie SETZT VORAUS, dass das Theme genau diesen Container benutzt. Tut es das nicht, greift
      die Regel gar nicht. Genau das trat ein: nichts änderte sich.
   3. Ein Selektor darf dieselbe Klasse mehrfach nennen; jede zählt. „.x.x li" ist (0,2,1) und
      schlägt (0,1,2) über die Klassenzahl – OHNE etwas über das Theme anzunehmen. Zusätzlich
      !important auf list-style, falls das Theme selbst !important benutzt (dann entscheidet unter
      Gleichwichtigen wieder die Spezifität, und (0,2,1) gewinnt gegen (0,1,2)).
   !important steht NUR auf list-style: Farben, Abstände und Rahmen bleiben überschreibbar, damit
   ein Theme sie anpassen kann.
   ACHTUNG bei Änderungen: Die Dark-Mode-Regeln unten müssen die Klasse EBENFALLS doppelt nennen –
   ein Media-Query erhöht die Spezifität nicht, sonst gewinnt die helle Fassung im Dunkelmodus. */
.mld-kired-entscheidung.mld-kired-entscheidung{
	background:#f5f7fa;
	border:1px solid #e3e8ee;
	border-radius:8px;
	padding:14px 18px;
	list-style:none !important;
	margin-left:0;
}
.mld-kired-entscheidung.mld-kired-entscheidung li{
	list-style:none !important;
	position:relative;
	margin:0;
	padding:8px 0 8px 34px;
	border-bottom:1px solid #e7ebf0;
}
.mld-kired-entscheidung.mld-kired-entscheidung li::marker{ content:none; }
.mld-kired-entscheidung.mld-kired-entscheidung li:last-child{ border-bottom:0; padding-bottom:0; }
.mld-kired-entscheidung.mld-kired-entscheidung li:first-child{ padding-top:0; }
.mld-kired-entscheidung.mld-kired-entscheidung li::before{
	position:absolute;
	left:0;
	top:8px;
	font-weight:700;
	line-height:1.75;
}
.mld-kired-entscheidung.mld-kired-entscheidung li:first-child::before{ top:0; }
.mld-kired-entscheidung.mld-kired-entscheidung li.is-ok::before{ content:"✓"; color:#217a4b; }
.mld-kired-entscheidung.mld-kired-entscheidung li.is-info::before{ content:"i"; color:#1f5fa8; }
.mld-kired-entscheidung.mld-kired-entscheidung li.is-warn::before{ content:"!"; color:#b5761f; }

/* Glossar: klar als Nachschlage-Block erkennbar, nicht als Fließtext.
   Marker wie beim Entscheidungskasten (siehe die Begründung dort) – derselbe Fehler steckte hier
   seit jeher, fiel nur nicht auf: Ein Punkt vor einem Glossareintrag sieht aus wie eine normale
   Liste. Das negative margin-left war der Versuch, das Symptom statt der Ursache zu beheben. */
.mld-kired-glossar.mld-kired-glossar{
	background:#f5f7fa;
	border:1px solid #e3e8ee;
	border-radius:8px;
	padding:14px 18px;
	list-style:none !important;
	margin-left:0;
}
.mld-kired-glossar.mld-kired-glossar li{
	list-style:none !important;
	margin:0 0 .5em;
	padding:0;
}
.mld-kired-glossar.mld-kired-glossar li::marker{ content:none; }
.mld-kired-glossar.mld-kired-glossar li:last-child{ margin-bottom:0; }

/* Weiterlesen: interne Links sollen einladen, nicht als Fußnote wirken.
   Doppelte Klasse aus demselben Grund wie beim Entscheidungskasten. */
.mld-kired-related.mld-kired-related{
	border-left:4px solid #1f5fa8;
	padding:6px 0 6px 18px;
	list-style:none !important;
	margin-left:0;
}
.mld-kired-related.mld-kired-related li{
	list-style:none !important;
	margin:0 0 .35em;
	padding:0;
}
.mld-kired-related.mld-kired-related li::marker{ content:none; }
.mld-kired-related.mld-kired-related li:last-child{ margin-bottom:0; }
.mld-kired-related a{ font-weight:600; }

@media (prefers-color-scheme:dark){
	.mld-kired-meta,
	.mld-kired-sources{ color:#93a0b2; }
	.mld-kired-qdate,
	.mld-kired-qrank{ color:#93a0b2; }
	.mld-kired-tldr{ background:#152740; border-color:#26313f; }
	.mld-kired-callout{ background:#17212e; border-color:#26313f; }
	.mld-kired-callout.is-warn{ background:#241d10; border-color:#453413; }
	.mld-kired-fazit{ background:#17212e; }
	/* Klasse doppelt – ZWINGEND: Ein Media-Query erhöht die Spezifität nicht. Stünde hier nur
	   „.mld-kired-glossar" (0,1,0), gewänne die helle Fassung oben (0,2,0) auch im Dunkelmodus. */
	.mld-kired-glossar.mld-kired-glossar{ background:#17212e; border-color:#26313f; }
	.mld-kired-entscheidung.mld-kired-entscheidung{ background:#17212e; border-color:#26313f; }
	.mld-kired-entscheidung.mld-kired-entscheidung li{ border-bottom-color:#26313f; }
	.mld-kired-entscheidung.mld-kired-entscheidung li.is-ok::before{ color:#4cb782; }
	.mld-kired-entscheidung.mld-kired-entscheidung li.is-info::before{ color:#6aa6e8; }
	.mld-kired-entscheidung.mld-kired-entscheidung li.is-warn::before{ color:#d9a441; }
	.mld-kired-toc-btn{ background:#152740; border-color:#26313f; }
	.mld-kired-toc-btn:hover,
	.mld-kired-toc-btn:focus{ background:#1b3050; }
	.mld-kired-toc-hint{ color:#93a0b2; }
	.mld-kired-toc-panel{ background:#0f1720; border-color:#26313f; box-shadow:0 10px 28px rgba(0,0,0,.5); }
	.mld-kired-toc-panel a:hover,
	.mld-kired-toc-panel a:focus{ background:#17212e; }
	.mld-kired-meta{ border-bottom-color:#26313f; }
	.mld-kired-legal{ color:#93a0b2; }
	.mld-kired-pitch{ background:#14243c; border-color:#274063; border-left-color:#4c8ee6; }
	.mld-kired-pitch-titel{ color:#7fb2ec; }
}