/* ==========================================================================
   SEARCH — sf-* Namespace (Template site/templates/search.php)
   Wird ausschließlich auf der Search-Page geladen (via $pageCss in head.php).
   ========================================================================== */
.secondaryheader, section.submenu { display: none !important; } /* legacy header hiding for search page */

/* Hintergrund-Farbe identisch zur Support-Section--alt: zieht sich über den
   gesamten Bereich unterhalb des Heros (Filter-Sidebar + Ergebnis-Liste). */
.sf-page { font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif; color: var(--pw-text); background: var(--pw-bg-alt); }
.sf-layout { display: grid; grid-template-columns: 220px 1fr; gap: var(--pw-space-2xl); align-items: start; margin-top: 40px; }
.sf-main { min-width: 0; }
.sf-aside { position: sticky; top: 80px; /* 60px sticky-Header + 20px Spielraum */ padding-bottom: var(--pw-space-3xl); /* Spielraum am Ende analog zur Pagination */ }

.sf-hero { position: relative; background: linear-gradient(180deg, var(--pw-bg-alt) 0%, #fff 100%); padding: var(--pw-section-hero); text-align: center; overflow: hidden; }
.sf-hero__bgimage { position: absolute; left: 8%; bottom: 0; width: 560px; height: auto; opacity: 0.08; pointer-events: none; user-select: none; z-index: 0; }
.sf-hero .pw-container { position: relative; z-index: 1; }
.sf-hero__title { font-size: 44px; font-weight: 700; color: var(--pw-text); margin: 0 0 var(--pw-space-lg); letter-spacing: -0.03em; }
.sf-hero__meta { font-size: 14px; color: var(--pw-text-secondary); margin: 20px 0 0; }

.sf-search { display: flex; align-items: center; max-width: 560px; margin: 0 auto; background: #fff; border: 1px solid var(--pw-border-light); border-radius: var(--pw-radius-md); padding: 6px 6px 6px 18px; transition: border-color 0.2s, box-shadow 0.2s; }
.sf-search:focus-within { border-color: var(--pw-link); box-shadow: 0 0 0 4px rgba(42,127,191,0.12); }
.sf-search__icon { width: 20px; height: 20px; color: var(--pw-text-muted); flex-shrink: 0; }
.sf-search__input { flex: 1; padding: 12px 14px; font-size: 16px; border: none; outline: none; background: transparent; color: var(--pw-text); font-family: inherit; min-width: 0; }
.sf-search__input::placeholder { color: var(--pw-text-muted); }
.sf-search__submit { padding: 10px 22px; font-size: 15px; font-weight: 600; background: var(--pw-brand); color: #fff; border: none; border-radius: var(--pw-radius-sm); cursor: pointer; transition: background 0.2s; font-family: inherit; flex-shrink: 0; }
.sf-search__submit:hover { background: var(--pw-brand-hover); }

/* Filter-Sidebar — visuell vereinheitlicht mit der Blog-Sidebar (.nb-sidebar):
   reine Text-Links, links-bündig, kein Hintergrund, aktiver Eintrag nur via
   Brand-Color + Fettsatz, kompakter Zeilenabstand. */
.sf-filters { display: flex; flex-direction: column; gap: 20px; }
.sf-filters__row { display: flex; flex-direction: column; gap: 6px; }
.sf-filters__label { font-size: 11px; font-weight: 700; color: var(--pw-text-muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--pw-space-xs); }
.sf-chips { display: flex; flex-direction: column; gap: 2px; }
.sf-chip { display: flex; align-items: center; gap: 10px; padding: 7px 0; background: transparent; border: 0; font-size: 14px; font-weight: 500; color: var(--pw-text); transition: color 0.15s; }
.sf-chip:hover { color: var(--pw-brand); }
.sf-chip--active { color: var(--pw-brand); font-weight: 600; }
.sf-chip--active:hover { color: var(--pw-brand); }
.sf-chip--disabled { color: var(--pw-border-light); pointer-events: none; cursor: default; }
.sf-chip--disabled:hover { color: var(--pw-border-light); }
.sf-chip--disabled .sf-chip__icon { color: var(--pw-border-light); }
.sf-chip__icon { display: inline-flex; width: 14px; height: 14px; color: var(--pw-text-muted); flex-shrink: 0; }
.sf-chip--active .sf-chip__icon { color: var(--pw-brand); }
.sf-chip__icon svg { width: 100%; height: 100%; }
.sf-chip__label { flex: 1; min-width: 0; }
.sf-chip__count { font-size: 12px; font-weight: 500; color: var(--pw-text-muted); font-variant-numeric: tabular-nums; }
.sf-chip--active .sf-chip__count { color: var(--pw-brand); }
.sf-chip--disabled .sf-chip__count { color: var(--pw-border-light); }
.sf-filters__reset { display: inline-block; margin-top: var(--pw-space-sm); font-size: 13px; font-weight: 600; color: var(--pw-text-muted); }
.sf-filters__reset:hover { color: var(--pw-brand); }

.sf-results { display: flex; flex-direction: column; gap: 12px; }
.sf-result { display: block; padding: var(--pw-space-lg) 28px; background: #fff; border: 1px solid var(--pw-border); border-radius: var(--pw-radius-md); color: inherit; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
.sf-result:hover { transform: translateY(-2px); box-shadow: var(--pw-shadow-md); border-color: var(--pw-border-light); color: inherit; }

/* Eintrags-Tag: einheitliches neutrales Pill, der Tag-Typ wird über das
   vorangestellte SF-Symbol unterscheidbar — Farbe ist über alle Tags gleich. */
.sf-result__tag { display: inline-flex; align-items: center; gap: 6px; padding: var(--pw-space-xs) 10px; border-radius: var(--pw-radius-pill); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; background: var(--pw-bg-alt); color: var(--pw-text-secondary); }
.sf-result__tag-icon { display: inline-flex; width: 12px; height: 12px; color: var(--pw-text-muted); }
.sf-result__tag-icon svg { width: 100%; height: 100%; }

.sf-result__title { font-size: 19px; font-weight: 700; color: var(--pw-text); margin: 12px 0 0; line-height: 1.35; }
.sf-result__excerpt { font-size: 15px; line-height: 1.55; color: var(--pw-text-secondary); margin: var(--pw-space-sm) 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sf-result__meta { display: flex; align-items: center; justify-content: space-between; margin-top: var(--pw-space-md); font-size: 13px; color: var(--pw-text-muted); }
.sf-result__date { font-variant-numeric: tabular-nums; }
.sf-result__more { font-weight: 600; color: var(--pw-link); transition: color 0.2s; }
.sf-result:hover .sf-result__more { color: var(--pw-brand); }

.sf-pagination { display: flex; justify-content: center; align-items: center; gap: var(--pw-space-md); margin: var(--pw-space-2xl) 0 var(--pw-space-3xl); }
.sf-pagination__link { display: inline-flex; align-items: center; padding: 10px 18px; background: #fff; border: 1px solid var(--pw-border); border-radius: var(--pw-radius-sm); font-size: 14px; font-weight: 600; color: var(--pw-text); transition: border-color 0.2s, color 0.2s; }
.sf-pagination__link:hover { border-color: var(--pw-brand); color: var(--pw-brand); }
.sf-pagination__link--disabled { opacity: 0.4; pointer-events: none; }
.sf-pagination__info { font-size: 13px; color: var(--pw-text-muted); }

.sf-empty { text-align: center; max-width: 560px; margin: var(--pw-space-3xl) auto; }
.sf-empty h2 { font-size: 24px; font-weight: 700; color: var(--pw-text); margin: 0 0 12px; }
.sf-empty p { font-size: 15px; color: var(--pw-text-secondary); margin: 0; }

@media (prefers-color-scheme: dark) {
	.sf-page { color: var(--pw-fg); background: var(--pw-bg-alt); }
	.sf-hero { background: linear-gradient(180deg, #0a0a0a 0%, #111 100%); }
	.sf-hero__bgimage { opacity: 0.18; filter: invert(1); }
	.sf-hero__title { color: var(--pw-fg); }
	.sf-hero__meta { color: var(--pw-text-secondary); }
	.sf-search { background: var(--pw-dark-2); border-color: var(--pw-dark-3); }
	.sf-search__input { color: var(--pw-fg); }
	.sf-search__input::placeholder { color: var(--pw-text-secondary); }
	.sf-filters__label { color: var(--pw-text-secondary); }
	.sf-chip { background: transparent; color: var(--pw-fg); }
	.sf-chip:hover { color: var(--pw-brand-hover); }
	.sf-chip--active { color: var(--pw-brand-hover); }
	.sf-chip--active:hover { color: var(--pw-brand-hover); }
	.sf-chip--active .sf-chip__icon { color: var(--pw-brand-hover); }
	.sf-chip--disabled { color: #3a3a3a; }
	.sf-chip--disabled:hover { background: transparent; color: #3a3a3a; }
	.sf-chip--disabled .sf-chip__icon { color: #3a3a3a; }
	.sf-chip__count { color: var(--pw-text-secondary); }
	.sf-chip--active .sf-chip__count { color: var(--pw-brand-hover); }
	.sf-chip--disabled .sf-chip__count { color: #3a3a3a; }
	.sf-filters__reset { color: var(--pw-text-secondary); }
	.sf-result { background: var(--pw-dark-2); border-color: var(--pw-dark-3); }
	.sf-result:hover { border-color: #333; box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
	.sf-result__tag { background: var(--pw-dark-3); color: var(--pw-text-secondary); }
	.sf-result__tag-icon { color: var(--pw-text-muted); }
	.sf-result__title { color: var(--pw-fg); }
	.sf-result__excerpt { color: var(--pw-text-secondary); }
	.sf-result__meta { color: var(--pw-text-secondary); }
	.sf-pagination__link { background: var(--pw-dark-2); border-color: var(--pw-dark-3); color: var(--pw-fg); }
	.sf-pagination__info { color: var(--pw-text-secondary); }
	.sf-empty h2 { color: var(--pw-fg); }
	.sf-empty p { color: var(--pw-text-secondary); }
}

@media (max-width: 900px) {
	.sf-layout { grid-template-columns: 1fr; gap: var(--pw-space-lg); margin-top: var(--pw-space-lg); }
	.sf-aside { position: static; }
	.sf-filters { flex-direction: row; flex-wrap: wrap; gap: var(--pw-space-md) var(--pw-space-lg); }
	.sf-filters__row { flex: 1 1 240px; }
	.sf-hero__bgimage { width: 340px; left: 2%; opacity: 0.1; }
}
@media (max-width: 640px) {
	.sf-hero__title { font-size: 28px; }
	.sf-result { padding: 20px; }
	.sf-result__title { font-size: 17px; }
	.sf-pagination { gap: var(--pw-space-sm); }
	.sf-pagination__link { padding: var(--pw-space-sm) 14px; font-size: 13px; }
}