/*
Theme Name: DDWFW
Theme URI: https://onlion.com/studio
Description: Child theme for Finnik — DDR Werbefiguren Welt. Jahresfilter, Zurück-Link, CSS-Grid-Portfolio, Infinity Scroll, Kategorietitel immer sichtbar, Portfolio-Slugs hart eingetragen.
Author: onlion® Studio
Author URI: https://onlion.com/studio
Template: finnik
Version: 1.8.2
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ddwfw
*/


/* =============================================================================
   PORTFOLIO GRID — CSS Grid
   Wirkt ausschließlich auf .portfolio-listing INNERHALB von #content-container.
   Sidebar und #content-container bleiben unberührt (Parent-Layout).
   ============================================================================= */

.portfolio-listing {
	display: grid !important;
	float: none !important;
	clear: both;
	grid-template-columns: repeat(3, 1fr);
	gap: 60px 5.7%;
	margin-bottom: 8.5%;
}

.portfolio-listing:last-child {
	margin-bottom: 0;
}

/* Float/Width-Regeln des Parents für alle Item-Varianten neutralisieren */
.portfolio-listing .portfolio-item,
.portfolio-listing .portfolio-category,
.col2 .portfolio-listing .portfolio-category,
.col3 .portfolio-listing .portfolio-item {
	box-sizing: border-box;
	float: none !important;
	margin: 0 !important;
	width: auto !important;
	position: relative;
	transition: opacity 200ms ease;
}

.portfolio-listing .portfolio-item:hover,
.portfolio-listing .portfolio-category:hover {
	opacity: 0.82;
}

.portfolio-listing .portfolio-item a,
.portfolio-listing .portfolio-category a {
	border: 0;
	display: block;
}

/* Bilder im Originalseitenverhältnis — kein Beschneiden */
.portfolio-listing .portfolio-item img,
.portfolio-listing .portfolio-category img {
	display: block;
	height: auto;
	max-width: 100%;
	width: 100%;
}

/*
 * Titel im Dokumentfluss (statt position:absolute; bottom:-2.8em des Parents)
 */
.portfolio-listing .portfolio-item-title,
.portfolio-listing .portfolio-category-title {
	bottom: auto !important;
	display: block !important;
	font-size: 11px !important;
	font-weight: 400;
	letter-spacing: 1px;
	margin: 0.55em 0 0 !important;
	position: static !important;
	right: auto !important;
	text-align: left;
	text-transform: uppercase;
	word-break: break-word;
}

.portfolio-listing .portfolio-item-title {
	font-size: 12px !important;
}

/* ── 4 Spalten ≥ 1600px ── */
@media only screen and (min-width: 1600px) {
	.portfolio-listing {
		grid-template-columns: repeat(4, 1fr);
		gap: 60px 4%;
	}
}

/* ── 5 Spalten ≥ 1920px ── */
@media only screen and (min-width: 1920px) {
	.portfolio-listing {
		grid-template-columns: repeat(5, 1fr);
		gap: 50px 3%;
	}
}

/* ── 2 Spalten 481px–1023px ── */
@media only screen and (max-width: 1023px) {
	.portfolio-listing {
		grid-template-columns: repeat(2, 1fr);
		gap: 40px 8%;
	}
}

/* ── 1 Spalte ≤ 480px ── */
@media only screen and (max-width: 480px) {
	.portfolio-listing {
		grid-template-columns: 1fr;
		gap: 30px 0;
	}
}


/* Beitragsvorschautext auf der Übersichtsseite ausblenden */
.blog-list .post-excerpt {
	display: none !important;
}


/* =============================================================================
   EINZELBEITRAG — Volle Inhaltsbreite
   Parent-Theme teilt den Content-Bereich in 3 Float-Spalten:
   Titel (26.66%) | Content (43.33%) | Meta-Wrapper (12.8%)
   Auf der Detailseite nutzen wir die volle Breite.
   ============================================================================= */

/* Titel: volle Breite, kein Float */
.single-post .post-title {
	float: none;
	margin-right: 0;
	width: 100%;
}

/* Bild: volle Breite */
.single-post .post-image {
	width: 100%;
}

/* Content: volle Breite, kein Float */
.single-post .post-content {
	float: none;
	margin-right: 0;
	width: 100%;
}

/* Meta-Wrapper (Datum, Autor, Kommentare): nebeneinander unter dem Content */
.single-post .post-meta-wrapper {
	float: none;
	width: 100%;
}

.single-post .post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.5em;
	margin-bottom: 2em;
}

/* Kategorien und Tags ebenfalls volle Breite */
.single-post .meta-categories,
.single-post .meta-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.5em;
	margin-bottom: 0.5em;
}

/* Autor-Bereich */
.single-post .author-info .section-title,
.single-post .author-info .section-content {
	float: none;
	margin-right: 0;
	width: 100%;
}


/* =============================================================================
   KATEGORIETITEL — Immer sichtbar
   ============================================================================= */

.tax-uxbarn_portfolio_tax .top-section,
.tax-uxbarn_portfolio_tax .top-section.show-category-title {
	display: block !important;
}

.top-section .post-title {
	float: none;
	font-size: 2em;
	letter-spacing: 2px;
	margin-bottom: 0.8em;
	margin-right: 0;
	text-transform: uppercase;
	width: 100%;
}


/* =============================================================================
   JAHRESFILTER
   ============================================================================= */

.ddwfw-year-filter {
	margin-bottom: 2em;
}

.ddwfw-year-filter .post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.8em;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ddwfw-year-filter .post-meta li a {
	border: 0;
	display: inline-block;
	text-decoration: none;
	transition: color 200ms ease;
}

.ddwfw-year-filter .post-meta li a:hover,
.ddwfw-year-filter .post-meta li a:focus,
.ddwfw-year-filter .post-meta li.active a {
	text-decoration: underline;
}

.ddwfw-year-filter .post-meta li.active a strong {
	font-weight: 700;
}

.ddwfw-year-filter .post-meta li a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}


/* =============================================================================
   ZURÜCK-LINK
   ============================================================================= */

.ddwfw-back-link {
	margin-bottom: 1.5em;
}

.ddwfw-back-link .post-meta {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ddwfw-back-link .post-meta li a {
	align-items: center;
	border: 0;
	display: inline-flex;
	gap: 0.4em;
	text-decoration: none;
	transition: color 200ms ease;
}

.ddwfw-back-link .post-meta li a::before {
	content: '←';
	font-style: normal;
	line-height: 1;
}

.ddwfw-back-link .post-meta li a:hover,
.ddwfw-back-link .post-meta li a:focus {
	text-decoration: underline;
}

.ddwfw-back-link .post-meta li a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}


/* =============================================================================
   INFINITY SCROLL
   ============================================================================= */

.portfolio-list-section .finnik-pagination,
.portfolio-list-section .pagination,
.portfolio-list-section .nav-links,
.portfolio-list-section nav.navigation {
	display: none !important;
}

.ddwfw-load-more-wrap {
	align-items: center;
	display: flex;
	justify-content: center;
	margin: 2em 0 4em;
	min-height: 3.5em;
}

.ddwfw-loader {
	align-items: center;
	display: none;
	flex-direction: column;
	gap: 0.7em;
}

.ddwfw-loader.is-visible {
	display: flex;
}

.ddwfw-spinner {
	animation: ddwfw-spin 0.75s linear infinite;
	border: 2px solid #ddd;
	border-radius: 50%;
	border-top-color: #050505;
	height: 22px;
	width: 22px;
}

@keyframes ddwfw-spin {
	to { transform: rotate(360deg); }
}

.ddwfw-loader-text {
	font-size: 0.72em;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

.ddwfw-scroll-sentinel {
	display: block;
	height: 1px;
	pointer-events: none;
	visibility: hidden;
	width: 100%;
}

.portfolio-item.ddwfw-item-new,
.portfolio-category.ddwfw-item-new {
	animation: ddwfw-fadein 0.35s ease both;
}

@keyframes ddwfw-fadein {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}


/* =============================================================================
   STICKY-BEITRAG BLOCK — Startseite zwischen Portfolio und Footer
   ============================================================================= */

.ddwfw-sticky-post {
	border-top: 1px solid #e8e8e8;
	margin-top: 4em;
	padding: 4em 0 5em;
}

.ddwfw-sticky-inner {
	display: flex;
	gap: 5%;
	align-items: flex-start;
}

.ddwfw-sticky-image {
	flex: 0 0 42%;
	max-width: 42%;
}

.ddwfw-sticky-image img {
	display: block;
	height: auto;
	width: 100%;
}

.ddwfw-sticky-content {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.6em;
}

.ddwfw-sticky-label {
	font-size: 0.72em;
	letter-spacing: 2px;
	margin: 0;
	text-transform: uppercase;
}

.ddwfw-sticky-title {
	font-size: 1.6em;
	font-weight: 500;
	letter-spacing: 1px;
	line-height: 1.3;
	margin: 0;
	text-transform: uppercase;
}

.ddwfw-sticky-title a {
	border: 0;
	padding: 0;
	text-decoration: none;
}

.ddwfw-sticky-title a:hover {
	text-decoration: underline;
}

.ddwfw-sticky-meta {
	font-size: 0.78em;
	letter-spacing: 1.5px;
	margin: 0;
	text-transform: uppercase;
}

.ddwfw-sticky-excerpt {
	font-size: 0.9em;
	line-height: 1.7;
	margin: 0.4em 0 0;
}

.ddwfw-sticky-link {
	border: 0 !important;
	display: inline-block;
	font-size: 0.78em;
	letter-spacing: 1.5px;
	margin-top: 0.8em;
	padding: 0 !important;
	text-decoration: none;
	text-transform: uppercase;
}

.ddwfw-sticky-link:hover {
	text-decoration: underline;
}

/* Tablet */
@media only screen and (max-width: 1023px) {
	.ddwfw-sticky-inner {
		flex-direction: column;
		gap: 1.5em;
	}

	.ddwfw-sticky-image {
		flex: none;
		max-width: 100%;
		width: 100%;
	}
}

/* Smartphone */
@media only screen and (max-width: 480px) {
	.ddwfw-sticky-post {
		padding: 2.5em 0 3em;
	}

	.ddwfw-sticky-title {
		font-size: 1.2em;
	}
}


/* =============================================================================
   LUPEN-ICON — Festes Such-Icon oben rechts, wechselt zu × wenn Panel offen
   ============================================================================= */

.ddwfw-search-trigger {
	background: none;
	border: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	position: fixed;
	right: 28px;
	top: 22px;
	z-index: 10000;  /* über search-panel-wrapper (9999) damit × immer sichtbar */
	transition: opacity 200ms ease;
	line-height: 0;
}

.ddwfw-search-trigger:hover {
	opacity: 0.5;
}

.ddwfw-search-trigger:focus-visible {
	outline: 2px solid #050505;
	outline-offset: 3px;
}

/* Lupe: sichtbar wenn Panel geschlossen */
.ddwfw-search-trigger .ddwfw-icon-search { display: block; }
.ddwfw-search-trigger .ddwfw-icon-close  { display: none; }

/* ×: sichtbar wenn Panel offen (.is-open) */
.ddwfw-search-trigger.is-open .ddwfw-icon-search { display: none; }
.ddwfw-search-trigger.is-open .ddwfw-icon-close  { display: block; }

/* Originalen Parent-Close-Button unterdrücken */
#search-close-button {
	display: none !important;
}

/* Suchfeld: kleinere Schrift, Styling */
#search-panel-wrapper {
	font-size: 3.5em; /* reduziert von 8em — Placeholder-Text passt rein */
}

#search-panel-wrapper .search-field {
	background-color: #ffffff;
	border: 1px solid #050505;
	border-radius: 0;
	box-sizing: border-box;
	color: #050505;
	font-size: 1em;
	margin-bottom: 120px;
	padding: 0.2em 0.4em 0.3em;
	width: 60%;
}

#search-panel-wrapper .search-field::placeholder {
	color: rgba(5, 5, 5, 0.45);
}

#search-panel-wrapper .search-field:focus {
	background-color: #ffffff;
	outline: none;
}

/* Responsive */
@media only screen and (max-width: 1023px) {
	.ddwfw-search-trigger {
		right: 18px;
		/* side-container: padding-top 25px + site-menu margin-top 6px
		   + halbe Icon-Höhe (~14px) = ~45px Mitte. Trigger-Höhe 22px+padding 8px = 38px.
		   top = 45 - 19 (halbe Trigger-Höhe) = 26px */
		top: 26px;
	}

	#search-panel-wrapper {
		font-size: 2.5em;
	}

	#search-panel-wrapper .search-field {
		width: 80%;
	}

	/* Menü nach links verschieben damit Lupe nicht überlagert */
	.site-menu {
		padding-right: 52px;
	}

	/* Lupe ausblenden wenn mmenu-Panel offen ist */
	.mm-wrapper--opened .ddwfw-search-trigger,
	.mm-opened .ddwfw-search-trigger {
		opacity: 0;
		pointer-events: none;
	}
}

@media only screen and (max-width: 480px) {

	.ddwfw-search-trigger {
		right: 12px;
		top: 26px;   /* gleiche Logik: auf Höhe des Menü-Icons */
		padding: 6px;
	}

	/* Lupe-SVG an Menü-Icon-Größe angleichen */
	.ddwfw-search-trigger svg {
		width: 18px;
		height: 18px;
	}

	/* Menü nach links verschieben */
	.site-menu {
		padding-right: 44px;
	}

	/* Lupe ausblenden wenn mmenu-Panel offen ist */
	.mm-wrapper--opened .ddwfw-search-trigger,
	.mm-opened .ddwfw-search-trigger {
		opacity: 0;
		pointer-events: none;
	}

	/* ── Mobile Suchfeld: exakt vertikal zentriert ── */

	#search-panel-wrapper {
		background: rgba(255, 255, 255, 0.97);
		font-size: 1rem;
	}

	/* Formular exakt in die Bildschirmmitte setzen */
	#search-panel-wrapper .search-form {
		box-sizing: border-box;
		left: 0;
		padding: 0 6%;
		position: absolute;
		text-align: left;
		/* top 50% + transform -50% = exakt vertikal mittig */
		top: 50%;
		transform: translateY(-50%);
		width: 100%;
	}

	#search-panel-wrapper .search-field {
		background-color: #ffffff;
		border: 1px solid #050505;
		border-radius: 2px;
		box-sizing: border-box;
		color: #050505;
		font-size: 1.1rem;
		letter-spacing: 0.03em;
		margin-bottom: 0;
		padding: 14px 16px;
		width: 100%;
	}

	#search-panel-wrapper .search-field::placeholder {
		color: rgba(5, 5, 5, 0.38);
		font-size: 1rem;
	}

	#search-panel-wrapper .search-field:focus {
		background-color: #ffffff;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
		outline: none;
	}
@media (prefers-reduced-motion: reduce) {
	#search-panel-wrapper {
		transition: none !important;
	}
}


/* =============================================================================
   SUCHERGEBNISSE
   ============================================================================= */

.ddwfw-search-results {
	padding-bottom: 4em;
}

/* Trennlinie + Abstand zwischen Portfolio- und Blog-Ergebnissen */
.ddwfw-search-section + .ddwfw-search-section {
	border-top: 1px solid #e8e8e8;
	margin-top: 8em;
	padding-top: 4em;
}

/* Blog-Suchergebnisse: Bild links, Text rechts */
.ddwfw-search-post-item {
	margin-bottom: 3em;
}

.ddwfw-search-post-inner {
	align-items: flex-start;
	display: flex;
	gap: 5%;
}

.ddwfw-search-post-img {
	flex: 0 0 34%;
	max-width: 34%;
}

.ddwfw-search-post-img img {
	display: block;
	height: auto;
	width: 100%;
}

.ddwfw-search-post-body {
	flex: 1 1 0;
}

.ddwfw-search-post-body .post-title {
	float: none;
	font-size: 1.1em;
	margin: 0 0 0.4em;
	width: 100%;
}

.ddwfw-search-post-body .post-title a {
	border: 0;
	text-decoration: none;
}

.ddwfw-search-post-body .post-title a:hover {
	text-decoration: underline;
}

.ddwfw-search-post-body .post-meta-wrapper {
	float: none;
	width: 100%;
}

/* Tablet */
@media only screen and (max-width: 1023px) {
	.ddwfw-search-post-img {
		flex: 0 0 42%;
		max-width: 42%;
	}
}

/* Smartphone */
@media only screen and (max-width: 480px) {
	.ddwfw-search-post-inner {
		flex-direction: column;
		gap: 1em;
	}

	.ddwfw-search-post-img {
		flex: none;
		max-width: 100%;
		width: 100%;
	}

	.ddwfw-search-section + .ddwfw-search-section {
		margin-top: 4em;
	}
}


/* =============================================================================
   ACCESSIBILITY & PERFORMANCE
   ============================================================================= */

html {
	scroll-behavior: smooth;
}

a:focus-visible,
button:focus-visible {
	outline: 2px solid #050505;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.ddwfw-spinner {
		animation: none !important;
	}
}