/* ==========================================================================
   ARTICLE TEMPLATE STYLES
   ========================================================================== */

/* CSS-Variablen für Feed-Unterseiten überschreiben */
:root {
	--clr-text: var(--clr-black); /* noblack für Feed-Unterseiten */
}

/* Article Container - Skeleton 3|6|3 wie Feed */
.article-container {
	max-width: 1100px;
	margin: 2rem auto 0;
	padding: 0 20px;
	padding-bottom: 50px;
}

.article-container .feed-item {
	display: block;
	grid-template-columns: none;
	margin-top: 30px;
	margin-bottom: 30px;
	padding: 0;
}

.article-article {
	margin-left: 0;
	margin-right: 0;
}

/* Linke Spalte */
.article-left {
	position: relative;
}

/* Hauptteil - nutzt volle Breite für Layout-System (9 Spalten = 75%) */
.article-main {
	position: relative;
	width: 100%;
	overflow: visible; /* Ermöglicht, dass Titel nach rechts ausbricht */
}

.breadcrumb {
	font-size: 16px;
	line-height: 1.6;
	color: var(--clr-text);
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	/* border-top entfernt */
}

.breadcrumb a {
	color: var(--clr-text);
	text-decoration: none;
}

.breadcrumb a:hover {
	color: var(--clr-primary);
}

.separator {
	margin: 0 0.1rem;
}

.current {
	color: var(--clr-primary-accent);
	font-weight: 500;
}

/* Grafischer Breadcrumb: Kette aus Pfeil-Segmenten, Spitze rechts, Aussparung links (außer erstes) */
.breadcrumb-graphical {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0;
	margin-top: 30px;
	margin-bottom: 1rem;
	width: 150%;
	max-width: 150%;
	overflow: visible;
	white-space: nowrap;
}

.breadcrumb-graphical.breadcrumb-bottom {
	margin-top: 2.5rem;
	margin-bottom: 2rem;
}

.breadcrumb-graphical .breadcrumb-segment {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1.5rem 0.5rem 1rem;
	background: #fff;
	color: var(--clr-black);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	border: none;
	margin-left: -8px; /* Überlappung minus 2px Abstand, damit Spitzen sichtbar bleiben */
	position: relative;
	transition: color 0.2s ease, background 0.2s ease;
	white-space: nowrap;
	flex-shrink: 0;
}

/* Erstes Element: Spitze rechts, keine Aussparung links */
.breadcrumb-graphical .breadcrumb-segment:first-child {
	margin-left: 0;
	clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
}

/* Mittlere Elemente: negative Spitze links (Aussparung für Vorgänger), Spitze rechts */
.breadcrumb-graphical .breadcrumb-segment:not(:first-child):not(:last-child) {
	clip-path: polygon(0 0, 10px 50%, 0 100%, 10px 100%, calc(100% - 10px) 100%, 100% 50%, calc(100% - 10px) 0, 10px 0);
}

/* Letztes Element: negative Spitze links (Aussparung), keine Spitze rechts */
.breadcrumb-graphical .breadcrumb-segment:last-child {
	clip-path: polygon(0 0, 10px 50%, 0 100%, 10px 100%, 100% 100%, 100% 0, 10px 0);
}

.breadcrumb-graphical .breadcrumb-segment:nth-child(1) { z-index: 1; }
.breadcrumb-graphical .breadcrumb-segment:nth-child(2) { z-index: 2; }
.breadcrumb-graphical .breadcrumb-segment:nth-child(3) { z-index: 3; }
.breadcrumb-graphical .breadcrumb-segment:nth-child(4) { z-index: 4; }
.breadcrumb-graphical .breadcrumb-segment:nth-child(5) { z-index: 5; }
.breadcrumb-graphical .breadcrumb-segment:nth-child(6) { z-index: 6; }

.breadcrumb-graphical .breadcrumb-current {
	color: var(--clr-black);
	font-weight: 600;
	cursor: default;
}

/* feed-main overflow: visible damit Titel nach rechts ausbrechen kann */
.article-container .feed-main,
.article-container .six.columns {
	overflow: visible;
}

.article-header {
	position: relative;
	margin-bottom: 45px; /* 45px Abstand zwischen Headline und nachfolgendem Absatz */
	overflow: visible; /* Ermöglicht, dass Titel nach rechts ausbricht */
	width: 150%; /* Breite bis in rechte Spalte (6+3 Spalten) */
	max-width: 150%;
}

/* Abstract in Artikeln nicht anzeigen */
.feed-item-article .feed-abstract,
.feed-item-article .feed-abstract p {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	overflow: hidden !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Spezifische Anpassungen für Artikel (Basis-Styles in variables.css) */
.article-header .feed-page-title {
	width: auto;
	max-width: none;
	hyphens: none;
	display: flex;
	align-items: baseline;
	gap: 0; /* /Titel ohne Abstand */
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	left: 0;
	z-index: 100;
}

.article-title-link,
.article-header .feed-headline .article-title-link,
.article-header .feed-page-title .article-title-link {
	color: var(--clr-text);
	text-decoration: none;
	margin-right: 0;
	transition: color 0.2s ease;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	display: inline;
	padding: 0;
	margin-left: 0;
	margin-top: 0;
	margin-bottom: 0;
	cursor: pointer;
	line-height: inherit;
	vertical-align: baseline;
	position: relative;
	z-index: 10;
}

.article-title-link:hover,
.article-header .feed-page-title .article-title-link:hover {
	color: var(--clr-primary); /* Grün beim Mouseover */
	text-decoration: none; /* Keine Unterstreichung */
	transform: scale(1.05); /* Leichtes Vergrößern beim Hover */
	transition: color 0.2s ease, transform 0.2s ease;
}

.article-title-link:active {
	transform: scale(0.98); /* Leichtes Verkleinern beim Klick */
}

/* Deaktiviere ::before für feed-page-title und h1 in article.php (Slash ist jetzt im Link) */
.feed-item-article .feed-page-title::before,
.feed-item-article h1::before,
.feed-item-main h1::before,
.article-header h1::before,
.article-header .feed-page-title::before,
.article-header .feed-headline::before {
	content: "" !important; /* Kein Slash mehr, da jetzt im Link */
	display: none !important; /* Komplett ausblenden */
}

.article-title-text {
	flex: 1 1 auto; /* Kann wachsen und nach rechts ausbrechen */
	min-width: 0; /* Ermöglicht Shrinking falls nötig */
	max-width: none; /* Keine maximale Breite - kann nach rechts ausbrechen */
	width: auto; /* Automatische Breite basierend auf Inhalt */
	color: var(--clr-text);
	white-space: normal; /* Normale Zeilenumbrüche erlauben */
	word-wrap: break-word; /* Lange Wörter umbrechen falls nötig */
}

.article-hero-image {
	position: absolute;
	top: -140%;
	left: -20%;
	width: 100%;
	z-index: 0; /* Unter dem Text */
	margin: 0;
	pointer-events: none;
}

.article-hero-image img {
	width: 100%;
	height: auto;
	max-height: 400px;
	object-fit: cover;
	border-radius: var(--radius-md);
	display: block;
}

.article-hero-image figcaption {
	display: none; /* Caption wird nicht angezeigt, da Bild als Hintergrund dient */
}

/* Meta-Line: Datum und Tags in einer Zeile (wie im Feed) */
.article-meta-line {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.article-meta-first-line {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	width: 100%;
}

.article-date {
	font-size: 16px;
	font-weight: 400;
	color: var(--clr-text);
}

.article-stats-link {
	display: inline-flex;
	align-items: center;
	/* Verwendet .lnk-icon Basis-Klasse */
}

.article-icon {
	display: block;
	width: 16px;
	height: 16px;
	filter: brightness(0) saturate(100%) invert(28%) sepia(100%) saturate(1000%) hue-rotate(90deg) brightness(0.6);
}

.article-tags-inline {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	align-items: center;
}

.article-tag {
	font-size: 16px;
	/* Verwendet .lnk-tag Basis-Klasse */
}

.article-tag::first-letter {
	text-transform: uppercase;
}

.article-content {
	position: relative;
	z-index: 2; /* Über dem Bild */
	margin: 0;
	margin-left: calc(-25% - 20px); /* Nach links verschoben: -3 Spalten (links) minus Container-Padding */
	width: calc(100% + 25% + 20px); /* Volle Breite (6 Spalten) plus Verschiebung (3 Spalten) */
}

/* Pilcrow-Zeichen nur am Ende des gesamten Artikels - entferne von allen Absätzen */
.feed-item-article .feed-full-content .block-text p:last-child::after {
	content: "";
}

/* Pilcrow-Zeichen nur am Ende des letzten block-text im gesamten Artikel */
.feed-item-article .feed-full-content .layout-section:last-child .block-text:last-child p:last-child::after {
	content: " ¶";
	color: var(--clr-green);
	font-size: 1em;
	display: inline;
	margin-left: 5px;
}

/* Layout System */
.layout-section {
	margin: 2rem 0;
}

.layout-columns {
	display: block;
	width: 100%;
}

/* Standard: 1 Spalte (1/1) - verwendet Skeleton .twelve.columns */
.layout-columns .layout-column {
	width: 100%;
	margin-left: 0;
}

/* 2 Spalten (1/2, 1/2) - verwendet Skeleton .six.columns */
.layout-columns[data-columns="2"] {
	display: block;
}

.layout-columns[data-columns="2"] .layout-column {
	width: 48%;
	margin-left: 2%;
	float: left;
	box-sizing: border-box;
}

.layout-columns[data-columns="2"] .layout-column:first-child {
	margin-left: 0;
}

.layout-column {
	min-width: 0; /* Verhindert Overflow */
	box-sizing: border-box;
}

/* Clearfix für layout-columns */
.layout-columns::after {
	content: "";
	display: table;
	clear: both;
}

/* Block Styling */
.block-heading {
	font-weight: 700;
	margin: var(--spacing-lg) 0 var(--spacing-md) 0;
	color: var(--clr-text);
	line-height: 1.3;
}

.block-heading:first-child {
	margin-top: 0;
}

/* H2: Zwischen H1 (4.2rem) und H3 (18px) */
h2.block-heading,
.block-text h2 {
	font-size: 2.1rem; /* Mittelwert zwischen 4.2rem und 1.125rem */
	font-weight: 700;
	margin-top: 2.1875rem; /* 35px Abstand vor H2 */
	margin-bottom: var(--spacing-md); /* Behält margin-bottom von .block-heading */
}

h2.block-heading:first-child,
.block-text h2:first-child {
	margin-top: 0; /* Kein Abstand beim ersten Element */
}

/* H3: Normale Schriftgröße (18px), nur fett */
h3.block-heading,
.block-text h3 {
	font-size: 1.125rem; /* 18px - normale Schriftgröße */
	font-weight: 700;
	margin-top: 2.1875rem; /* 35px Abstand vor H3 */
	margin-bottom: 0; /* margin-bottom entfernt */
}

h3.block-heading:first-child,
.block-text h3:first-child {
	margin-top: 0; /* Kein Abstand beim ersten Element */
}

.block-text {
	font-size: 1.125rem; /* 18px für bessere Lesbarkeit */
	line-height: 1.7; /* Etwas mehr Zeilenabstand für bessere Lesbarkeit bei größerer Schrift */
	color: var(--clr-black); /* noblack */
	margin-bottom: var(--spacing-md);
	/* padding-right wird per JavaScript gesteuert für optimale Zeilenumbrüche */
}

.block-text p {
	margin-bottom: 0;
	text-indent: 1.25rem; /* 20px Einzug am Anfang eines Absatzes */
	white-space: normal; /* Normale Whitespace-Behandlung */
}

.block-text p:first-of-type {
	text-indent: 0; /* Kein Einzug beim ersten Absatz */
}

.block-text h2 + p,
.block-text h3 + p {
	text-indent: 0; /* Kein Einzug nach Überschriften */
}

.block-text p:last-child {
	margin-bottom: 0;
}

/* Sicherstellen, dass inline-Elemente Leerzeichen behalten */
/* Gilt für normale Blocks UND Layout-Blocks */
.block-text p strong,
.block-text p em,
.block-text p a,
.block-text p code,
.layout-column .block-text p strong,
.layout-column .block-text p em,
.layout-column .block-text p a,
.layout-column .block-text p code {
	white-space: normal;
	display: inline; /* Explizit inline, damit Leerzeichen erhalten bleiben */
}

/* Links im Text: Standardmäßig unterstrichen (wie .lnk-text) */
.block-text p a {
	text-decoration: underline;
	color: var(--clr-text);
}
.block-text p a:hover {
	color: var(--clr-primary);
	text-decoration: underline;
}

/* Überschreibungen für spezielle Link-Klassen */
.block-text p a.lnk-icon {
	text-decoration: none; /* Icon-Links: kein Underline */
}
.block-text p a.lnk-icon:hover {
	color: var(--clr-primary);
	text-decoration: none;
}

.block-text p a.lnk-primary {
	text-decoration: none; /* Grün-Links: kein Underline */
	color: var(--clr-primary);
}
.block-text p a.lnk-primary:hover {
	text-decoration: underline; /* Hover: Underline */
}

.block-quote {
	margin: var(--spacing-lg) 0;
	padding: var(--spacing-md) 0;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	font-style: italic;
	color: var(--clr-text);
}

.block-quote cite {
	display: block;
	margin-top: var(--spacing-sm);
	font-size: 0.9rem;
	font-style: normal;
	opacity: 0.8;
}

/* ==========================================================================
   Block Image - 3 Ausrichtungsoptionen
   ========================================================================== */

.block-image {
	margin: var(--spacing-lg) 0;
}

.block-image-wrapper {
	position: relative;
	display: inline-block;
	width: 100%;
}

.block-image-wrapper img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--radius-sm);
}

/* Foto-Credits per Mouseover */
.block-image-credits {
	position: absolute;
	bottom: 10px;
	left: 10px;
	color: white;
	padding: 4px 8px;
	font-size: 0.75rem;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
	z-index: 10;
}

.block-image-wrapper:hover .block-image-credits {
	opacity: 1;
}

/* Bildunterschrift linksbündig unter dem Bild */
.block-image-caption {
	margin-top: 0.5rem;
	text-align: left;
	font-size: 0.9rem;
	color: var(--clr-text);
	opacity: 0.8;
	line-height: 1.5;
}

/* Ausrichtung 1: Sidebar (Links neben Text) - Bild in 3 Spalten linker Spalte */
.block-image-sidebar {
	margin: 0;
	width: 300px; /* Linke Spalte Breite */
	max-width: 300px;
	margin-left: calc(-33.33% - 20px); /* Nach links in die erste Spalte verschieben (1 leer + 3) */
	float: left;
	margin-right: 20px; /* Abstand zum Text */
	vertical-align: top; /* Oben bündig */
	clear: left;
}

.block-image-sidebar .block-image-wrapper {
	width: 100%;
	max-width: 300px;
}

.block-image-sidebar img {
	max-width: 300px;
	width: 100%;
	height: auto;
}

/* Ausrichtung 2: Inline (Im Text) - 282px breit */
.block-image-inline {
	margin: var(--spacing-lg) 0;
	width: 282px;
	max-width: 282px;
}

/* Ausrichtung 3: Fullwidth (Beide Spalten) - von links nach rechts über beide Spalten */
.block-image-fullwidth {
	margin: var(--spacing-lg) 0;
	width: calc(100% + 25% + 20px); /* Volle Breite (6 Spalten) plus Verschiebung (3 Spalten) */
	max-width: calc(100% + 25% + 20px);
	margin-left: calc(-25% - 20px); /* Gleiche Verschiebung wie article-content */
}

/* Breite erzwingen: Bild wird auf 770px gestreckt */
.block-image-fullwidth.block-image-force-width {
	width: 770px;
	max-width: 770px;
	margin-left: calc(-25% - 20px); /* Nach links verschoben */
}

.block-image-fullwidth.block-image-force-width .block-image-wrapper {
	width: 100%;
}

.block-image-fullwidth.block-image-force-width img {
	width: 100%;
	height: auto;
	object-fit: cover; /* Optional: Bild füllt den Bereich aus */
}

/* Ohne Breite erzwingen: Bild behält seine natürliche Größe */
.block-image-fullwidth:not(.block-image-force-width) .block-image-wrapper {
	width: auto;
	max-width: calc(100% + 25% + 20px);
}

.block-image-fullwidth:not(.block-image-force-width) img {
	width: auto;
	max-width: calc(100% + 25% + 20px);
	height: auto;
}

/* Responsive Anpassungen */
@media (max-width: 1280px) {
	.block-image-sidebar {
		float: none;
		width: 100%;
		margin-left: 0;
		margin-right: 0;
		margin-bottom: var(--spacing-md);
	}
	
	.block-image-sidebar .block-image-wrapper,
	.block-image-sidebar img {
		max-width: 100%;
	}
	
	.block-image-fullwidth {
		width: 100%;
		margin-left: 0;
	}
	
	.block-image-fullwidth.block-image-force-width img {
		object-fit: contain; /* Auf Mobile besser contain statt cover */
	}
}

.article-related {
	margin: 3rem 0;
	padding: var(--spacing-lg);
	background: var(--clr-success-light);
	border-radius: var(--radius-sm);
}

.article-related h3 {
	margin-bottom: 1rem;
}

.related-posts {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.related-post {
	padding: var(--spacing-sm) var(--spacing-md);
	background: var(--clr-surface);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-sm);
	text-decoration: none;
	color: var(--clr-text);
	transition: var(--transition);
}

.related-post:hover {
	background: var(--clr-primary);
	color: var(--clr-surface);
	text-decoration: none;
}


/* Responsive Design */
/* Tablets - 3-Spalten-Layout bleibt erhalten bis 768px */
@media (max-width: 1280px) {
	.article-container {
		max-width: 100%;
		padding: 2rem 1rem;
	}
	
	/* 3-Spalten-Layout bleibt erhalten, nur Container-Anpassungen */
}

/* Mobile - Ab hier 1-Spalten-Layout */
@media (max-width: 768px) {
	.article-container {
		padding: 1rem;
	}
	
	.article-empty,
	.article-left,
	.article-main,
	.article-right {
		width: 100%;
		margin-bottom: 1.5rem;
	}
	
	.article-empty:last-child,
	.article-left:last-child,
	.article-main:last-child,
	.article-right:last-child {
		margin-bottom: 0;
	}
	
	.feed-headline,
	.article-header .feed-page-title {
		font-size: 2.8rem;
		width: 100%;
		margin-left: 0;
	}
	
	.article-header .feed-page-title::before {
		content: "" !important;
		display: none !important;
	}
	
	.feed-item-article .feed-page-title::before,
	.feed-item-article h1::before {
		content: "" !important;
	}
	
	.article-content {
		margin-left: 0;
		width: 100%;
	}
	
	.article-hero-image {
		margin-bottom: 2rem;
	}
	.article-meta-first-line {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--spacing-2);
		width: 100%;
	}
	
	.article-date {
		font-size: 14px;
		white-space: nowrap;
	}
	
	.article-tags-inline {
		flex-wrap: wrap;
		gap: 0.25rem;
	}
	
	.article-tag {
		font-size: 14px;
	}
	
	.breadcrumb,
	.breadcrumb-graphical .breadcrumb-segment {
		font-size: 13px;
	}
	
	.breadcrumb-graphical .breadcrumb-segment {
		padding: 0.4rem 1rem 0.4rem 0.75rem;
		margin-left: -10px;
	}
	
	.breadcrumb-graphical .breadcrumb-segment:first-child {
		margin-left: 0;
	}
	
	.breadcrumb {
		margin-top: var(--spacing-2);
		line-height: 1.4;
	}
	
	.article-tags-inline {
		flex-wrap: wrap;
	}
	
	.article-content {
		width: 100%;
		margin-left: 0;
	}
	
	.layout-columns {
		grid-template-columns: 1fr !important;
	}
	
	.layout-column {
		width: 100% !important;
	}
	
	.article-hero-image {
		position: relative;
		top: 0;
		left: 0;
		margin-bottom: var(--spacing-4);
		width: 100% !important;
		max-width: 100% !important;
	}
	
	.article-hero-image img {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
	}
	
	/* Sidebar- und Fullwidth-Bilder werden bei Smartphone inline (wie inline-Bilder) */
	.block-image-sidebar,
	.block-image-fullwidth {
		float: none !important;
		width: auto !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		margin-top: var(--spacing-md) !important;
		margin-bottom: var(--spacing-md) !important;
		clear: both;
	}
	
	.block-image-sidebar .block-image-wrapper,
	.block-image-fullwidth .block-image-wrapper {
		width: auto !important;
		max-width: 100% !important;
		margin: 0 !important;
	}
	
	.block-image-sidebar img,
	.block-image-fullwidth img {
		width: auto !important;
		max-width: 100% !important;
		height: auto !important;
		display: inline-block;
	}
	
	/* Inline-Bilder bleiben wie sie sind */
	.block-image-inline {
		width: auto !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

@media (max-width: 480px) {
	.feed-headline,
	.article-header .feed-page-title {
		font-size: 2.2rem;
		width: 100%;
		margin-left: 0;
	}
	
	.feed-item-article .feed-page-title::before,
	.feed-item-article h1::before {
		content: "" !important;
	}
	
	.article-container {
		padding: 1rem 0.5rem;
	}
	
	.article-meta-line {
		padding: 0 0.5rem;
		flex-direction: column;
		gap: var(--spacing-2);
	}
	
	.article-meta-first-line {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--spacing-2);
		width: 100%;
	}
	
	.article-date {
		font-size: 13px;
		white-space: nowrap;
	}
	
	.article-tags-inline {
		flex-wrap: wrap;
		gap: 0.25rem;
	}
	
	.article-tag {
		font-size: 13px;
	}
	
	.breadcrumb {
		font-size: 13px;
		word-break: break-word;
		width: 100%;
		margin-top: var(--spacing-1);
		line-height: 1.4;
		display: block;
	}
	
	.article-content {
		margin-left: 0;
		width: 100%;
	}
	
	/* Sidebar- und Fullwidth-Bilder werden bei Small Mobile inline (wie inline-Bilder) */
	.article-content .block-image-sidebar,
	.article-content .block-image-fullwidth {
		float: none !important;
		width: auto !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		margin-top: var(--spacing-md) !important;
		margin-bottom: var(--spacing-md) !important;
		clear: both;
	}
	
	.article-content .block-image-sidebar .block-image-wrapper,
	.article-content .block-image-fullwidth .block-image-wrapper {
		width: auto !important;
		max-width: 100% !important;
		margin: 0 !important;
	}
	
	.article-content .block-image-sidebar img,
	.article-content .block-image-fullwidth img {
		width: auto !important;
		max-width: 100% !important;
		height: auto !important;
		display: inline-block;
	}
	
	/* Inline-Bilder bleiben wie sie sind */
	.block-image-inline {
		width: auto !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/* Postfooter mit weißem Hintergrund, wenn kein Footer vorhanden */
.postfooter-standalone {
	background: var(--clr-surface);
	padding: var(--spacing-lg) 0;
	margin-top: 3rem;
}

/* ==========================================================================
   SHORTCUT BLOCK STYLES
   ========================================================================== */

.shortcut-wrapper {
  width: 140px;
  margin-right: 40px;
  margin-bottom: 20px;
  font-family: inherit;
  color: var(--clr-black);
}

/* Alignment: Inline (Standard) */
.shortcut-wrapper.shortcut-block--inline {
  display: inline-block;
  vertical-align: top;
  margin-top: 20px;
  margin-bottom: 40px;
}

/* Alignment: Sidebar (links neben Text) */
.shortcut-wrapper.shortcut-block--sidebar {
  float: left;
  margin-right: 20px;
  margin-bottom: 40px;
  margin-left: calc(-25% - 20px); /* Nach links in die linke Spalte verschieben (3 Spalten) */
}

.shortcut-item {
  display: flex;
  flex-direction: column;
  /* border: 1px solid var(--clr-gray-dark, #222); */
  background: transparent;
}

/* Reihe 1: Icon (100px hoch, zentriert) */
.shortcut-row.shortcut-type-icon {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 2px solid var(--clr-black);
  border-bottom: 1px solid var(--clr-black);
}

.shortcut-icon {
  font-size: 48px;
  line-height: 1;
  font-family: inherit;
  color: var(--clr-black);
}

/* Reihe 2: Name (zentriert) */
.shortcut-row.shortcut-type-name {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: none;
  border-bottom: 1px solid var(--clr-black);
  text-align: center;
  padding: 8px 4px;
}

.shortcut-name {
  font-size: 14px;
  line-height: 1.4;
  color: var(--clr-black);
  white-space: normal;
  word-wrap: break-word;
}

/* Reihe 3-5: Optional (je 30px hoch) */
.shortcut-row.shortcut-type-code {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: none;
  border-bottom: none;
  font-size: 12px;
  color: var(--clr-black);
  padding: 0 4px;
}

.shortcut-row.shortcut-type-shortcut {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: none;
  border-bottom: none;
  font-size: 12px;
  color: var(--clr-black);
  padding: 0 4px;
}

.shortcut-meta {
  display: none !important;
}

.shortcut-value {
  text-align: center;
  color: var(--clr-black);
}

/* Letzte Reihe: Border unten 2px (wenn PC vorhanden) */
.shortcut-item > .shortcut-row:last-child {
  border-bottom: 2px solid var(--clr-black);
}

/* Alignment: 4er-Reihe (Fullwidth) – wie block-image-fullwidth, 4 Shortcuts nebeneinander */
.shortcut-row4-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: var(--spacing-lg) 0;
  width: calc(100% + 25% + 20px);
  max-width: none;
  margin-left: calc(-25% - 20px);
  clear: both;
}

.shortcut-row4-wrapper .shortcut-wrapper {
  width: calc(25% - 15px);
  min-width: 120px;
  max-width: 180px;
  margin: 0;
  flex: 1 1 calc(25% - 15px);
}

/* Mobile Anpassungen */
@media only screen and (max-width: 799px) {
  .shortcut-wrapper {
    width: 100%;
    max-width: 140px;
    margin-right: 0;
    margin-bottom: 30px;
  }
  
  .shortcut-wrapper.shortcut-block--sidebar {
    float: none;
    margin-right: 0;
    margin-bottom: 30px;
  }

  .shortcut-row4-wrapper {
    width: 100%;
    margin-left: 0;
    flex-direction: column;
  }

  .shortcut-row4-wrapper .shortcut-wrapper {
    width: 100%;
    max-width: 140px;
    flex: none;
  }
}