/*
Theme Name: GeneratePress Child - Checkerwissen
Theme URI: https://www.checkerwissen.de/
Description: Child-Theme fuer checkerwissen.de. Basis fuer alle individuellen Anpassungen (Beitragstemplate: Sidebar-Meta, Inhaltsverzeichnis, tl;dr, Lesefortschritt), damit das GeneratePress-Core-Theme unveraendert bleibt.
Author: Checkerwissen
Template: generatepress
Version: 1.0.0
Text Domain: generatepress-child
*/

/* --- Beitragstemplate: Sidebar-Cards (Auf einen Blick / Inhaltsverzeichnis / Mini-Fazit) --- */
/* GeneratePress legt auf jedes Sidebar-Widget standardmaessig 40px Padding (.widget-area .widget),
   gedacht fuer schmucklose Standard-Widgets. Unsere Cards bringen ihr eigenes, kompakteres
   Padding mit - daher hier auf 0 zuruecksetzen, sonst addieren sich beide Abstaende und die
   Luecken zwischen den Kaestchen werden unnoetig gross. */
#right-sidebar .widget { padding: 0; margin-bottom: 0; }
.cw-sidebar-card {
	background: #fff;
	border: 1px solid #e2e4e9;
	border-radius: 8px;
	padding: 16px 18px;
	margin-bottom: 20px;
}

/* Inhaltsverzeichnis-Karte kompakt halten: das LuckyWP-TOC-Plugin bringt eigene, fuer den
   Einsatz im Fliesstext gedachte Aussen-/Innenabstaende mit (u.a. 32px Aussenabstand) und
   eine eigene Ueberschrift ("Inhalte"), die sich mit unserer Card-Ueberschrift dopppelt hat.
   Eigene Ueberschrift daher ausblenden, Plugin-Titel uebernimmt jetzt direkt "Inhaltsverzeichnis"
   (siehe lwptoc_general-Einstellung) und steht mit dem Toggle-Link in einer Zeile. */
.cw-toc-card > h4 { display: none; }
.cw-toc-card p { margin: 0; }
.cw-toc-card .lwptoc { margin: 0; }
.cw-toc-card .lwptoc_i { padding: 0; }
.cw-toc-card .lwptoc_header { margin-bottom: 0; }
.cw-toc-card .lwptoc_title {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #5b6270;
}
.cw-toc-card .lwptoc_toggle_label { color: #2f5fe0; text-decoration: none; }
.cw-toc-card .lwptoc_items { margin-top: 10px; }
.cw-sidebar-card h4 {
	margin: 0 0 10px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #5b6270;
}
.cw-meta-row {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font-size: 13px;
	padding: 6px 0;
	border-bottom: 1px dashed #e2e4e9;
}
.cw-meta-row:last-child { border-bottom: none; }
.cw-meta-row > span:first-child { color: #6b7280; }
.cw-meta-row > span:last-child { font-weight: 600; text-align: right; }
/* Aktualisiert-Zeile ausblenden, wenn der Artikel noch nie bearbeitet wurde (leerer Wert) */
.cw-meta-row:has(> span:last-child:empty) { display: none; }
.cw-minifazit-card { background: #fff8e6; border-color: #edd9a3; border-left: 4px solid #b9720a; }
.cw-minifazit-card p { margin: 0; font-size: 13px; line-height: 1.5; color: #4b3c14; }

/* --- Beitragstemplate: Artikel-Navigation (Serie oder Kategorie) --- */
.cw-post-nav-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #5b6270;
	margin: 30px 0 10px;
}
.cw-post-nav { display: flex; gap: 14px; flex-wrap: wrap; }
.cw-post-nav-link {
	flex: 1 1 220px;
	display: block;
	padding: 12px 16px;
	border: 1px solid #e2e4e9;
	border-radius: 8px;
	text-decoration: none;
	color: inherit;
	transition: .15s;
}
.cw-post-nav-link:hover { border-color: #2f5fe0; background: #e7edff; }
.cw-post-nav-kicker { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #2f5fe0; margin-bottom: 6px; }
.cw-post-nav-link.next { text-align: right; }
/* Sicherheitsnetz: falls trotz Bedingung kein Nachbar-Artikel existiert (z.B. Serienanfang/-ende), Link ausblenden statt leer anzuzeigen */
.cw-post-nav-link:empty { display: none; }

/* Mini-Fazit-Card komplett ausblenden, wenn kein Fazit-Absatz gefunden wurde (aeltere Artikel ohne Fazit-Ueberschrift) */
.cw-minifazit-card:has(p:empty) { display: none; }

/* --- Beitragstemplate: Lesefortschritt ueber das Sticky-Navigation-Logo ---
   Wir nutzen GeneratePress' eigenes "Sticky Navigation"-Feature (Menu Plus) statt eines
   eigenen position:sticky-Hacks auf dem ganzen Header: Beim Laden/vor dem Scrollen zeigt
   der normale Header oben das unveraenderte Hauptlogo (.site-logo in .site-branding-container).
   Erst wenn GeneratePress beim Scrollen die Navigation "einrastet" (Klasse .navigation-stick,
   ausgeloest durch das native sticky.js), blendet GP automatisch das separate, dafuer
   vorgesehene "Sticky Navigation Logo" ein (.sticky-navigation-logo, in den Customizer-
   Einstellungen auf dasselbe Logo-Bild gesetzt) - und genau darauf wenden wir den
   Fortschritts-Effekt an (--pct wird von reading-progress.js gesetzt). Das Hauptlogo bleibt
   dadurch immer unangetastet, der Effekt existiert nur in der eingerasteten Sticky-Nav. */
.generate-back-to-top {
	background: #fff !important;
	border-radius: 50% !important;
	width: 46px !important;
	height: 46px !important;
	line-height: 46px !important;
	box-shadow: 0 4px 10px rgba(20,25,40,.18);
	display: flex;
	align-items: center;
	justify-content: center;
}
.generate-back-to-top:hover { background: #fff !important; }
.generate-back-to-top:before { content: none !important; }
.generate-back-to-top::after {
	content: "";
	position: absolute;
	inset: -14px;
	border-radius: 50%;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(circle, rgba(255,183,3, calc(var(--pct,0)/130)) 0%, rgba(255,183,3,0) 72%);
}
.cw-bulb { position: relative; display: block; width: 24px; height: 24px; }
.cw-bulb svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cw-bulb .cw-bulb-base { color: #b9c0cc; }
.cw-bulb .cw-bulb-lit {
	color: #ffb703; fill: #ffe28a;
	clip-path: inset(calc(100% - (var(--pct,0) * 1%)) 0 0 0);
	filter: drop-shadow(0 0 calc(var(--pct,0) * 0.05px) #ffb703);
	transition: clip-path .1s linear, filter .1s linear;
}
.generate-back-to-top.is-done { animation: cwBulbPulse 1.6s ease-in-out infinite; }
@keyframes cwBulbPulse {
	0%, 100% { box-shadow: 0 4px 10px rgba(20,25,40,.18), 0 0 2px rgba(255,183,3,.4); }
	50% { box-shadow: 0 4px 10px rgba(20,25,40,.18), 0 0 16px rgba(255,183,3,.9); }
}

/* Nur auf Beitragsseiten aktiv - das Hauptlogo im normalen Header bleibt auf allen Seiten unveraendert */
body.single .sticky-navigation-logo { position: relative; display: inline-block; }
body.single .sticky-navigation-logo img {
	filter: grayscale(calc(1 - (var(--pct,0) / 100))) brightness(calc(0.7 + (var(--pct,0) / 300)));
	transition: filter .15s linear;
}
body.single .sticky-navigation-logo::after {
	content: "";
	position: absolute;
	inset: -8px;
	border-radius: 50%;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(circle, rgba(255,183,3, calc(var(--pct,0) / 140)) 0%, rgba(255,183,3,0) 70%);
}
body.single .sticky-navigation-logo.is-done img {
	animation: cwLogoPulse 1.6s ease-in-out infinite;
}
@keyframes cwLogoPulse {
	0%, 100% { filter: grayscale(0) brightness(1) drop-shadow(0 0 2px rgba(255,183,3,.5)); }
	50% { filter: grayscale(0) brightness(1.15) drop-shadow(0 0 14px rgba(255,183,3,.95)); }
}



/* Serien-Badge ("Kicker") oberhalb des H1 - Bereich 1 im Wireframe */
.cw-kicker {
	display: inline-block;
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #2f5fe0;
	background: #e7edff;
	padding: 3px 9px;
	border-radius: 20px;
	margin-bottom: 10px;
}

/* Quellen & Belege (GenerateBlocks-Pro-Accordion) optisch zurueckgenommen - Bereich 4 im Wireframe.
   Der Accordion-Block wird aktuell auf der gesamten Seite ausschliesslich fuer "Quellen & Belege"
   verwendet (an allen 7 Artikeln mit Accordion geprueft). Sollte er kuenftig auch fuer andere
   Zwecke eingesetzt werden, muesste diese Regel entsprechend eingeschraenkt werden. */
.gb-accordion__toggle {
	font-size: 12px !important;
	color: #6b7280 !important;
	font-weight: 500 !important;
}
.gb-accordion__content,
.gb-accordion__content p,
.gb-accordion__content li {
	font-size: 12px !important;
	color: #6b7280 !important;
}


/* Mobile: Byline + aufklappbares "Auf einen Blick & Inhaltsverzeichnis"-Panel + Mini-Fazit
   vor den Quellen (Wireframe-Mobile-Frame). Auf Desktop ausgeblendet, da dort die Sidebar
   die einzige Quelle fuer diese Angaben bleibt. Die Sidebar selbst wird umgekehrt auf
   Mobile ausgeblendet, damit nichts doppelt erscheint. */
@media (max-width: 768px) {
	#right-sidebar {
		display: none;
	}
}

.cw-mobile-byline {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: #4b5160;
	margin-bottom: 14px;
	flex-wrap: wrap;
}
.cw-mobile-byline img.avatar {
	border-radius: 50%;
	vertical-align: middle;
}
.cw-mobile-byline b { color: #1f2430; }
.cw-mobile-byline .sep { color: #9aa3b2; }

details.cw-mob-meta {
	border: 1px solid #c7ccd6;
	border-radius: 8px;
	margin-bottom: 18px;
	background: #fff;
}
details.cw-mob-meta summary {
	padding: 10px 14px;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
details.cw-mob-meta summary::-webkit-details-marker { display: none; }
details.cw-mob-meta[open] summary .cw-mob-meta-chevron { transform: rotate(180deg); }
details.cw-mob-meta .cw-mob-meta-chevron { transition: transform .15s; display: inline-block; }
details.cw-mob-meta .cw-mob-meta-body { padding: 0 14px 12px; }

.cw-mobile-minifazit { margin: 18px 0; }

/* Auf Desktop ausgeblendet, da dort die Sidebar die einzige Quelle fuer diese Angaben bleibt -
   muss NACH den Basis-Regeln oben stehen: bei gleicher Spezifitaet (nur eine Klasse) gewinnt sonst
   die spaetere unbedingte "display:flex"-Regel per Reihenfolge im Stylesheet, und die Elemente
   blieben faelschlicherweise auch auf Desktop sichtbar (genau dieser Bug lag hier vor). */
@media (min-width: 769px) {
	.cw-mobile-byline,
	.cw-mob-meta,
	.cw-mobile-minifazit {
		display: none;
	}
}

/* Sidebar bleibt beim Scrollen sichtbar (Bereiche 6-8, .sticky-wrap im Wireframe) - nur Desktop,
   auf Mobile ist die Sidebar ohnehin ausgeblendet (siehe oben).
   Seit Aktivierung von GeneratePress' Sticky Navigation liegt oben eine ca. 67px hohe,
   eingerastete Navigationsleiste permanent im Viewport - der alte 20px-Versatz liess die
   Sidebar deshalb unter dieser Leiste verschwinden (nicht mehr komplett sichtbar). Versatz
   daher um die Navileisten-Hoehe + Puffer erhoeht. */
@media (min-width: 769px) {
	#right-sidebar {
		position: sticky;
		top: 90px;
		align-self: start;
	}
	body.admin-bar #right-sidebar { top: 122px; }
}

/* Logo (110px) + Site-Titel ("Checkerwissen.de", 25px fett) passen ab ca. 415px Viewportbreite
   nicht mehr nebeneinander in den Header (40px Seitenabstand links/rechts) - .site-branding-
   container schrumpft nicht (flex-shrink:0, GP-Kernstyle), wodurch der Header auf sehr schmalen
   Handys (<=~414px, z.B. iPhone SE/mini) breiter wird als der Viewport und die ganze Seite
   horizontal gescrollt werden muss - auf jeder einzelnen Seite, da der Header ueberall gleich ist.
   Betrifft alle Seiten unabhaengig vom Sticky-Navigation-Feature (mit Test auch im eingerasteten
   Zustand identisch reproduziert - kein Zusammenhang zu den jüngsten Header-Aenderungen). Das Logo
   traegt die Marke bereits allein, daher auf diesen schmalen Breiten nur den Text ausblenden. */
@media (max-width: 420px) {
	.site-branding-container .site-branding {
		display: none;
	}
}


/* Beitragsbild (Bereich 3 im Wireframe, siehe cw_reposition_featured_image() in functions.php)
   hatte keinen eigenen unteren Abstand - GeneratePress' .separate-containers .featured-image-Regel
   setzt nur margin-top, kein margin-bottom greift hier (das Bild haengt im entry-content, nicht
   direkt im .inside-article, daher matcht die GP-eigene margin-bottom:2em-Regel nicht). Dadurch
   folgte die erste H2 direkt ohne Luft auf das Bild. */
.page-header-image-single {
	margin-bottom: 2em;
}

/* Bildbeschriftung (native Medien-Bibliothek-Bildunterschrift) unter dem Beitragsbild
   (Bereich 3 im Wireframe, siehe cw_reposition_featured_image() in functions.php) - sowie
   optionales Lizenz-Feld (z.B. "KI-generiert") vertikal am rechten Bildrand, analog zu
   Bildquellenangaben bei Stockfotos. .featured-image ist GeneratePress' eigener Wrapper um
   das Beitragsbild - position:relative hier nur fuer Einzelbeitraege gesetzt, damit die
   Lizenz-Markierung absolut dazu positioniert werden kann. */
.featured-image.page-header-image-single {
	position: relative;
}
.cw-featured-image-caption {
	font-size: 0.85rem;
	font-style: italic;
	color: #6b6b6b;
	text-align: center;
	margin-top: 8px;
	padding: 0 12px;
}
.cw-featured-image-license {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%) rotate(180deg);
	writing-mode: vertical-rl;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 0.65rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 6px 5px;
	border-radius: 4px;
	pointer-events: none;
}