/**
 * Single Post Template Styles
 * Based on Figma Design
 */

/* Hero Bereich mit grünem Hintergrund - exakt wie Figma: 500px Höhe */
.single-post-template .has-secondary-green-background-color {
	height: 500px;
	position: relative;
	margin-top: 0;
	margin-bottom: 0;
	/* Der grüne Bereich beginnt direkt nach dem 100px Header */
}

/* Hero Bereich sollte unter dem Header sein */
.single-post-template {
	margin-top: 0;
	overflow: visible !important; /* Wichtig für sticky */
}

/* Overflow visible für fixed sidebar */
.single-post-template main,
.single-post-template .wp-block-group {
	overflow: visible !important;
}

/* Hauptinhalt Container - Content ragt 250px in den grünen Bereich hinein (Figma: Content top 350px, grüner Bereich endet bei 600px) */
.single-post-content-wrapper {
	position: relative;
	max-width: 100%;
	margin: 0;
	margin-top: -250px !important; /* Content ragt 250px in grünen Bereich: 600px (grün Ende) - 350px (Content Start) = 250px */
	padding: 0;
	background-color: transparent; /* Transparent, damit der weiße Content-Area sichtbar ist */
	overflow: visible !important; /* Wichtig für fixed sidebar */
}

/* Layout für Hauptinhalt - Block-Layout, Sidebar ist fixed overlay */
.single-post-main-layout {
	position: relative;
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Überschreibe WordPress Block Styles */
.single-post-content-wrapper .single-post-main-layout,
.single-post-content-wrapper .single-post-main-layout.wp-block-group,
.single-post-main-layout.wp-block-group,
.single-post-main-layout.is-layout-flex,
.single-post-main-layout.wp-block-group-is-layout-flex {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ===========================================
   INHALTSVERZEICHNIS SIDEBAR - Desktop/Tablet
   Fly-in von links, X-Close Button oben rechts
   =========================================== */

.single-post-main-layout .table-of-contents-sidebar,
.wp-block-group.table-of-contents-sidebar,
.table-of-contents-sidebar.has-primary-blue-background-color,
.table-of-contents-sidebar.is-layout-flow,
.table-of-contents-sidebar.wp-block-group-is-layout-flow {
	/* Variablen */
	--toc-width: 320px;
	--toc-tab-width: 50px;
	--toc-tab-height: 200px;

	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: var(--toc-width) !important;
	min-width: 0 !important;
	max-width: var(--toc-width) !important;
	height: 100vh !important;
	max-height: 100vh !important;
	z-index: 1000 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
	background-color: var(--wp--preset--color--primary-blue) !important;
	transform: translateX(-100%); /* Initial eingeklappt - kein Flash */
	transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease;
	box-shadow: none; /* Initial kein Shadow */
	overflow: visible !important; /* visible damit Toggle-Button außerhalb sichtbar bleibt */
}

/* Panel mit Content - Initial versteckt (kein Flash) */
.table-of-contents-sidebar .toc-panel {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 80px 30px 30px 30px;
	height: 100%;
	max-height: 100vh;
	overflow-y: auto;
	box-sizing: border-box;
	opacity: 0; /* Initial versteckt */
	transform: translateX(-20px);
	pointer-events: none;
	transition: opacity 0.3s ease 0.1s, transform 0.3s ease;
}

/* Toggle-Button (Tab am rechten Rand, vertikal) - immer sichtbar */
.table-of-contents-sidebar .toc-toggle {
	display: flex; /* Immer sichtbar */
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 50%;
	right: calc(-1 * var(--toc-tab-width));
	width: var(--toc-tab-width);
	height: var(--toc-tab-height);
	padding: 0;
	border: none;
	border-radius: 0;
	background: var(--wp--preset--color--primary-blue);
	color: var(--wp--preset--color--primary-white);
	font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transform: translateY(-50%);
	transition: background 0.2s ease;
	box-shadow: 4px 0 15px rgba(30, 55, 145, 0.2);
}

.table-of-contents-sidebar .toc-toggle .toc-toggle__text {
	display: block;
	transform: rotate(-90deg);
	transform-origin: center;
	white-space: nowrap;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.5px;
}

.table-of-contents-sidebar .toc-toggle:hover,
.table-of-contents-sidebar .toc-toggle:focus-visible {
	background: #152d7a;
}

.table-of-contents-sidebar .toc-toggle:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary-white);
	outline-offset: -3px;
}


/* Collapsed State */
.table-of-contents-sidebar.is-collapsed {
	transform: translateX(-100%);
	box-shadow: none;
}

/* Toggle-Button bleibt auch bei collapsed sichtbar (bereits flex) */

.table-of-contents-sidebar.is-collapsed .toc-panel {
	opacity: 0;
	transform: translateX(-20px);
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Expanded State - Sidebar ausgeklappt */
.table-of-contents-sidebar:not(.is-collapsed) {
	transform: translateX(0);
	box-shadow: 4px 0 30px rgba(30, 55, 145, 0.25);
}

.table-of-contents-sidebar:not(.is-collapsed) .toc-panel {
	opacity: 1;
	transform: translateX(0);
	pointer-events: auto;
	transition: opacity 0.3s ease 0.15s, transform 0.3s ease 0.1s;
}

/* Content Bereich - Zentriert, Figma: width 1100px, padding 100px top/left/right, 40px bottom */
.single-post-content-area {
	position: relative;
	width: 1100px !important;
	max-width: 100% !important;
	margin: 0 auto !important; /* Echt zentriert */
	padding: 100px 100px 40px 100px !important; /* Figma: pt-100px, px-100px, pb-40px */
	box-sizing: border-box;
	background-color: var(--wp--preset--color--primary-white);
}

/* Alle direkten Kinder des Content-Bereichs - max 900px (1100px - 200px padding) */
.single-post-content-area > * {
	max-width: 900px !important; /* Figma: Content-Breite innerhalb des 1100px Containers */
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	box-sizing: border-box;
}

/* Hauptinhalt innerhalb des Content-Bereichs */
.single-post-content.wp-block-group,
.single-post-content {
	max-width: 900px !important;
	margin: 0 auto !important; /* Zentriert den Content */
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Scrollbar im Inhaltsverzeichnis verstecken */
.table-of-contents-sidebar::-webkit-scrollbar {
	display: none; /* Chrome, Safari, Opera */
}

/* Inhaltsverzeichnis Liste */
.toc-list {
	list-style: none;
	padding: 20px 0 0 0;
	margin: 20px 0 0 0;
}

/* Inhaltsverzeichnis-Links verhalten sich wie ein Menü (#67):
   ruhend  = aufgehelltes Weiß auf Blau, ohne Linie
   hover   = volle Deckkraft + Unterstreichung
   aktiv   = volle Deckkraft, fett, ohne Linie */
.toc-list a {
	color: var(--wp--preset--color--primary-white) !important;
	text-decoration: none !important; /* Keine Unterstreichung für den gesamten Link */
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0;
	margin: 0;
	font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif) !important;
	font-size: 18px !important;
	font-weight: 500;
	line-height: 1.5;
	opacity: 0.7;
	transition: opacity 0.2s;
}

/* Pfeil nicht unterstreichen */
.toc-list a span:first-child {
	text-decoration: none !important;
}

/* Ruhender Textlabel ohne Linie */
.toc-list a span:last-child {
	text-decoration: none !important;
}

/* Aktiver Eintrag: hervorgehoben, aber ohne Linie.
   Steht bewusst VOR den Hover-Regeln, damit Hover auch auf dem
   aktiven Eintrag noch eine Linie zeigt. */
.toc-list a.is-active {
	opacity: 1;
	font-weight: 700;
}

/* Linie erst bei Mouse-over bzw. Tastatur-Fokus */
.toc-list a:hover,
.toc-list a:focus-visible {
	opacity: 1;
}

.toc-list a:hover span:last-child,
.toc-list a:focus-visible span:last-child {
	text-decoration: underline !important;
}

.toc-list li {
	margin: 0;
	padding: 0;
}

.toc-list > li {
	margin-bottom: 10px !important;
}

/* Sidebar Überschrift */
.table-of-contents-sidebar h3 {
	margin: 0 0 0 0 !important;
	padding: 0 !important;
	color: var(--wp--preset--color--primary-white) !important;
	font-size: 28px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
}

/* Breadcrumbs - keine Bulletpoints */
.single-post-template .wp-block-post-terms {
	margin: 0;
	list-style: none !important;
	padding: 0;
	display: inline;
}

.single-post-template .wp-block-post-terms ul {
	list-style: none !important;
	padding: 0;
	margin: 0;
	display: inline;
}

.single-post-template .wp-block-post-terms li {
	list-style: none !important;
	display: inline;
	margin: 0;
	padding: 0;
}

.single-post-template .wp-block-post-terms li::before,
.single-post-template .wp-block-post-terms li::after {
	content: none !important;
}

.single-post-template .wp-block-post-terms a {
	text-decoration: underline !important;
	color: var(--wp--preset--color--primary-blue) !important;
}

.single-post-template .wp-block-post-terms a:hover {
	text-decoration: underline;
}

/* Breadcrumbs Paragraph - keine List-Styles */
.single-post-content-area p {
	margin: 0;
	padding: 0;
}

.single-post-content-area p:has(.wp-block-home-link),
.single-post-content-area p:has(.wp-block-post-terms) {
	list-style: none !important;
}

.single-post-content-area p:has(.wp-block-home-link)::before,
.single-post-content-area p:has(.wp-block-post-terms)::before {
	content: none !important;
}

/* Breadcrumbs Separator - bereits im HTML vorhanden */
.single-post-content-area .wp-block-home-link {
	display: inline;
}

.single-post-content-area .wp-block-post-terms {
	display: inline;
}

/* Breadcrumbs Links unterstrichen - überschreibt inline styles */
.single-post-content-area .wp-block-home-link a,
.single-post-content-area > p > a,
.single-post-content-area > p .wp-block-post-terms a,
.single-post-content-area p.has-primary-blue-color a,
.single-post-content-area p.has-primary-blue-color a.has-primary-blue-color,
.single-post-content-area p a[href] {
	text-decoration: underline !important;
	color: var(--wp--preset--color--primary-blue) !important;
}

/* Featured Image Container */
.single-post-template .wp-block-post-featured-image {
	margin-top: 20px;
	margin-bottom: 10px;
	max-width: 900px;
}

/* Content-Bilder: Grundabstand. Den Rhythmus zu Text und Ueberschriften
   regelt content-spacing.css, dort steht .wp-block-image seit #66 in
   denselben Gruppen wie Video und Zitat. Diese Regel bleibt als Basis
   fuer Bilder ausserhalb der dort abgedeckten Nachbarschaften. */
.single-post-content .wp-block-image {
	margin-top: 30px;
	margin-bottom: 30px;
}

/* Die feste Bildhoehe gehoert auf das <img>, nicht auf die <figure> (#75).
   Das Template setzt am Block height/aspect-ratio, WordPress schreibt beides
   inline auf die figure. Die Bildunterschrift wird per Filter INNERHALB der
   figure eingefuegt (functions.php) - bei fester Hoehe steht sie damit
   ausserhalb des Layoutflusses, und die nachfolgende Ueberschrift rutscht
   darueber. Gemessen: 12px Ueberlappung am Desktop, 36px auf dem Handy, wo
   die Unterschrift zweizeilig umbricht.
   Die figure waechst jetzt mit der Unterschrift mit; die Bildgeometrie
   (900x460, formatfuellend) bleibt unveraendert. */
.single-post-template .wp-block-post-featured-image {
	height: auto !important;
	aspect-ratio: auto !important;
}

/* `!important` ist hier noetig: WordPress schreibt dem Bild wegen der
   Block-Hoehe ein inline `height:100%`. Das bezog sich auf die feste
   figure-Hoehe und liefe jetzt, da die figure mitwaechst, ins Leere - das
   Bild wuerde auf sein natuerliches Seitenverhaeltnis springen und je nach
   Viewport zwischen 223px und 575px hoch werden. Mit dem festen Wert bleibt
   die Darstellung exakt so wie vor der Korrektur. */
.single-post-template .wp-block-post-featured-image img {
	width: 100%;
	height: 460px !important;
	object-fit: cover;
	display: block;
}

/* Kategorien Tags */
.category-tag {
	display: inline-block;
	margin-right: 15px;
	margin-bottom: 15px;
	background-color: var(--wp--preset--color--primary-white);
	border: 3px solid var(--wp--preset--color--primary-blue);
	padding: 12px 15px;
	font-size: 18px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	color: var(--wp--preset--color--primary-blue);
	transition: background-color 0.2s;
}

.category-tag:hover {
	background-color: var(--wp--preset--color--contrast);
}

/* Recommended Posts - Grid Layout Fix */
.recommended-posts-grid {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 20px !important;
	width: 100% !important;
	max-width: 100% !important;
}

.recommended-posts-grid .kbd-single-card {
	max-width: 100% !important;
	width: 100% !important;
	height: 100% !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
}

.recommended-posts-grid .kbd-single-card__content {
	flex: 1 !important;
	display: flex !important;
	flex-direction: column !important;
}

.recommended-posts-grid .kbd-single-card__inner {
	flex: 1 !important;
}

/* Recommended Posts - Mobile: 1 Spalte, volle Breite */
@media (max-width: 540px) {
	.recommended-posts-grid {
		grid-template-columns: 1fr !important;
	}
}

/* Recommended Post Cards */
.single-post-content .wp-block-group.has-border-color.has-primary-blue-border-color {
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	overflow: hidden !important;
}


.recommended-post-image {
	background-color: var(--wp--preset--color--secondary-salmon);
	border-bottom: 3px solid var(--wp--preset--color--primary-blue);
	width: 100% !important;
	max-width: 100% !important;
}

.recommended-post-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}

/* Breadcrumbs Styling */
.single-post-template .wp-block-home-link,
.single-post-template .wp-block-home-link a {
	text-decoration: underline !important;
	color: var(--wp--preset--color--primary-blue) !important;
}

.single-post-template .wp-block-home-link:hover {
	text-decoration: underline;
}

/* Autor und Datum Layout */
.single-post-template .wp-block-group[style*="justify-content:space-between"] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	max-width: 900px;
	margin: 0 auto; /* Zentriert */
	margin-top: 30px !important; /* 30px Abstand zur HR-Linie darüber */
}

/* Autor Avatar - Kreis - Sichtbar machen */
.single-post-content-area .wp-block-post-author-avatar,
.single-post-template .wp-block-post-author-avatar {
	display: inline-block !important;
	visibility: visible !important;
	opacity: 1 !important;
	vertical-align: middle !important;
	margin-right: 10px !important;
	flex-shrink: 0 !important;
	width: 62px !important;
	height: 62px !important;
	min-width: 62px !important;
	min-height: 62px !important;
}

.single-post-content-area .wp-block-post-author-avatar img,
.single-post-template .wp-block-post-author-avatar img,
.single-post-content-area .wp-block-post-author-avatar a img,
.single-post-template .wp-block-post-author-avatar a img,
.single-post-content-area .wp-block-post-author-avatar .avatar,
.single-post-template .wp-block-post-author-avatar .avatar,
.single-post-content-area .wp-block-post-author-avatar a,
.single-post-template .wp-block-post-author-avatar a,
.single-post-content-area .wp-block-post-author-avatar .author-avatar-img,
.single-post-template .wp-block-post-author-avatar .author-avatar-img {
	border-radius: 50% !important;
	width: 62px !important;
	height: 62px !important;
	min-width: 62px !important;
	min-height: 62px !important;
	object-fit: cover !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* Fallback für Avatar wenn kein Bild vorhanden - Standard WordPress Avatar anzeigen */
.single-post-content-area .wp-block-post-author-avatar:empty::before,
.single-post-template .wp-block-post-author-avatar:empty::before {
	content: '';
	display: inline-block;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--contrast);
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="62" height="62"><circle cx="31" cy="31" r="31" fill="%23d9d9d9"/><text x="50%" y="50%" text-anchor="middle" dy=".3em" font-family="Arial" font-size="24" fill="%23666">?</text></svg>');
	background-size: cover;
}

/* Entfernt - bereits oben definiert */

/* Featured Image sollte nur angezeigt werden, wenn vorhanden */
.single-post-template .wp-block-post-featured-image:empty {
	display: none;
}

/* Post Title als H1 sicherstellen */
.single-post-template .single-post-title,
.single-post-template .wp-block-post-title,
.single-post-content-area .single-post-title,
.single-post-content-area .wp-block-post-title,
.single-post-content-area h1.single-post-title,
.single-post-content-area h1.wp-block-post-title {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	font-size: var(--wp--preset--font-size--h-1, 48px) !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	color: var(--wp--preset--color--primary-blue) !important;
	margin: 0 0 30px 0 !important;
	padding: 0 !important;
	width: auto !important;
	height: auto !important;
	position: relative !important;
	z-index: 1 !important;
}

.single-post-template .single-post-title h1,
.single-post-template .wp-block-post-title h1,
.single-post-content-area .single-post-title h1,
.single-post-content-area .wp-block-post-title h1 {
	font-size: var(--wp--preset--font-size--h-1, 48px) !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	color: var(--wp--preset--color--primary-blue) !important;
	margin: 0 0 30px 0 !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* Beitragstitel auf kleinen Viewports (#75).
   Die Regeln oben brauchen !important gegen Inline-Styles des Post-Title-Blocks;
   dadurch greifen die globalen Mobile-Groessen aus style.css hier nicht. Die
   Werte entsprechen denen der globalen h1-Regeln (36px / 32px). */
@media (max-width: 768px) {
	.single-post-template .single-post-title,
	.single-post-template .wp-block-post-title,
	.single-post-content-area .single-post-title,
	.single-post-content-area .wp-block-post-title,
	.single-post-content-area h1.single-post-title,
	.single-post-content-area h1.wp-block-post-title,
	.single-post-template .single-post-title h1,
	.single-post-template .wp-block-post-title h1,
	.single-post-content-area .single-post-title h1,
	.single-post-content-area .wp-block-post-title h1 {
		font-size: 36px !important;
	}
}

@media (max-width: 480px) {
	.single-post-template .single-post-title,
	.single-post-template .wp-block-post-title,
	.single-post-content-area .single-post-title,
	.single-post-content-area .wp-block-post-title,
	.single-post-content-area h1.single-post-title,
	.single-post-content-area h1.wp-block-post-title,
	.single-post-template .single-post-title h1,
	.single-post-template .wp-block-post-title h1,
	.single-post-content-area .single-post-title h1,
	.single-post-content-area .wp-block-post-title h1 {
		font-size: 32px !important;
	}
}

/* Excerpt/Untertitel im Single Post Header - Figma: 20px, weight 600, line-height 160% */
.single-post-content-area > .wp-block-post-excerpt .wp-block-post-excerpt__excerpt {
	font-size: var(--wp--preset--font-size--blog-body) !important;
	font-weight: 600 !important;
	line-height: 1.6 !important;
	color: var(--wp--preset--color--primary-blue) !important;
}

/* Post Title im Gutenberg Editor */
.editor-post-title__input,
.editor-post-title,
.editor-styles-wrapper .editor-post-title__input,
.editor-styles-wrapper .editor-post-title {
	font-size: var(--wp--preset--font-size--h-1, 48px) !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	color: var(--wp--preset--color--primary-blue) !important;
	font-family: var(--wp--preset--font-family--inter) !important;
	max-width: 1200px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: var(--kbd-spacing-page-inner, 80px) !important;
	padding-right: var(--kbd-spacing-page-inner, 80px) !important;
	box-sizing: border-box !important;
}

/* Post Content sollte Blog-Body Font-Size verwenden */
.single-post-template .wp-block-post-content {
	font-size: var(--wp--preset--font-size--blog-body, 20px);
	line-height: 1.8;
}

/* Fließtext-Paragraphen in Blog-Artikeln: großzügige line-height für Lesefluss */
.single-post-template .wp-block-post-content p,
.single-post-content p {
	line-height: 1.8;
}

/* Headings im Content: 20px Abstand nach unten */
.single-post-content .wp-block-heading,
.single-post-content h2,
.single-post-content h3,
.single-post-content h4,
.single-post-content h5,
.single-post-content h6 {
	margin-bottom: 20px;
}

/* Post-Template (Lesenswert-Cards): KEINE Pfeile */
.single-post-content ul.wp-block-post-template,
.single-post-content .wp-block-post-template {
	list-style: none !important;
	padding-left: 0 !important;
}

.single-post-content ul.wp-block-post-template li::before,
.single-post-content .wp-block-post-template li::before,
.single-post-content ul.wp-block-post-template > li::before {
	content: none !important;
	display: none !important;
}

/* Bild-Captions: kleiner, kursiv, näher am Bild.
   Bewusst auf .wp-block-post-content statt auf einen Template-Wrapper gescoped:
   single.html nutzt .single-post-content, single-termine.html dagegen
   .single-termine-post-content. Bei Wrapper-Scoping griff die Regel auf
   Termin-Seiten nicht, die Caption erbte blog-body (20px) und sah wie
   Fließtext aus (#60). .wp-block-post-content rendert jedes Single-Template. */
.wp-block-post-content .wp-element-caption,
.wp-block-post-content figcaption,
.wp-block-post-content .wp-block-image figcaption,
.wp-block-post-featured-image .wp-element-caption,
.wp-block-post-featured-image figcaption,
.single-post-content-area .kbd-featured-image-caption {
	font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
	font-size: var(--wp--preset--font-size--small);
	font-style: italic;
	font-weight: 400;
	line-height: 1.5;
	color: var(--wp--preset--color--primary-blue);
	opacity: 0.75;
	margin-top: 8px;
	margin-bottom: 0;
	padding: 0;
	text-align: left;
}

/* Featured-Image-Caption: Abstand nach unten bis zum Content */
.single-post-content-area .kbd-featured-image-caption {
	display: block;
	margin-top: 8px;
	margin-bottom: 60px;
}

.single-post-content .wp-block-image img {
	margin-bottom: 0;
}

/* Responsive Design */
@media (max-width: 1400px) {
	.single-post-content-area {
		padding-left: 60px !important;
		padding-right: 60px !important;
	}

	.table-of-contents-sidebar {
		width: 320px !important;
		max-width: 320px !important;
	}
}

@media (max-width: 1200px) {
	/* Content-Bereich nimmt volle Breite ein */
	.single-post-content-area {
		width: 100% !important;
		max-width: 900px !important;
		margin: 0 auto !important;
		padding-left: 40px !important;
		padding-right: 40px !important;
	}

	.single-post-content {
		max-width: 100% !important;
	}

	.table-of-contents-sidebar {
		width: 300px !important;
		max-width: 300px !important;
	}
}

/* Scroll to Top Button */
.scroll-to-top-button {
	position: fixed;
	bottom: 40px;
	right: 40px;
	width: 75px;
	height: 75px;
	background-color: var(--wp--preset--color--primary-blue);
	border: none;
	cursor: pointer;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.3s, transform 0.3s;
	box-shadow: 0 4px 30px rgba(30, 55, 145, 0.1);
}

.scroll-to-top-button:hover {
	opacity: 0.9;
	transform: translateY(-2px);
}

.scroll-to-top-button svg {
	width: 35px;
	height: 35px;
	/* Pfeil zeigt bereits nach oben, keine Rotation nötig */
}

.scroll-to-top-button:focus {
	outline: 3px solid var(--wp--preset--color--primary-blue);
	outline-offset: 2px;
}

@media (max-width: 768px) {
	.single-post-content-area {
		padding-left: 20px !important;
		padding-right: 20px !important;
		padding-top: 40px !important;
	}
	
	.single-post-template .has-secondary-green-background-color {
		height: 300px;
	}
	
	.scroll-to-top-button {
		bottom: 20px;
		right: 20px;
		width: 60px;
		height: 60px;
	}
	
	.scroll-to-top-button svg {
		width: 28px;
		height: 28px;
	}
}

/* ==========================================================================
   "Auch lesenswert" Section - Figma Design
   ========================================================================== */

/* Reset WordPress Grid Styles */
.single-post-content-area .wp-block-query,
.single-post-content-area .wp-block-query.alignwide,
.single-post-content-area .is-layout-grid {
	display: block !important;
	grid-template-columns: none !important;
}

/* Grid Layout für die Beitrags-Karten (2 Spalten) */
.single-post-content-area ul.wp-block-post-template,
.single-post-content-area ul.wp-block-post-template.is-layout-grid,
.single-post-content-area ul.wp-block-post-template.columns-2,
.single-post-content-area ul.wp-block-post-template.columns-3 {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 20px !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
}

/* Einzelne Beitrags-Karte (li Element) */
.single-post-content-area ul.wp-block-post-template > li,
.single-post-content-area ul.wp-block-post-template > li.wp-block-post {
	min-width: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	list-style: none !important;
	display: block !important;
}

/* Karten-Container mit Border */
.single-post-content-area li.wp-block-post > .wp-block-group.has-border-color {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	border: 3px solid var(--wp--preset--color--primary-blue) !important;
	background: var(--wp--preset--color--primary-white) !important;
	overflow: hidden !important;
}

/* Bild-Container */
.single-post-content-area li.wp-block-post .wp-block-post-featured-image {
	aspect-ratio: 665 / 374 !important;
	width: 100% !important;
	margin: 0 !important;
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
	border-bottom: 3px solid var(--wp--preset--color--primary-blue) !important;
	overflow: hidden !important;
	flex-shrink: 0 !important;
	display: block !important;
}

.single-post-content-area li.wp-block-post .wp-block-post-featured-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

/* Text-Container - Figma Design: padding 30px, engerer Abstand zum Bild */
.single-post-content-area li.wp-block-post .wp-block-group.has-primary-white-background-color {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 !important;
	padding: 30px !important;
	gap: 14px !important;
	min-height: 260px !important;
	margin: 0 !important;
	margin-top: 0 !important;
	margin-block-start: 0 !important;
}

/* WordPress Core is-layout-flow margin override für Karten */
.single-post-content-area li.wp-block-post .wp-block-group.has-primary-white-background-color.is-layout-flow > * + * {
	margin-block-start: 0 !important;
}

.single-post-content-area li.wp-block-post .wp-block-group.has-primary-white-background-color > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Kategorie - Figma Design: blauer Text ohne Hintergrund */
.single-post-content-area li.wp-block-post .wp-block-post-terms {
	font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif) !important;
	font-size: 18px !important;
	font-weight: 400 !important;
	text-transform: uppercase !important;
	color: var(--wp--preset--color--primary-blue) !important;
	line-height: 21px !important;
	margin: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	padding: 0 !important;
}

.single-post-content-area li.wp-block-post .wp-block-post-terms a {
	color: var(--wp--preset--color--primary-blue) !important;
	text-decoration: none !important;
	background: transparent !important;
	background-color: transparent !important;
	padding: 0 !important;
}

/* Titel */
.single-post-content-area li.wp-block-post .wp-block-post-title {
	font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif) !important;
	font-size: 28px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	color: var(--wp--preset--color--primary-blue) !important;
	margin: 0 !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 4 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

.single-post-content-area li.wp-block-post .wp-block-post-title a {
	color: inherit !important;
	text-decoration: none !important;
	display: inline !important;
}

/* Beschreibung/Excerpt */
.single-post-content-area li.wp-block-post .wp-block-post-excerpt {
	font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif) !important;
	font-size: var(--wp--preset--font-size--blog-body) !important;
	font-weight: 600 !important;
	line-height: 1.6 !important;
	color: var(--wp--preset--color--primary-blue) !important;
	margin: 0 !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 3 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	flex: 1 !important;
}

.single-post-content-area li.wp-block-post .wp-block-post-excerpt__excerpt {
	margin: 0 !important;
}

/* Button "weiterlesen" Container - Figma Design: nur Border-Top, height: 60px */
.single-post-content-area li.wp-block-post .wp-block-group.has-primary-white-background-color > .wp-block-group.is-layout-flex,
.single-post-content-area li.wp-block-post .wp-block-group.has-primary-white-background-color > .wp-block-group.is-content-justification-space-between {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	border-width: 3px 0 0 0 !important;
	border-style: solid !important;
	border-color: var(--wp--preset--color--primary-blue) !important;
	margin: auto -30px -30px -30px !important;
	padding: 0 30px !important;
	height: 60px !important;
	min-height: 60px !important;
	max-height: 60px !important;
	background: transparent !important;
	box-sizing: border-box !important;
}

/* "weiterlesen" Text */
.single-post-content-area li.wp-block-post .wp-block-group.has-primary-white-background-color > .wp-block-group.is-layout-flex p {
	font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif) !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	color: var(--wp--preset--color--primary-blue) !important;
	margin: 0 !important;
}

/* Pfeil */
.single-post-content-area li.wp-block-post .wp-block-group.has-primary-white-background-color > .wp-block-group.is-layout-flex p:last-child {
	font-size: 20px !important;
	font-weight: 400 !important;
}

/* ==========================================================================
   Recommended Posts Links - Titel, weiterlesen klickbar
   ========================================================================== */

/* Titel Link - keine Unterstreichung, nur bei Hover */
.single-post-content-area .recommended-post-title a,
.single-post-content-area li.wp-block-post .wp-block-post-title a {
	text-decoration: none !important;
	color: var(--wp--preset--color--primary-blue) !important;
}

.single-post-content-area .recommended-post-title a:hover,
.single-post-content-area li.wp-block-post .wp-block-post-title a:hover {
	text-decoration: underline !important;
}

/* Read More Link (weiterlesen) */
.single-post-content-area .recommended-read-more-link,
.single-post-content-area .recommended-read-more-container .wp-block-read-more {
	text-decoration: none !important;
	color: var(--wp--preset--color--primary-blue) !important;
	font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif) !important;
	font-size: 18px !important;
	font-weight: 600 !important;
}

.single-post-content-area .recommended-read-more-link:hover,
.single-post-content-area .recommended-read-more-container .wp-block-read-more:hover {
	text-decoration: underline !important;
}

/* Responsive - Tablet */
@media (max-width: 1200px) {
	.single-post-content-area ul.wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
	
	.single-post-content-area ul.wp-block-post-template > li.wp-block-post {
		max-width: 100% !important;
	}
}

/* Responsive - Tablet */
@media (max-width: 768px) {
	.single-post-content-area ul.wp-block-post-template {
		grid-template-columns: 1fr !important;
	}

	.single-post-content-area li.wp-block-post .wp-block-group.has-primary-white-background-color {
		min-height: auto !important;
	}
}

/* ==========================================================================
   Recommended Posts - Mobile Slider (wie single-card-slider auf Startseite)
   ========================================================================== */
@media (max-width: 480px) {
	/* Slider Container – overflow: hidden hier, damit translateX auf dem ul funktioniert */
	.single-post-content-area .wp-block-query,
	.single-post-content-area .wp-block-query.alignwide {
		position: relative !important;
		overflow: hidden !important;
	}

	/* Cards Container als horizontaler Slider – overflow: visible, Parent clippt */
	.single-post-content-area ul.wp-block-post-template,
	.single-post-content-area ul.wp-block-post-template.is-layout-grid {
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow: visible !important;
		gap: 0 !important;
		grid-template-columns: none !important;
		scroll-behavior: smooth !important;
	}

	/* Einzelne Karte: volle Breite, flex-shrink 0 */
	.single-post-content-area ul.wp-block-post-template > li,
	.single-post-content-area ul.wp-block-post-template > li.wp-block-post {
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 100% !important;
	}

	/* Navigation Arrows Container (wird per JS eingefügt) */
	.recommended-posts-nav {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 20px !important;
		margin-top: 20px !important;
	}

	/* Navigation Arrows Buttons */
	.recommended-posts-nav__arrow {
		height: 60px !important;
		width: 100% !important;
		border: 3px solid var(--wp--preset--color--primary-blue) !important;
		background-color: var(--wp--preset--color--primary-white) !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		cursor: pointer !important;
		transition: opacity 0.2s ease !important;
	}

	.recommended-posts-nav__arrow:hover {
		opacity: 0.8 !important;
	}

	.recommended-posts-nav__arrow:disabled {
		opacity: 0.3 !important;
		cursor: not-allowed !important;
	}

	.recommended-posts-nav__arrow svg {
		width: 27px !important;
		height: 25px !important;
	}

	.recommended-posts-nav__arrow svg path {
		stroke: var(--wp--preset--color--primary-blue) !important;
	}
}

/* ==========================================================================
   Kategorien/Tags Section - Figma Design
   ========================================================================== */

/* Container für Tags (wissen-tag Taxonomie) */
.single-post-content-area .category-tags-list,
.single-post-content-area .wp-block-post-terms.taxonomy-post_tag,
.single-post-content-area .wp-block-post-terms.taxonomy-wissen-tag {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 15px !important;
	align-items: center !important;
	max-width: 900px !important;
	margin: 0 !important;
	margin-top: 0 !important;
	padding: 0 !important;
}

/* Einzelne Tag-Links */
.single-post-content-area .category-tags-list a,
.single-post-content-area .wp-block-post-terms.taxonomy-post_tag a,
.single-post-content-area .wp-block-post-terms.taxonomy-wissen-tag a {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 12px 15px !important;
	background-color: var(--wp--preset--color--primary-white, #ffffff) !important;
	border: 3px solid var(--wp--preset--color--primary-blue, #1e3791) !important;
	color: var(--wp--preset--color--primary-blue, #1e3791) !important;
	font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif) !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	line-height: 16px !important;
	text-decoration: none !important;
	text-align: center !important;
	white-space: nowrap !important;
	transition: background-color 0.2s ease, color 0.2s ease !important;
}

/* Hover-Effekt */
.single-post-content-area .category-tags-list a:hover,
.single-post-content-area .wp-block-post-terms.taxonomy-post_tag a:hover,
.single-post-content-area .wp-block-post-terms.taxonomy-wissen-tag a:hover {
	background-color: var(--wp--preset--color--primary-blue, #1e3791) !important;
	color: var(--wp--preset--color--primary-white, #ffffff) !important;
}

/* Separator zwischen Tags entfernen */
.single-post-content-area .category-tags-list .wp-block-post-terms__separator,
.single-post-content-area .wp-block-post-terms.taxonomy-post_tag .wp-block-post-terms__separator,
.single-post-content-area .wp-block-post-terms.taxonomy-wissen-tag .wp-block-post-terms__separator {
	display: none !important;
}

/* ==========================================================================
   Lesetipp Boxen - Gelbe Infoboxen im Content
   ========================================================================== */
.single-post-content-area .wp-block-group.has-background.has-global-padding,
.single-post-content-area .wp-block-group.has-theme-blue-color.has-background {
	padding: 30px !important;
}

/* Textboxen im Content: volle Breite, linksbündig (WordPress constrained layout override) */
.single-post-content .wp-block-group.has-secondary-lesetip-background-color,
.single-post-content .wp-block-group.has-secondary-salmon-background-color,
.single-post-content .wp-block-group.has-secondary-yellow-background-color,
.single-post-content .wp-block-group.has-secondary-green-background-color,
.single-post-content .wp-block-group.is-style-textbox-lesetip,
.single-post-content .wp-block-group.is-style-textbox-salmon,
.single-post-content .wp-block-group.is-style-textbox-yellow,
.single-post-content .wp-block-group.is-style-textbox-green {
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* ==========================================================================
   Mobile/Tablet TOC Redesign - Bottom sticky modal, simple height-based animation
   Ab 1024px: Bottom-Bar statt Sidebar
   ========================================================================== */
@media (max-width: 1024px) {
	/* TOC Container: Fixed at bottom, full-width */
	.table-of-contents-sidebar,
	.single-post-main-layout .table-of-contents-sidebar,
	.wp-block-group.table-of-contents-sidebar,
	.table-of-contents-sidebar.has-primary-blue-background-color {
		/* Position: Fixed at bottom */
		position: fixed !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		top: auto !important;

		/* Size: Full-width */
		width: 100% !important;
		max-width: 100% !important;
		min-width: 100% !important;

		/* No padding on container - padding on children */
		padding: 0 !important;

		/* Background & Shadow */
		background: var(--wp--preset--color--primary-blue) !important;
		box-shadow: 0 -4px 20px rgba(30, 55, 145, 0.2) !important;

		/* No transform - simpler approach */
		transform: none !important;

		/* Z-index */
		z-index: 1000 !important;
	}

	/* Collapsed State: Only 60px toggle bar visible */
	.table-of-contents-sidebar.is-collapsed,
	.single-post-main-layout .table-of-contents-sidebar.is-collapsed {
		height: 60px !important;
		max-height: 60px !important;
		overflow: hidden !important;
	}

	/* Expanded State: Auto height, grows to fit content */
	.table-of-contents-sidebar:not(.is-collapsed),
	.single-post-main-layout .table-of-contents-sidebar:not(.is-collapsed) {
		height: auto !important;
		max-height: none !important;
		overflow: visible !important;
	}

	/* TOC Panel: Content container with padding */
	.table-of-contents-sidebar .toc-panel {
		padding: 16px 20px 24px 20px !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 0 !important;
	}

	/* Panel hidden when collapsed */
	.table-of-contents-sidebar.is-collapsed .toc-panel {
		display: none !important;
	}

	/* Panel visible when expanded */
	.table-of-contents-sidebar:not(.is-collapsed) .toc-panel {
		display: flex !important;
	}

	/* Toggle Button: Always at top, full-width */
	.table-of-contents-sidebar .toc-toggle {
		/* Reset positioning */
		position: relative !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		transform: none !important;

		/* Size */
		width: 100% !important;
		height: 60px !important;
		min-height: 60px !important;
		flex-shrink: 0 !important;

		/* Layout */
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;

		/* Style */
		padding: 0 20px !important;
		margin: 0 !important;
		background: var(--wp--preset--color--primary-blue) !important;
		border: none !important;
		cursor: pointer !important;

		/* Text */
		font-size: 18px !important;
		font-weight: 700 !important;
		color: var(--wp--preset--color--primary-white) !important;
	}

	/* Toggle Text: Horizontal (no rotation) */
	.table-of-contents-sidebar .toc-toggle .toc-toggle__text {
		transform: none !important;
		white-space: nowrap !important;
		font-size: 18px !important;
		font-weight: 700 !important;
		line-height: 1.2 !important;
	}

	/* Toggle Arrow Icon */
	.table-of-contents-sidebar .toc-toggle::after {
		content: '↓' !important;
		font-size: 24px !important;
		font-weight: 400 !important;
		color: var(--wp--preset--color--primary-white) !important;
		line-height: 1 !important;
	}

	/* Arrow points up when expanded */
	.table-of-contents-sidebar:not(.is-collapsed) .toc-toggle::after {
		content: '↑' !important;
	}

	/* Hide h3 heading on mobile (toggle has the text) */
	.table-of-contents-sidebar h3 {
		display: none !important;
	}

	/* TOC List: Clean list with dividers */
	.toc-list {
		padding: 0 !important;
		margin: 0 !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 0 !important;
		list-style: none !important;
	}

	.toc-list > li {
		margin: 0 !important;
		padding: 14px 0 !important;
		border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
	}

	.toc-list > li:last-child {
		border-bottom: none !important;
		padding-bottom: 0 !important;
	}

	.toc-list a {
		font-size: 16px !important;
		line-height: 1.4 !important;
		gap: 10px !important;
	}

	/* Scroll to Top Button: Hide on mobile */
	.scroll-to-top-button {
		display: none !important;
	}
}