/* IKS Visual — Gestaltungs-Layer für News-Beiträge (reine Darstellung). */

/* Der Wrapper ist nur ein Klassen-Anker und darf das Theme-Layout (Constrained
   Layout in Block-Themes) nicht stören: display:contents = layout-neutral. */
.iksv { display: contents; }

/* 1) Lead-Absatz (3.36.0, Redaktions-Design): ruhig und selbstbewusst — OHNE Balken
   und Einrückung (kein „Versatz"), dafür Größe, Gewicht und Maßband (~64 Zeichen). */
.iksv .iksv-lead {
	font-size: 1.24em; line-height: 1.6; color: #22303a; font-weight: 500;
	margin: 0 auto 1.6em; /* 3.36.1: Breite kommt von der Artikel-Achse — eine Kante fuer alles */
}

/* 2) Pull-Quote (3.36.0): editorial statt verspielt — Hairlines oben/unten, kurzer
   roter Akzentstrich, KEIN Kasten, KEIN Riesen-Anführungszeichen. Eine Hervorhebung,
   die Technikern standhält. */
.iksv .iksv-quote {
	margin: 2.6em auto; max-width: none; text-align: center; position: relative; /* 3.36.1: sitzt auf der Artikel-Achse (680px), Hairlines = Textkanten */
	padding: 1.7em 0 1.5em;
	background: none; border-radius: 0;
	border-top: 1px solid #e2e5e8; border-bottom: 1px solid #e2e5e8;
}
.iksv .iksv-quote::before {
	content: ""; position: absolute; top: -2px; left: 50%; transform: translateX(-50%);
	width: 44px; height: 3px; background: var(--iks-red,#991424); border-radius: 0; font: inherit; padding: 0;
}
.iksv .iksv-quote span { font-size: 1.22em; line-height: 1.55; font-style: normal; font-weight: 600; color: var(--iks-anth,#24343E); }

/* 3) Termin-Karten (Messedaten u. Ä.) */
.iksv .iksv-cards {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 14px; margin: 1.4em 0;
}
.iksv .iksv-card {
	background: #fff; border: 1px solid #e5e0da; border-top: 3px solid var(--iks-red,#991424);
	border-radius: 10px; padding: 14px 16px; box-shadow: 0 3px 14px rgba(35, 31, 32, .07);
	display: flex; flex-direction: column; gap: 7px;
	transition: transform .15s ease, box-shadow .15s ease;
}
.iksv .iksv-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(35, 31, 32, .12); }
.iksv .iksv-date {
	align-self: flex-start; background: var(--iks-red,#991424); color: #fff; font-weight: 700; font-size: .82em;
	letter-spacing: .02em; border-radius: 999px; padding: 3px 12px; white-space: nowrap;
}
.iksv .iksv-card-t { color: #2a333b; line-height: 1.45; }
.iksv .iksv-card-t a { color: var(--iks-red,#991424); }

/* 4) Haken-Listen */
.iksv ul.iksv-list { list-style: none !important; padding-left: 0 !important; margin: 1.2em 0; }
.iksv ul.iksv-list > li {
	position: relative; list-style: none !important; padding: 6px 0 6px 34px !important;
	margin: 0 !important; line-height: 1.55;
}
.iksv ul.iksv-list > li::marker { content: ""; }
.iksv ul.iksv-list > li::before {
	content: "✓" !important; position: absolute !important; left: 0 !important; top: 5px !important;
	width: 22px !important; height: 22px !important; border-radius: 50% !important;
	background: var(--iks-red,#991424) !important; color: #fff !important; margin: 0 !important;
	font-weight: 700; font-size: 14px !important; line-height: 22px !important; text-align: center;
	display: block !important;
}

/* 5) CTA-Box (👉-Zeilen) */
.iksv .iksv-cta {
	background: #f7f3ee; border: 1px solid #e8ddd0; border-left: 4px solid var(--iks-red,#991424);
	border-radius: 8px; padding: 14px 18px; margin: 1.6em 0; font-weight: 600; color: #3a2f2a;
}
.iksv .iksv-cta a { color: var(--iks-red,#991424); text-decoration: underline; }

/* 6) Bild-Normalisierung (3.36.0): Hairline statt schwerem Schatten — Katalog-Ruhe. */
.iksv img { border-radius: 12px; border: 1px solid #e3e6e8; box-shadow: none; height: auto; }
.iksv figure { margin: 1.6em auto; }
.iksv figure.alignright, .iksv .alignright { float: right; margin: .4em 0 1em 1.6em; max-width: min(46%, 420px); }
.iksv figure.alignleft,  .iksv .alignleft  { float: left;  margin: .4em 1.6em 1em 0; max-width: min(46%, 420px); }
.iksv figure.aligncenter, .iksv .aligncenter { margin-left: auto; margin-right: auto; }
.iksv h2, .iksv h3 { clear: both; }
.iksv .iksv-cta, .iksv .iksv-facts, .iksv .iksv-tl { clear: both; }
.iksv figcaption {
	text-align: center; color: #7a716c; font-size: .85em; margin-top: 8px;
}
.iksv .iksv-ki { display: block; text-align: center; color: #9a918c; font-size: .78em; margin-top: 3px; }

@media (max-width: 640px) {
	.iksv figure.alignright, .iksv .alignright, .iksv figure.alignleft, .iksv .alignleft {
		float: none; margin: 1.2em auto; max-width: 100%;
	}
	.iksv .iksv-lead { font-size: 1.12em; }
}

/* ============ Magazin-Modus: Hero, Fakten, Zeitleiste, Icons ============ */

/* Hero-Kopf */
/* 3.38.0 (Redaktions-Standard, Feedback „Text schließt nicht mit Bildern ab"):
   Bilder haben GENAU ZWEI erlaubte Breiten — exakt Textbreite (Produktkarten) oder
   VOLLE Viewport-Breite (Hero). Nichts dazwischen: der Full-Bleed-Hero bricht die
   Spalte bewusst und randlos, alles andere sitzt buendig auf der Textkante. */
.iksv figure.iksv-hero, .iksv .iksv-hero {
	position: relative; margin: 0 0 34px !important; overflow: hidden;
	width: 100vw !important; max-width: none !important;
	margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
	height: clamp(300px, 40vh, 480px); border-radius: 0; box-shadow: none;
	background-size: cover; background-position: center;
	display: flex; align-items: flex-end;
}
.iksv .iksv-hero-meta { width: min(680px, calc(100% - 32px)); margin: 0 auto; }
.iksv .iksv-hero-pattern { height: 210px; }
.iksv .iksv-hero-shade {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(20,24,28,0) 30%, rgba(20,24,28,.62) 100%);
}
.iksv .iksv-hero-meta { position: relative; display: flex; gap: 8px; flex-wrap: wrap; padding: 16px 18px; }
.iksv .iksv-chip {
	background: rgba(255,255,255,.92); color: #2a333b; font-size: 13px; font-weight: 600;
	border-radius: 999px; padding: 5px 14px; box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.iksv .iksv-chip-cat { background: var(--iks-red,#991424); color: #fff; }
/* 3.38.0 (Nutzerwunsch): KI-Kennzeichnung DEUTLICH lesbar — vorher 11px auf 45 %
   Deckung, im Hero praktisch unsichtbar. Bleibt dezent, ist aber klar erkennbar.
   3.38.2: nach UNTEN rechts — oben kollidierte das Etikett mit der Kopfzeile. */
.iksv .iksv-hero .iksv-ki {
	position: absolute; bottom: 14px; right: 14px; color: #fff; font-size: 12px; font-weight: 600;
	background: rgba(20,24,28,.72); border-radius: 6px; padding: 4px 10px; letter-spacing: .02em;
}

/* „Auf einen Blick" — Fakten-Kacheln */
.iksv .iksv-facts {
	margin: 26px 0; background: linear-gradient(135deg, #232b33, #37424c);
	border-radius: 14px; padding: 18px 20px 20px; box-shadow: 0 10px 30px rgba(35,31,32,.22);
	border-top: 4px solid var(--iks-red,#991424);
}
.iksv .iksv-facts-h {
	color: #cfd7dd; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	margin-bottom: 12px;
}
.iksv .iksv-facts-grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px;
}
.iksv .iksv-fact {
	background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
	border-radius: 10px; padding: 14px 12px; text-align: center;
}
.iksv .iksv-fact-n {
	display: block; color: #fff; font-size: 30px; font-weight: 800; line-height: 1.1;
	letter-spacing: -0.01em; word-break: break-word;
}
.iksv .iksv-fact-n::after { content: ""; display: block; width: 26px; height: 3px; background: var(--iks-red,#991424); margin: 8px auto 6px; border-radius: 2px; }
.iksv .iksv-fact-l { display: block; color: #b9c3cb; font-size: 12.5px; line-height: 1.35; }

/* Zeitleiste (Termine) */
.iksv .iksv-tl { position: relative; margin: 1.6em 0; padding-left: 26px; }
.iksv .iksv-tl::before {
	content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 3px;
	background: linear-gradient(180deg, var(--iks-red,#991424), #d8b4ba); border-radius: 2px;
}
.iksv .iksv-tl-item { position: relative; padding: 10px 14px; margin: 0 0 10px; background: #fff;
	border: 1px solid #e5e0da; border-radius: 10px; box-shadow: 0 3px 12px rgba(35,31,32,.06);
	display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.iksv .iksv-tl-dot {
	position: absolute; left: -24px; top: 16px; width: 13px; height: 13px; border-radius: 50%;
	background: var(--iks-red,#991424); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--iks-red,#991424);
}
.iksv .iksv-tl-t { color: #2a333b; line-height: 1.5; flex: 1; min-width: 55%; }
.iksv .iksv-tl-t a { color: var(--iks-red,#991424); }

/* Icon-Chips an Überschriften */
.iksv h2 .iksv-hicon, .iksv h3 .iksv-hicon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; margin-right: 10px; border-radius: 10px;
	background: #f3e6e8; font-size: 18px; vertical-align: -7px;
}