/*
 * Xpert.Digital – gemeinsame Startseiten-Styles
 * Ausgelagert aus header-startseite, featured-magazin, sidekick_startseite
 * und startseite-rail-links.
 *
 * WICHTIG WP Rocket:
 * Diese Datei unter Remove Unused CSS -> CSS Safelist eintragen:
 * /wp-content/themes/typegrid11/css/xpert-startseite.css
 */

/* =========================================================
   HEADER / AUSSENBEREICHE
   ========================================================= */
/* =========================================================
		   XPERT.DIGITAL – Startseiten-Randbereiche V3

		   Prinzip:
		   1. Der normale Xpert-Inhalt bleibt zunächst zentriert.
		   2. Reicht links der Platz für den Zusatzbereich nicht aus,
		      wird die komplette .body-wrapper-Gruppe so weit nach rechts
		      geschoben, wie rechts noch freier Platz vorhanden ist.
		   3. Erst wenn rechts kein Platz mehr übrig ist, wird der linke
		      Zusatzbereich stufenlos kleiner skaliert.
		   4. Auf kleinen Displays wandern die Randbereiche vollständig
		      in den normalen Seitenfluss.
		   ========================================================= */

		:root {
			--xpert-rail-width: 300px;
			--xpert-rail-gap: 24px;
			--xpert-stage-shift: 0px;
		}

		.body-wrapper {
			position: relative;
			left: 0;
			transform: none !important;
			transition: none !important;
		}

		#header {
			position: relative;
		}

		.xpert-start-rails {
			pointer-events: none;
		}

		.xpert-start-rail {
			width: var(--xpert-rail-width);
			pointer-events: auto;
			z-index: 20;
		}

		.xpert-start-rail-left {
			display: flex;
			justify-content: flex-end;
			margin: 0 !important;
			padding: 0 !important;
			float: none !important;
			opacity: 1;
			visibility: visible;
			transition: none;
		}

		.xpert-start-rail-left #business-innovator {
			/* Das Theme positioniert #business-innovator selbst seitlich.
			   In der neuen Rail MUSS diese alte Positionierung vollständig aus. */
			position: static !important;
			left: auto !important;
			right: auto !important;
			top: auto !important;
			bottom: auto !important;
			float: none !important;
			clear: none !important;
			transform: none !important;
			margin: 0 !important;

			width: 300px !important;
			max-width: 300px !important;
		}

		.xpert-start-rail-left #business-innovator > * {
			box-sizing: border-box;
		}

		.xpert-start-rail-left,
		.xpert-start-rail-right {
			position: absolute;
			/* Rail startet exakt auf Höhe des Hauptbereichs / der blauen Linie */
			top: calc(100% + 20px);
			visibility: visible;
		}

		/*
		 * Die Randbereiche orientieren sich direkt an der realen Breite
		 * des Header-/Container-Bereichs. Kein fest angenommener
		 * "Main Width"-Wert mehr.
		 */
		.xpert-start-rail-left {
			left: 0;
			transform: none;
			transform-origin: top right;
		}

		.xpert-start-rail-right {
			left: 0;
		}

		.xpert-start-rail:empty {
			display: none;
		}

		.xpert-rail-card {
			margin-bottom: 18px;
			padding: 15px;
			background: #fafafa;
			border: 1px solid #d7e1e8;
			border-left: 4px solid #234c70;
			border-radius: 0 4px 4px 0;
			color: #234c70;
			line-height: 1.45;
		}

		.xpert-rail-card h3 {
			margin: 0 0 8px;
			font-size: 16px;
			color: #234c70;
		}

		/*
		 * Unterhalb dieses Bereichs keine seitlichen "Außenflügel".
		 * Dann wird alles vollständig innerhalb des Viewports dargestellt.
		 */
		@media (max-width: 1180px) {
			.body-wrapper {
				transform: none !important;
			}

			/* Smartphone + Tablet: Außenbereiche komplett raus */
			.xpert-start-rails,
			.xpert-start-rail-left,
			.xpert-start-rail-right {
				display: none !important;
			}
		}

/* =========================================================
   MAGAZIN / STARTSEITEN-CONTENT
   ========================================================= */
/* =========================================================
   XPERT.DIGITAL – MAGAZIN V4
   Angepasst an das bestehende Xpert.Digital Theme:
   - schmalere Hauptspalte
   - Theme-Schriften werden geerbt
   - Xpert-Blau / helle Flächen
   - keine übergroßen Magazin-Elemente
   ========================================================= */

.xv2{
	--blue:#234c70;
	--blue-dark:#173b5a;
	--blue-soft:#eef5fa;
	--blue-soft-2:#f5f8fb;
	--line:#cfdce7;
	--text:#234c70;
	--muted:#687b8b;
	--white:#fff;
	margin:0 0 34px;
	color:var(--text);
	font-family:inherit;
}

.xv2 *{box-sizing:border-box}
.xv2 a{text-decoration:none;color:inherit}
.xv2 img{display:block;width:100%;height:100%;object-fit:cover}

/* Überschriften wie im restlichen Xpert-Auftritt */
.xv2-head{
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:12px;
	margin:0 0 10px;
	padding:0 0 7px;
	border-bottom:2px solid var(--blue);
}

.xv2-head h2{
	margin:0;
	padding:0;
	font:inherit;
	font-size:24px;
	line-height:1.15;
	font-weight:700;
	color:var(--blue);
}

.xv2-head small{
	color:#7f8d98;
	font-size:10px;
	font-weight:600;
	white-space:nowrap;
}

/* =========================================================
   HERO
   In der vorhandenen Hauptspalte ist eine große Story plus
   zwei kleine darunter wesentlich ruhiger als 2/3 + Sidebar.
   ========================================================= */
.xv2-hero{
	display:block;
	margin-bottom:24px;
}

.xv2-lead{
	position:relative;
	min-height:310px;
	overflow:hidden;
	border-radius:4px;
	background:var(--blue-dark);
}

.xv2-lead:after,
.xv2-sideitem:after{
	content:"";
	position:absolute;
	inset:0;
	pointer-events:none;
	background:linear-gradient(to top,rgba(11,31,47,.92) 0%,rgba(11,31,47,.22) 58%,rgba(11,31,47,0) 100%);
}

.xv2-lead-content{
	position:absolute;
	z-index:2;
	left:0;right:0;bottom:0;
	padding:18px 20px 19px;
	color:#fff;
}

.xv2-kicker{
	display:inline-block;
	margin-bottom:7px;
	padding:3px 7px;
	border:1px solid rgba(255,255,255,.35);
	border-radius:999px;
	background:rgba(35,76,112,.65);
	font-size:8px;
	font-weight:700;
	letter-spacing:.04em;
	text-transform:uppercase;
}

.xv2-lead h1{
	margin:0 0 8px;
	padding:0;
	font:inherit;
	font-size:30px;
	line-height:1.08;
	font-weight:700;
	color:#fff;
	text-shadow:0 1px 1px rgba(0,0,0,.25);
}

.xv2-lead p{
	margin:0;
	max-width:90%;
	font-size:12.5px;
	line-height:1.45;
	color:#e9f2f8;
}

.xv2-side{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:10px;
	margin-top:10px;
}

.xv2-sideitem{
	position:relative;
	min-height:135px;
	overflow:hidden;
	border-radius:4px;
	background:var(--blue-dark);
}

.xv2-sideitem:nth-child(3){
	display:none;
}

.xv2-side-content{
	position:absolute;
	z-index:2;
	left:0;right:0;bottom:0;
	padding:11px 12px;
	color:#fff;
}

.xv2-side-content span{
	display:block;
	margin-bottom:4px;
	font-size:7px;
	line-height:1.15;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.04em;
	opacity:.9;
}

.xv2-side-content h3{
	margin:0;
	padding:0;
	font:inherit;
	font-size:15px;
	line-height:1.2;
	font-weight:700;
	color:#fff;
}

/* =========================================================
   NEU VERÖFFENTLICHT
   2 Spalten passen zur tatsächlichen Inhaltsbreite.
   ========================================================= */
.xv2-fresh{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:12px;
	margin-bottom:26px;
}

.xv2-card{
	overflow:hidden;
	background:var(--blue-soft-2);
	border:1px solid var(--line);
	border-radius:3px;
	box-shadow:none;
}

.xv2-card-img{
	display:block;
	aspect-ratio:16/9;
	overflow:hidden;
	background:#e6edf3;
}

.xv2-card-body{
	padding:10px 11px 12px;
}

.xv2-card-cat{
	margin-bottom:5px;
	font-size:7px;
	line-height:1.15;
	font-weight:700;
	color:var(--blue);
	text-transform:uppercase;
	letter-spacing:.045em;
}

.xv2-card h3{
	margin:0 0 6px;
	padding:0;
	font:inherit;
	font-size:15px;
	line-height:1.24;
	font-weight:700;
	color:var(--blue);
}

.xv2-card p{
	margin:0;
	font-size:10.5px;
	line-height:1.45;
	color:#637787;
}

/* =========================================================
   THEMENWELTEN
   wirken wie feste Xpert-Navigation statt wie weitere News.
   ========================================================= */
.xv2-topics{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:10px;
	margin-bottom:27px;
}

.xv2-topic{
	display:grid;
	grid-template-columns:165px 1fr;
	min-height:122px;
	overflow:hidden;
	border:1px solid var(--line);
	border-radius:3px;
	background:var(--blue-soft);
	color:var(--blue);
}

.xv2-topic-media{
	height:122px;
}

.xv2-topic-body{
	padding:15px 16px;
	background:transparent;
}

.xv2-topic-body b{
	display:block;
	margin-bottom:7px;
	font-size:17px;
	line-height:1.18;
	font-weight:700;
}

.xv2-topic-body span{
	display:block;
	font-size:11px;
	line-height:1.4;
	color:#657988;
}

/* =========================================================
   WEITERE BEITRÄGE
   Klassischer Xpert-Listencharakter.
   ========================================================= */
.xv2-stream{
	display:block;
	margin-bottom:28px;
}

.xv2-stream-main{
	display:flex;
	flex-direction:column;
	border-top:1px solid var(--line);
}

.xv2-row{
	display:grid;
	grid-template-columns:220px 1fr;
	gap:18px;
	padding:16px 0;
	border-bottom:1px solid var(--line);
}

.xv2-row-img{
	height:138px;
	overflow:hidden;
	background:#e6edf3;
	border-radius:2px;
}

.xv2-row-img img{
	width:100%;
	height:100%;
	object-fit:cover;
	image-rendering:auto;
}

.xv2-row h3{
	margin:0 0 8px;
	padding:0;
	font:inherit;
	font-size:18px;
	line-height:1.24;
	font-weight:700;
	color:var(--blue);
}

.xv2-row p{
	margin:0 0 9px;
	font-size:12px;
	line-height:1.45;
	color:#677989;
}

.xv2-row-meta{
	font-size:10px;
	color:#8b99a4;
}

/* direkte Einstiege unten statt zusätzlicher Sidebar */
.xv2-sidebox{
	margin-top:22px;
	padding:20px;
	background:var(--blue-soft);
	border:1px solid var(--line);
	border-radius:4px;
}

.xv2-sidebox h3{
	margin:0 0 14px;
	padding:0 0 10px;
	border-bottom:2px solid var(--blue);
	font:inherit;
	font-size:18px;
	font-weight:700;
	color:var(--blue);
}

.xv2-sidebox-intro{
	margin:0 0 15px;
	font-size:11px;
	line-height:1.45;
	color:#667b8c;
}

.xv2-linklist{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:10px;
}

.xv2-linklist a{
	display:block;
	min-height:86px;
	padding:13px 14px;
	background:#fff;
	border:1px solid #cad9e4;
	border-radius:3px;
	color:var(--blue);
}

.xv2-linklist a:hover{
	background:#f8fbfd;
}

.xv2-direct-title{
	display:block;
	margin-bottom:5px;
	font-size:14px;
	font-weight:800;
	line-height:1.2;
}

.xv2-direct-text{
	display:block;
	font-size:10px;
	font-weight:400;
	line-height:1.4;
	color:#687b8b;
}

@media(max-width:700px){
	.xv2-fresh,
	.xv2-topics,
	.xv2-linklist{
		grid-template-columns:1fr;
	}

	.xv2-side{
		grid-template-columns:1fr;
	}

	.xv2-sideitem:nth-child(3){
		display:block;
	}

	.xv2-lead{
		min-height:280px;
	}

	.xv2-lead h1{
		font-size:23px;
	}

	.xv2-topic{
		grid-template-columns:135px 1fr;
	}

	.xv2-topic-media{
		height:105px;
	}

	.xv2-row{
		grid-template-columns:145px 1fr;
	}

	.xv2-row-img{
		height:96px;
	}
}

/* Automatische Lesbarkeit der Texte auf Bildkarten.
   Standard = weiß auf dunklem Verlauf. Bei hellem Bildbereich schaltet JS
   auf dunkle Schrift + hellen Verlauf um. */
.xv2-sideitem.xv2-bg-light:after{
	background:linear-gradient(to top,rgba(255,255,255,.94) 0%,rgba(255,255,255,.68) 46%,rgba(255,255,255,0) 100%);
}
.xv2-sideitem.xv2-bg-light .xv2-side-content,
.xv2-sideitem.xv2-bg-light .xv2-side-content h3{
	color:#173b5a !important;
	text-shadow:0 1px 0 rgba(255,255,255,.75);
}
.xv2-sideitem.xv2-bg-light .xv2-side-content span{
	color:#234c70 !important;
	opacity:1;
}
.xv2-sideitem.xv2-bg-dark .xv2-side-content,
.xv2-sideitem.xv2-bg-dark .xv2-side-content h3{
	color:#fff !important;
	text-shadow:0 1px 2px rgba(0,0,0,.45);
}


/* Kategoriezeile über den Titeln in "Weitere aktuelle Beiträge" bewusst größer */
.xv2-row .xv2-card-cat{
	font-size:10.5px;
	line-height:1.2;
	font-weight:800;
	letter-spacing:.055em;
	margin-bottom:7px;
}

/* =========================================================
   Zusätzliche Tiefe unter "Xpert.Digital direkt"
   füllt den freien Bereich neben der langen Sidebar sinnvoll.
   ========================================================= */
.xv2-deep{
	margin-top:24px;
}

.xv2-dossiers{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:10px;
	margin-bottom:26px;
}

.xv2-dossier{
	display:flex;
	flex-direction:column;
	min-height:150px;
	padding:16px;
	background:#fff;
	border:1px solid var(--line);
	border-top:4px solid var(--blue);
	border-radius:3px;
}

.xv2-dossier small{
	display:block;
	margin-bottom:8px;
	font-size:9px;
	font-weight:800;
	letter-spacing:.05em;
	text-transform:uppercase;
	color:#7a8a97;
}

.xv2-dossier strong{
	display:block;
	margin-bottom:7px;
	font-size:16px;
	line-height:1.18;
	color:var(--blue);
}

.xv2-dossier span{
	display:block;
	font-size:10.5px;
	line-height:1.45;
	color:#697b89;
}

.xv2-dossier em{
	display:block;
	margin-top:auto;
	padding-top:12px;
	font-size:9px;
	font-style:normal;
	font-weight:700;
	color:var(--blue);
}

.xv2-markets{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:10px;
	margin-bottom:24px;
}

.xv2-market{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	min-height:74px;
	padding:13px 15px;
	background:var(--blue-soft);
	border:1px solid var(--line);
	border-radius:3px;
}

.xv2-market-text strong{
	display:block;
	margin-bottom:4px;
	font-size:14px;
	line-height:1.15;
	color:var(--blue);
}

.xv2-market-text span{
	display:block;
	font-size:9.5px;
	line-height:1.35;
	color:#6a7c89;
}

.xv2-market-arrow{
	flex:0 0 auto;
	font-size:19px;
	line-height:1;
	color:var(--blue);
}

@media(max-width:700px){
	.xv2-dossiers{
		grid-template-columns:1fr;
	}

	.xv2-markets{
		grid-template-columns:1fr;
	}
}

/* =========================================================
   LINKE WORDPRESS-SIDEBAR
   ========================================================= */
.xhs2{
	--xhs-blue:#234c70;
	--xhs-dark:#173b5a;
	--xhs-soft:#eef5fa;
	--xhs-soft2:#f7f9fb;
	--xhs-line:#cfdce7;
	--xhs-muted:#667b8b;
	color:var(--xhs-blue);
	font-family:inherit;
}

.xhs2 *{box-sizing:border-box}
.xhs2 a{text-decoration:none;color:inherit}
.xhs2 img{display:block;width:100%;height:auto}

.xhs2-section{
	margin:0 0 18px;
}

.xhs2-title{
	margin:0 0 10px;
	padding:0 0 7px;
	border-bottom:2px solid var(--xhs-blue);
	font-size:16px;
	line-height:1.15;
	font-weight:700;
	color:var(--xhs-blue);
}

/* Smart Xpert als klarer Hauptaufmacher */
.xhs2-hero{
	overflow:hidden;
	margin-bottom:17px;
	background:#fff;
	border:1px solid var(--xhs-line);
	border-radius:3px;
}

.xhs2-hero-image{
	display:block;
}

.xhs2-hero-body{
	padding:11px 12px 13px;
	background:var(--xhs-soft);
}

.xhs2-hero-kicker{
	display:block;
	margin-bottom:4px;
	font-size:8px;
	font-weight:800;
	letter-spacing:.055em;
	text-transform:uppercase;
	color:#778998;
}

.xhs2-hero-title{
	display:block;
	font-size:14px;
	line-height:1.25;
	font-weight:800;
	color:var(--xhs-blue);
}

.xhs2-hero-text{
	margin-top:6px;
	font-size:10px;
	line-height:1.4;
	color:var(--xhs-muted);
}

/* Suche */
.xhs2-search{
	margin:0 0 17px;
	padding:12px;
	background:#fff;
	border:1px solid var(--xhs-line);
	border-radius:3px;
}

.xhs2-search-label{
	margin-bottom:7px;
	font-size:11px;
	font-weight:800;
	color:var(--xhs-blue);
}

/* Kontakt kompakt */
.xhs2-contact{
	display:grid;
	grid-template-columns:92px 1fr;
	gap:11px;
	align-items:center;
	margin-bottom:17px;
	padding:10px;
	background:var(--xhs-soft);
	border:1px solid var(--xhs-line);
	border-radius:3px;
}

.xhs2-contact img{
	height:74px;
	object-fit:cover;
	border-radius:2px;
}

.xhs2-contact strong{
	display:block;
	margin-bottom:4px;
	font-size:13px;
	line-height:1.15;
	color:var(--xhs-blue);
}

.xhs2-contact span{
	display:block;
	font-size:9px;
	line-height:1.35;
	color:var(--xhs-muted);
}

/* Business-Schwerpunkte */
.xhs2-business{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:8px;
	margin-bottom:18px;
}

.xhs2-business-card{
	display:flex;
	flex-direction:column;
	min-height:128px;
	overflow:hidden;
	background:#fff;
	border:1px solid var(--xhs-line);
	border-radius:3px;
}

.xhs2-business-card img{
	height:76px;
	object-fit:cover;
}

.xhs2-business-card div{
	padding:8px 9px 9px;
}

.xhs2-business-card strong{
	display:block;
	font-size:11px;
	line-height:1.2;
	color:var(--xhs-blue);
}

.xhs2-business-card span{
	display:block;
	margin-top:4px;
	font-size:8.5px;
	line-height:1.3;
	color:var(--xhs-muted);
}

/* Strategische Themen: bewusst kompakt */
.xhs2-focus{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:7px;
	margin-bottom:18px;
}

.xhs2-focus a{
	display:flex;
	align-items:center;
	min-height:58px;
	padding:9px 10px;
	background:var(--xhs-soft2);
	border:1px solid var(--xhs-line);
	border-left:3px solid var(--xhs-blue);
	border-radius:2px;
	font-size:10px;
	line-height:1.3;
	font-weight:700;
	color:var(--xhs-blue);
}

/* Fachbereiche: nicht mehr acht riesige Bilder untereinander */
.xhs2-hubs{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:8px;
	margin-bottom:18px;
}

.xhs2-hub{
	position:relative;
	height:92px;
	overflow:hidden;
	border-radius:3px;
	background:var(--xhs-dark);
}

.xhs2-hub img{
	width:100%;
	height:100%;
	object-fit:cover;
}

.xhs2-hub:after{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(to top,rgba(10,30,45,.82),rgba(10,30,45,.02) 72%);
	pointer-events:none;
}

.xhs2-hub span{
	position:absolute;
	z-index:2;
	left:8px;
	right:8px;
	bottom:7px;
	color:#fff;
	font-size:10px;
	line-height:1.15;
	font-weight:800;
	text-shadow:0 1px 2px rgba(0,0,0,.45);
}

/* Netzfunde */
.xhs2-netzfunde{
	margin-bottom:18px;
	padding:11px 12px;
	background:var(--xhs-soft);
	border:1px solid var(--xhs-line);
	border-radius:3px;
	text-align:center;
}

.xhs2-netzfunde strong{
	display:block;
	margin-bottom:4px;
	font-size:12px;
	color:var(--xhs-blue);
}

.xhs2-netzfunde span{
	display:block;
	font-size:9px;
	color:var(--xhs-muted);
}

/* Fremde Widgets / Kategorien an Magazin-Stil angleichen */
.xhs2 .widget,
.xhs2 .sidebar-content{
	margin:0 0 18px;
}

.xhs2 .widget-title{
	margin:0 0 9px !important;
	padding:0 0 7px !important;
	border-bottom:2px solid var(--xhs-blue);
	font-size:15px !important;
	line-height:1.15 !important;
	color:var(--xhs-blue) !important;
}

.xhs2 ul{
	margin:0;
	padding:0;
	list-style:none;
}

.xhs2 li{
	margin:0;
	padding:7px 0;
	border-bottom:1px solid #d9e2e9;
}

.xhs2 li a{
	font-size:10.5px;
	line-height:1.35;
	font-weight:700;
	color:var(--xhs-blue);
}

@media(max-width:700px){
	.xhs2-business,
	.xhs2-focus,
	.xhs2-hubs{
		grid-template-columns:1fr 1fr;
	}
}

/* Bilder aus dynamischen Sidebar-Widgets sauber zentrieren
   (u.a. QR-Code unter Xpert Netzfunde). */
.xhs2 .widget img,
.xhs2 .widget a > img,
.xhs2 .textwidget img,
.xhs2 .custom-html-widget img{
	display:block;
	margin-left:auto !important;
	margin-right:auto !important;
}

/* =========================================================
   LINKER AUSSENBEREICH
   ========================================================= */
.xpert-rail-left-v2{
	width:300px;
	max-width:300px;
	margin:0;
	padding:0;
	font-family:inherit;
	color:#234c70;
}

.xpert-rail-left-v2 *{
	box-sizing:border-box;
}

.xpert-rail-left-v2 a{
	text-decoration:none;
	color:inherit;
}

.xpert-rail-left-v2 img{
	display:block;
	max-width:100%;
	height:auto;
}

.xpert-rail-left-v2 .xrl-card{
	width:100%;
	margin:0 0 16px;
	background:#fafcfe;
	border:1px solid #d7e1e8;
	border-radius:4px;
	box-shadow:0 2px 8px rgba(0,0,0,.045);
	overflow:hidden;
}

.xpert-rail-left-v2 .xrl-card-inner{
	padding:18px 18px 16px;
}

.xpert-rail-left-v2 .xrl-card--accent{
	border-left:4px solid #d4af37;
	border-top-left-radius:0;
	border-bottom-left-radius:0;
}

.xpert-rail-left-v2 .xrl-kicker{
	display:block;
	margin:0 0 10px;
	font-size:12px;
	font-weight:800;
	line-height:1.2;
	letter-spacing:.02em;
	text-transform:uppercase;
	color:#234c70;
}

.xpert-rail-left-v2 .xrl-title{
	display:block;
	margin:0 0 10px;
	font-size:17px;
	font-weight:800;
	line-height:1.28;
	color:#2f2f2f;
}

.xpert-rail-left-v2 .xrl-text{
	display:block;
	font-size:13px;
	line-height:1.6;
	font-weight:600;
	color:#5c5c5c;
}

.xpert-rail-left-v2 .xrl-badge-card{
	text-align:center;
	background:#fffef9;
}

.xpert-rail-left-v2 .xrl-badge-wrap{
	padding:16px 14px 10px;
}

.xpert-rail-left-v2 .xrl-badge-image{
	margin:0 auto 10px;
	width:100%;
	max-width:240px;
}

.xpert-rail-left-v2 .xrl-badge-link{
	display:block;
	padding:0 14px 14px;
	font-size:13px;
	font-weight:800;
	line-height:1.2;
	color:#234c70;
	text-align:center;
}

.xpert-rail-left-v2 .xrl-badge-link:hover{
	color:#173b5a;
}

.xpert-rail-left-v2 .xrl-news-btn{
	display:flex;
	align-items:center;
	gap:12px;
	width:100%;
	padding:15px 16px;
	background:linear-gradient(180deg,#f2da77 0%, #e4c34a 100%);
	border:1px solid #c89d1b;
	border-radius:4px;
	box-shadow:0 2px 7px rgba(0,0,0,.06);
	color:#2e2e2e;
}

.xpert-rail-left-v2 .xrl-news-btn:hover{
	filter:brightness(.98);
}

.xpert-rail-left-v2 .xrl-news-icon{
	flex:0 0 18px;
	width:18px;
	height:18px;
	display:block;
}

.xpert-rail-left-v2 .xrl-news-copy{
	display:flex;
	flex-direction:column;
	gap:2px;
	text-align:left;
}

.xpert-rail-left-v2 .xrl-news-top{
	font-size:12px;
	line-height:1.2;
	font-weight:500;
}

.xpert-rail-left-v2 .xrl-news-bottom{
	font-size:14px;
	line-height:1.2;
	font-weight:800;
}

.xpert-rail-left-v2 .xrl-card:last-child{
	margin-bottom:0;
}

/* =========================================================
   ZUSÄTZLICHE STABILITÄTSREGELN
   ========================================================= */
.xpert-rail-left-v2 .xrl-card--news-wrap{
	padding:12px;
}

/* SVG bleibt auch dann klein, wenn Optimierer einzelne Regeln verzögert laden. */
.xpert-rail-left-v2 .xrl-news-icon{
	width:18px !important;
	height:18px !important;
}

/* =========================================================
   XPERT STARTSEITE – AUSSENRAIL V20 / CSS-ONLY
   Exakte Geometrie ohne JavaScript.

   Basis:
   - Hauptcontainer: 1122px
   - halbe Containerbreite: 561px
   - Rail: 300px
   - Abstand Rail -> Hauptcontainer: 12px
   - linker Sicherheitsrand: 24px
   - rechter Sicherheitsrand: 18px

   Rail unverschoben:
   left = 50vw - 561 - 12 - 300 = 50vw - 873px

   Ab 1794px ist links bereits >= 24px Platz.
   Zwischen 1476px und 1793px wird NUR so weit nach rechts
   verschoben, dass die Rail exakt 24px vom linken Rand steht:
   shift = 897px - 50vw

   Bei 1476px erreicht gleichzeitig der Hauptcontainer rechts
   den Sicherheitsrand von 18px. Darunter wird die Rail entfernt.
   ========================================================= */

/* Rail IMMER direkt links an den 1122px-Hauptcontainer andocken */
.xpert-start-rail-left {
	left: calc(50% - 873px) !important;
}

/* Großer Desktop: alles normal zentriert */
@media (min-width: 1794px) {
	.body-wrapper {
		left: 0 !important;
	}

	.xpert-start-rail-left {
		display: flex !important;
		visibility: visible !important;
	}
}

/* Übergangsbereich:
   ganze Seite nur um den tatsächlich nötigen Betrag nach rechts schieben.
   Ergebnis: Rail bleibt bei exakt 24px links; Abstand zum Hauptcontainer = 12px. */
@media (min-width: 1476px) and (max-width: 1793px) {
	.body-wrapper {
		left: calc(897px - 50vw) !important;
	}

	.xpert-start-rail-left {
		display: flex !important;
		visibility: visible !important;
	}
}

/* Darunter reicht der Platz für 1122px Hauptcontainer + 300px Rail + Abstände nicht mehr. */
@media (min-width: 1181px) and (max-width: 1475px) {
	.body-wrapper {
		left: 0 !important;
	}

	.xpert-start-rails,
	.xpert-start-rail-left,
	.xpert-start-rail-right {
		display: none !important;
	}
}

/* Tablet + Smartphone */
@media (max-width: 1180px) {
	.body-wrapper {
		left: 0 !important;
		transform: none !important;
	}

	.xpert-start-rails,
	.xpert-start-rail-left,
	.xpert-start-rail-right {
		display: none !important;
	}
}

/* =========================================================
   V23 – Linguise/Fremdsprachen: Bildkarten-Texte sofort weiß
   WordPress "Zusätzliches CSS" färbt h1/h2/h3 span.nt global blau.
   Linguise erzeugt/behält solche .nt-Spans auch in den Bildkarten.
   Deshalb hier lokal und absichtlich mit !important überschreiben.
   ========================================================= */
.xv2-lead-content .nt,
.xv2-lead-content span.nt,
.xv2-lead h1 .nt,
.xv2-lead h1 span.nt,
.xv2-side-content .nt,
.xv2-side-content span.nt,
.xv2-side-content h3 .nt,
.xv2-side-content h3 span.nt {
	color: #fff !important;
}

/* Auch ohne .nt-Wrapper müssen alle Textknoten der dunklen Bildkarten
   vom ersten Paint an weiß sein. */
.xv2-lead-content,
.xv2-lead-content h1,
.xv2-side-content,
.xv2-side-content h3 {
	color: #fff !important;
}

/* =========================================================
   V24 – Sidebar-Bereichsüberschriften mit Innenabstand
   Business Development / Strategische Xpert-Themen / Fachbereiche
   ========================================================= */
.xhs2-title {
	padding-left: 8px !important;
	padding-right: 8px !important;
}

/* Auch dynamische Widget-Titel im gleichen Stil nicht an die Kante kleben */
.xhs2 .widget-title {
	padding-left: 8px !important;
	padding-right: 8px !important;
}