/*
 * Pflanzenschützer — Ernesto Child Theme (Suva-style)
 * Suva.ch-inspired design system
 */


/* ============================================================
   GLOBAL RESETS var(--font-primary)
   ============================================================ */


.site-header {
	border-bottom: 1px solid var(--border-light, #eee);
}

/* ============================================================
   HEADER: Two-row layout (logo row 1 · nav row 2 full-width)
   Restores the 1.0.5 behaviour overridden by 1.2.1 critical.css
   ============================================================ */

.header-container {
	flex-wrap:      wrap;
	padding-bottom: 0;        /* row-2 nav provides its own spacing */
}

.site-branding {
	/* basis 0 (not auto): flex-wrap's line-fit check uses each item's
	   unshrunk natural size, so with the 375px-wide logo as the basis it
	   never fits beside .header-end and gets wrapped below it, even though
	   min-width: 0 would happily let it shrink if given the chance. */
	flex:      1 1 0;
	order:     1;
	min-width: 0; /* allow shrinking below logo's natural width on narrow viewports */
}

.header-end {
	order: 1;
	flex:  0 0 auto;
}

/* On desktop, stretch nav to its own full-width row 2 */
@media (min-width: 768px) {
	.main-navigation {
		flex:    0 0 100% !important;
		order:   2        !important;
		padding: 0.5rem 0 !important;
		width:   auto     !important;
		height:  auto     !important;
	}
}


#content {
	overflow-x: hidden;
}


/* ============================================================
   SHARED: BUTTONS
   ============================================================ */

/* Filled secondary-colour pill */
.hp-btn {
	display:          inline-block;
	padding:          0.55rem 1.5rem;
	background:       var(--color-secondary);
	color:            var(--text-on-brand, #fff);
	border-radius:    2rem;
	font-size:        0.9rem;
	font-weight:      500;
	text-decoration:  none;
	transition:       background 0.2s ease, transform 0.15s ease;
	white-space:      nowrap;
}

.hp-btn:hover {
	background: var(--color-secondary-hover);
	color:      var(--text-on-brand, #fff);
	transform:  translateY(-1px);
}

/* Outline variant */
.hp-btn--outline {
	background:  transparent;
	color:       var(--color-secondary);
	border:      1.5px solid var(--color-secondary);
}

.hp-btn--outline:hover {
	background: var(--color-secondary);
	color:      var(--text-on-brand, #fff);
}


/* ============================================================
   1. HERO SLIDER OVERRIDES
   Transforms the parent-theme overlay layout into:
   image (top, fixed height) + white panel (below, overlaps image)
   ============================================================ */

.ernesto-hero-slider {
	background-color: var(--bg-alt) !important;
	overflow-x: clip    !important;
	overflow-y: visible !important;   /* prevent panel being clipped during slide transition */
}

/* Grey flanks beside the hero slider. Previously a linear-gradient guessing
   where the hero+panel visually ends (calc(60vh + 12rem)) — any mismatch
   between that estimate and the slider's real rendered height (which shifts
   with window resize) left a white gap in the flanks. Simpler and robust:
   the whole homepage defaults to --bg-alt, and only .hp-slider below opts
   back into --bg-body, so a gap paints the same grey as its surroundings
   instead of standing out. */
body.home, 
body.home #content{
	background: var(--bg-alt);
}

/* ── 1a. Slide: switch from centered overlay to flex column ── */

.ernesto-hero-slider .slider-slide {
	flex-direction:  column   !important;
	align-items:     stretch  !important;
	justify-content: flex-start !important;
	min-height:      auto     !important;   /* remove the 60vh floor */
	/* Parent theme also sets height: clamp(420px, 56.25vw, 800px) — a
	   *width*-driven value, independent of .slide-image's *height*-driven
	   (58vh) sizing below. Let the box size to its actual content (image +
	   overlapping panel) instead, so it's predictable rather than an
	   unrelated width-based guess. */
	height:          auto     !important;
}

/* ── 1b. Image: static in the flow, fixed height ─────────── */

.ernesto-hero-slider .slide-image {
	position:   relative !important;
	top:        auto     !important;
	left:       auto     !important;
	width:      auto     !important;
	height:     58vh;
	min-height: 360px;
	max-height: 580px;
	flex:       0 0 auto;
	z-index:    1;
}

/* No dark/light overlay needed — text lives in white panel */
.ernesto-hero-slider .slide-image::after,
.ernesto-hero-slider .slide-text-light .slide-image::after,
.ernesto-hero-slider .slide-text-dark  .slide-image::after {
	display: none !important;
}

/* ── 1c. White panel: full-width, overlaps image bottom ───── */

.ernesto-hero-slider .slide-content {
	position:  relative                                       !important;
	z-index:   3                                              !important;
	max-width: calc(var(--container-width, 1200px) + 6rem)    !important;
	width:     100%                                                      ;
	margin:    -6.5rem auto 0                                 !important;
	padding:   2.5rem calc(var(--container-padding, 1rem) + 3rem) 3rem !important;
	background: var(--bg-body);
	text-align: left;
	border: 1px solid var(--border-color);
}

/* ── 1d. Title: large, brand-colour, no text-shadow ────────── */

.ernesto-hero-slider .slide-title,
.ernesto-hero-slider .slide-text-light .slide-title,
.ernesto-hero-slider .slide-text-dark  .slide-title {
	color:         var(--color-primary) !important;
	text-shadow:   none                 !important;
	line-height:   1.1;
	max-width:     820px;
	margin-bottom: 0.85rem !important;
	letter-spacing: -0.02em;
}

/* Neutralise the media-query / color-scheme overrides in parent */
@media (prefers-color-scheme: light) {
	.ernesto-hero-slider .slide-title {
		color:       var(--color-primary) !important;
		text-shadow: none                 !important;
	}
}

html[style*="color-scheme"] .ernesto-hero-slider .slide-title {
	color:       var(--color-primary) !important;
	text-shadow: none                 !important;
}

/* ── 1e. Description: gray, no text-shadow ──────────────── */

.ernesto-hero-slider .slide-description,
.ernesto-hero-slider .slide-text-light .slide-description,
.ernesto-hero-slider .slide-text-dark  .slide-description {
	color:         var(--text-main) !important;
	text-shadow:   none             !important;
	font-size:     clamp(0.95rem, 1.4vw, 1.1rem) !important;
	max-width:     90%;
	margin-left:   0     !important;
	margin-right:  0     !important;
	margin-bottom: 1.5rem !important;
}

@media (prefers-color-scheme: light) {
	.ernesto-hero-slider .slide-description {
		color:       var(--text-main) !important;
		text-shadow: none             !important;
	}
}

html[style*="color-scheme"] .ernesto-hero-slider .slide-description {
	color:       var(--text-main) !important;
	text-shadow: none             !important;
}

/* ── 1f. Arrows: vertically centred on the image portion ──── */

.ernesto-hero-slider .slider-arrow {
	/* midpoint of the image, accounting for the 4.5rem overlap offset */
	top: calc(58vh / 2 - 2.25rem);
}

/* ── 1g. Dots: hidden ────────────────────────────────────── */

.ernesto-hero-slider .slider-dots {
	display: none !important;
}

/* ── 1i. Fade transition: stack slides, crossfade on switch ─ */

/* Stack all slides in the same grid cell */
.ernesto-hero-slider .slider-container {
	display:          grid       !important;
	overflow-x:       clip       !important;
	overflow-y:       hidden     !important;
	scroll-snap-type: none       !important;
}

.ernesto-hero-slider .slider-slide {
	grid-area:     1 / 1         !important;
	align-self:    start         !important;   /* size to content so panel stays in track */
	flex:          unset         !important;
	width:         100%          !important;
	opacity:       0;
	pointer-events: none;
	transition:    opacity 0.65s ease !important;
	/* First slide stays visible until JS adds .fade-active */
}

.ernesto-hero-slider .slider-slide:first-child {
	opacity:        1;
	pointer-events: auto;
}

/* Once JS adds .fade-active, only .is-current drives visibility */
.ernesto-hero-slider.fade-active .slider-slide:first-child {
	opacity:        0;
	pointer-events: none;
}

.ernesto-hero-slider .slider-slide.is-current {
	opacity:        1             !important;
	pointer-events: auto         !important;
}

/* ── 1h. Button: match .hp-btn pill style ────────────────── */

.ernesto-hero-slider .slide-button,
.ernesto-hero-slider .slide-button.button {
	background:      var(--color-secondary)     !important;
	color:           var(--text-on-brand) !important;
	border:          none                       !important;
	border-radius:   2rem                       !important;
	padding:         0.55rem 1.5rem             !important;
	font-size:       0.9rem                     !important;
	font-weight:     500                        !important;
	box-shadow:      none                       !important;
	text-shadow:     none                       !important;
	text-decoration: none;
	transition:      background 0.2s ease, transform 0.15s ease;
}

.ernesto-hero-slider .slide-button:hover,
.ernesto-hero-slider .slide-button.button:hover {
	background:   var(--color-secondary-hover) !important;
	border-color: var(--color-secondary-hover) !important;
	color:        var(--text-on-brand, #fff)   !important;
	transform:    translateY(-1px);
}

/* ── 1h. Responsive ─────────────────────────────────────── */

/* ≤767px matches the <picture> breakpoint (ernesto/inc/hero-slider.php)
   that swaps in the 4:5 portrait mobile image. Size .slide-image by that
   same aspect-ratio instead of vh/vw across the whole range, so it always
   matches the crop with no seam at any width — previously 45vh above
   480px and 50vw below it fought each other, and could diverge wildly on
   a tall/narrow window (e.g. 496px vs 240px right at the 480px edge). */
@media (max-width: 767px) {
	.ernesto-hero-slider .slider-slide {
		min-height: auto !important;
	}
	.ernesto-hero-slider .slide-image {
		height:       auto;
		aspect-ratio: 4 / 5;
		min-height:   0;
		max-height:   none;
	}
	.ernesto-hero-slider .slide-content {
		margin-top: -2.5rem !important;
	}
	.ernesto-hero-slider .slider-arrow {
		/* image height = width * 5/4 (aspect-ratio 4/5); halved, minus half the arrow size */
		top: calc(62.5vw - 1.25rem);
	}
}

@media (max-width: 480px) {
	.ernesto-hero-slider .slide-content {
		margin-top: -1.5rem !important;
		padding:    1.5rem var(--container-padding, 1rem) 2rem !important;
	}
}


/* ============================================================
   2. FEATURED ROWS — alternating image / text
   ============================================================ */

.hp-featured {
	margin-top:  -4rem;       /* slide-content overlaps into this section */
	position:    relative;    /* z-index stacking context */
	z-index:     1;           /* below slide-content (z-index: 3) */
	padding:     8rem 0 4rem; /* 8rem top = 4rem overlap + 4rem breathing room */
	background:  var(--bg-alt, #f2f2f2);
}

.hp-featured__row {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   4rem;
	align-items:           center;
	padding:               3.5rem 0;
}

.hp-featured__row:first-child {
	border-top:  none;
	padding-top: 0;
}

/* Flip: image on the right */
.hp-featured__row--flip .hp-featured__media { order: 2; }
.hp-featured__row--flip .hp-featured__body  { order: 1; }

.hp-featured__media img,
.hp-featured__img-placeholder {
	width:        100%;
	aspect-ratio: 4 / 3;
	object-fit:   cover;
	display:      block;
}

.hp-featured__img-placeholder {
	background: var(--bg-alt, #e9ecef);
}

.hp-featured__cat {
	display:        block;
	font-size:      0.78rem;
	font-weight:    500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color:          var(--text-muted);
	margin-bottom:  0.6rem;
}

.hp-featured__title {
	margin:         0 0 1rem;
	letter-spacing: -0.01em;
}

.hp-featured__excerpt {
	font-size:   1rem;
	line-height: 1.65;
	color:       var(--text-main, #444);
	margin:      0 0 1.75rem;
}

.hp-featured__excerpt p {
	margin: 0;
}


/* ============================================================
   3. NEWS SLIDER
   ============================================================ */

.hp-slider {
	padding:    4rem 0;
	background: var(--bg-body);
}

.hp-slider__heading {
	color:          var(--color-primary);
	text-align:     center;
	margin:         0 0 2rem;
	letter-spacing: -0.01em;
}

.hp-slider__track-wrap {
	overflow: hidden;
}

.hp-slider__track {
	display:            flex;
	gap:                1.25rem;
	overflow-x:         auto;
	scroll-snap-type:   x mandatory;
	scroll-behavior:    smooth;
	scrollbar-width:    none;
	-ms-overflow-style: none;
	padding-bottom:     4px;
}

.hp-slider__track::-webkit-scrollbar {
	display: none;
}

.hp-slider__card {
	flex:              0 0 calc(25% - 1rem);
	scroll-snap-align: start;
	background:        var(--bg-alt);
	border:            1px solid var(--border-color);
	transition:        box-shadow 0.2s ease;
}

.hp-slider__card:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
}

.hp-slider__card-link {
	display:         flex;
	flex-direction:  column;
	height:          100%;
	text-decoration: none;
	color:           inherit;
}

.hp-slider__card-img {
	aspect-ratio: 4 / 3;
	overflow:     hidden;
	flex-shrink:  0;
}

.hp-slider__card-img img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform 0.4s ease;
}

.hp-slider__card:hover .hp-slider__card-img img {
	transform: scale(1.05);
}

.hp-slider__card-placeholder {
	width:      100%;
	height:     100%;
	background: var(--bg-alt, #e9ecef);
}

.hp-slider__card-body {
	display:        flex;
	flex-direction: column;
	flex:           1;
	padding:        0.9rem 1rem 1rem;
}

.hp-slider__card-cat {
	display:        block;
	font-size:      0.7rem;
	font-weight:    500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color:          var(--text-muted);
	margin-bottom:  0.4rem;
}

.hp-slider__card-title {
	font-family: var(--font-heading);
	font-size:   var(--font-size-body, 1rem);
	font-weight: 700;
	line-height: 1.35;
	color:       var(--text-heading, #111);
	margin:      0 0 0.5rem;
}

.hp-slider__card-excerpt {
	font-size:   0.875em;  /* one step smaller than body font size */
	line-height: 1.5;
	color:       var(--text-muted);
	margin:      0 0 1rem;
	flex:        1;
}

.hp-slider__card-readmore {
	font-size:   0.82rem;
	font-weight: 500;
	color:       var(--color-secondary);
	margin-top:  auto;
}

.hp-slider__nav {
	display:         flex;
	justify-content: center;
	gap:             0.75rem;
	margin-top:      1.75rem;
}

.hp-slider__prev,
.hp-slider__next {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           2.75rem; /* 44px — meets WCAG 2.5.5 on its own now that it's excluded from the parent theme's generic mobile touch-target padding (see accessibility.css) */
	height:          2.75rem;
	/* The parent theme's base button rule (style.css) gives every <button>
	   padding: var(--space-sm) var(--space-lg) — 8px/24px is wider than this
	   44px box minus its border, so the content box (and the icon inside)
	   would collapse to 0. Reset it explicitly, same as background/color/
	   border already are below. */
	padding:         0;
	border-radius:   50%;
	border:          1.5px solid var(--color-secondary);
	background:      var(--bg-body);
	color:           var(--color-secondary);
	cursor:          pointer;
	transition:      background 0.2s ease, color 0.2s ease;
}

.hp-slider__prev svg,
.hp-slider__next svg {
	/* Override the parent theme's global svg { height: auto; max-width: 100% }
	   reset — without an explicit size, the SVG collapses to width: 0 inside
	   this flex button. */
	width:       18px;
	height:      18px;
	flex-shrink: 0;
}

.hp-slider__prev:hover,
.hp-slider__next:hover {
	background: var(--color-secondary);
	color:      var(--text-on-brand, #fff);
}

.hp-slider__prev:disabled,
.hp-slider__next:disabled {
	opacity: 0.35;
	cursor:  not-allowed;
}


/* ============================================================
   4. WEITERE BEITRÄGE
   ============================================================ */

.hp-weitere {
	padding:    3.5rem 0 4rem;
	background-color: var(--bg-alt) !important;
}

.hp-weitere__heading {
	color:        var(--text-heading, #111);
	margin:       0 0 0.25rem;
}

.hp-weitere__grid {
	display:               grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap:                   0 3rem;
	margin-top:            1rem;
}

.hp-weitere__link {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             1rem;
	padding:         0.7rem 0;
	border-bottom:   1px solid var(--border-light, #d8d8d8);
	color:           var(--color-secondary);
	text-decoration: none;
	font-size:       var(--font-size-body, 1rem);
	transition:      color 0.2s ease, padding-left 0.2s ease;
}

.hp-weitere__col .hp-weitere__link:first-child {
	border-top: 1px solid var(--border-light, #d8d8d8);
}

.hp-weitere__link:hover {
	color:        var(--color-primary);
	padding-left: 0.25rem;
}

.hp-weitere__arrow {
	flex-shrink: 0;
	font-size:   1rem;
}

.hp-weitere__footer {
	margin-top: 2.5rem;
	text-align: center;
}


/* ============================================================
   5. NEWSLETTER TEASER
   ============================================================ */

.hp-newsletter {
	padding:    3.5rem 0 4.5rem;
	background: var(--bg-alt, #f2f2f2);
}

.hp-newsletter__box {
	display:    flex;
	align-items: center;
	gap:         2rem;
	max-width:   680px;
	margin:      0 auto;
	background:  var(--bg-surface);
	padding:     2rem 2.5rem;
	box-shadow:  0 2px 12px rgba(0, 0, 0, 0.07);
}

.hp-newsletter__text {
	flex: 1;
}

.hp-newsletter__title {
	font-family: var(--font-heading);
	font-size:   1.1rem;
	font-weight: 700;
	color:       var(--text-heading, #111);
	margin:      0 0 0.6rem;
}

.hp-newsletter__desc {
	font-size:   0.95rem;
	line-height: 1.6;
	color:       var(--text-main);
	margin:      0 0 1.1rem;
}

.hp-newsletter__link {
	font-size:       0.9rem;
	font-weight:     600;
	color:           var(--color-secondary);
	text-decoration: none;
	border-bottom:   1.5px solid transparent;
	transition:      border-color 0.2s ease;
}

.hp-newsletter__link:hover {
	border-bottom-color: var(--color-secondary);
}

.hp-newsletter__img {
	flex:      0 0 200px;
	max-width: 200px;
	overflow:  hidden;
}

.hp-newsletter__img img {
	width:      100%;
	height:     160px;
	object-fit: cover;
	display:    block;
}


/* ============================================================
   6. RESPONSIVE
   ============================================================ */

/* ── Tablet (≤ 1100px) — 3 slider cards ─────────────────── */
@media (max-width: 1100px) {
	.hp-slider__card {
		flex-basis: calc(33.333% - 0.85rem);
	}
}

/* ── Small tablet (≤ 768px) ─────────────────────────────── */
@media (max-width: 768px) {

	/* Hero: smaller image, less overlap */
	.hp-hero__img {
		height:     45vh;
		min-height: 260px;
	}

	.hp-hero__panel {
		margin-top: -2.5rem;
		padding:    2rem 0 2.5rem;
	}

	/* Featured: stack vertically */
	.hp-featured__row {
		grid-template-columns: 1fr;
		gap:                   1.5rem;
		padding:               2.5rem 0;
	}

	.hp-featured__row--flip .hp-featured__media,
	.hp-featured__row--flip .hp-featured__body {
		order: unset;
	}

	/* Slider: show 1.5 cards */
	.hp-slider__card {
		flex-basis: calc(72% - 0.625rem);
	}

	/* Weitere Beiträge: single column */
	.hp-weitere__grid {
		grid-template-columns: 1fr;
	}

	/* Newsletter: stack */
	.hp-newsletter__box {
		flex-direction: column;
		padding:        1.5rem;
	}

	.hp-newsletter__img {
		flex:      0 0 auto;
		max-width: 100%;
		width:     100%;
	}

	.hp-newsletter__img img {
		height: 180px;
		width:  100%;
	}
}

/* ── Phone (≤ 480px) ─────────────────────────────────────── */
@media (max-width: 480px) {
	.hp-hero__title {
		font-size: clamp(1.75rem, 8vw, 2.5rem);
	}

	.hp-slider__card {
		flex-basis: calc(85% - 0.5rem);
	}
}


/* ============================================================
   7. PARENT THEME OVERRIDES
   ============================================================ */

.custom-logo-link img,
.custom-logo-link:hover img,
.custom-logo-link:focus img {
	transform:  none !important;
	box-shadow: none !important;
	filter:     none !important;
	opacity:    1    !important;
	transition: none !important;
}

.slider-arrow-prev {
	left:  1.5rem !important;
	right: auto   !important;
}

.slider-arrow-next {
	right: 1.5rem !important;
	left:  auto   !important;
}


/* ══════════════════════════════════════════════════════════════
   HIGH CONTRAST — ernesto-pfs specific
   Generic elements + hero slider are handled by shared-child-a11y.css.
   This theme uses standard parent elements only, so overrides are minimal:
   reset the pill border-radius on buttons/arrows in HC for consistency.
   ══════════════════════════════════════════════════════════════ */

body.high-contrast .ernesto-hero-slider .slide-button,
body.high-contrast .ernesto-hero-slider .slide-button.button {
	border-radius: 0 !important;   /* square buttons in HC, matching other themes */
}

body.high-contrast .ernesto-hero-slider .slider-arrow {
	border-radius: 0 !important;
}

@media (prefers-contrast: high) {
	.ernesto-hero-slider .slide-button,
	.ernesto-hero-slider .slide-button.button {
		border-radius: 0 !important;
	}
	.ernesto-hero-slider .slider-arrow {
		border-radius: 0 !important;
	}
}


/* ============================================================
   8. PORTFOLIO ARCHIVE GRID — card overrides
   ============================================================ */

/* Landscape image (16:9, matches ernesto-featured 1260×710) */
.portfolio-card__img,
.portfolio-card__img-placeholder {
	aspect-ratio: 16 / 9 !important;
}

/* No table borders */
.portfolio-card__table,
.portfolio-card__table td,
.portfolio-card__table tr {
	border: none !important;
}

/* Date: smaller, muted — needs .portfolio-card__table to beat td specificity */
.portfolio-card__table .portfolio-card__date {
	font-size:   0.7rem;
	color:       var(--text-muted);
	padding-top: 0;
}


/* Allow em/strong in title link to render naturally */
.portfolio-card__title-link em     { font-style:  italic !important; }
.portfolio-card__title-link strong { font-weight: bold   !important; }


/* ============================================================
   9. FOOTER — align text items to baseline, not centre
   ============================================================ */

.site-info {
	align-items: baseline;
}


/* ============================================================
   9. ARCHIVE PAGE TITLE — match .hp-featured__title styling
   ============================================================ */

.page-title {
	letter-spacing: -0.01em;
	margin:         0 0 1rem;
	color:          var(--color-primary);
	font-weight:    700;
}

/* Small label above the tag name on tag archives, e.g. "Stichwort:" */
.page-title__eyebrow {
	display:     block;
	font-size:   var(--font-size-sm, 0.875rem);
	font-weight: 400;
	color:       var(--text-muted, #65676b);
	margin:      0 0 0.25rem;
}


/* ============================================================
   9. SINGLE POST — portfolio-single__table: no borders
   Parent theme draws borders on table, tr, td in portfolio.css.
   ============================================================ */

.portfolio-single__table,
.portfolio-single__table td,
.portfolio-single__table tr,
.portfolio-single__extended {
	border: none !important;
}


/* ============================================================
   9. SINGLE POST FEATURED IMAGE — match height of the content
   column (before the <!--more--> tag) instead of a fixed ratio.
   Parent theme sets align-items:start on .portfolio-single, so the
   image column won't stretch to the row height without this.
   ============================================================ */

.portfolio-single__image {
	align-self: stretch;
}

.portfolio-single__img,
.portfolio-single__img-placeholder {
	aspect-ratio: auto;
	height:       100%;
}


/* ============================================================
   9. SINGLE POST BREADCRUMB ROW — breadcrumbs | date
   ============================================================ */

.portfolio-single__breadcrumb-row {
	display:      flex;
	align-items:  baseline;
	margin-bottom: var(--space-lg, 2rem);
}

.portfolio-single__breadcrumb-row .breadcrumbs {
	margin-bottom: 0;
}

.portfolio-single__breadcrumb-date {
	font-size:  0.75rem;
	color:      var(--text-main, #1A1A1B);
	opacity:    0.3;
	transition: font-size 0.3s ease, opacity 0.3s ease;
}

.breadcrumbs:hover + .portfolio-single__breadcrumb-date {
	font-size: 0.875rem;
	opacity:   0.8;
}

.portfolio-single__breadcrumb-date::before {
	content:      "|";
	margin:       0 0.6em;
}


/* ============================================================
   9. SINGLE POST META ROW — tag badges
   Parent theme's hover-grow effect on .portfolio-single__row-meta-values
   is opt-in via a --interactive modifier class now (fixed in Ernesto
   core); our single.php tags row doesn't add it, so no override needed.
   ============================================================ */

.portfolio-single__tag-badge {
	display:           inline-block;
	background-color:  color-mix( in srgb, var(--color-secondary, #6C757D) 30%, transparent );
	color:             var(--color-secondary, #6C757D);
	font-size:         11px;
	font-weight:       600;
	letter-spacing:    0.05em;
	text-transform:    uppercase;
	padding:           5px 14px;
	border-radius:     0;
	margin-bottom:     20px;
	text-decoration:   none;
}

.portfolio-single__tag-badge:hover,
.portfolio-single__tag-badge:focus {
	color:           var(--text-main, #1A1A1B);
	text-decoration: none;
}

.portfolio-single__tag-badge + .portfolio-single__tag-badge {
	margin-left: 8px;
}


/* ============================================================
   POLITIK ARCHIVE — first post hero + 3-column grid
   ============================================================ */

/* First-post featured row: no top padding needed (no hero slider above) */
.pk-featured-first {
	margin-top: 0;
	padding:    3rem 0 4rem;
}

.pk-featured-first .hp-featured__row {
	padding-top: 0;
}

/* 3-column card grid. Top padding matches .hp-slider's on the front page,
   so the grid starts with the same amount of breathing room below the
   featured row as "Das könnte Sie auch interessieren" has there. */
.pk-archive-grid-section {
	padding: 4rem 0 4rem;
}

.pk-archive-grid {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   2rem;
}

.pk-archive-card {
	display:        flex;
	flex-direction: column;
	background:     var(--bg-alt);
	border:         1px solid var(--border-color);
	transition:     box-shadow 0.2s ease;
}

.pk-archive-card:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
}

.pk-archive-card__link {
	display:         flex;
	flex-direction:  column;
	height:          100%;
	text-decoration: none;
	color:           inherit;
}

.pk-archive-card__img-wrap {
	aspect-ratio: 4 / 3;
	overflow:     hidden;
	flex-shrink:  0;
}

.pk-archive-card__img-wrap img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform 0.4s ease;
}

.pk-archive-card:hover .pk-archive-card__img-wrap img {
	transform: scale(1.05);
}

.pk-archive-card__placeholder {
	width:      100%;
	height:     100%;
	background: var(--bg-alt, #e9ecef);
}

.pk-archive-card__body {
	display:        flex;
	flex-direction: column;
	flex:           1;
	padding:        1rem 1.1rem 1.25rem;
}

.pk-archive-card__cat {
	display:        block;
	font-size:      0.72rem;
	font-weight:    500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color:          var(--text-muted);
	margin-bottom:  0.4rem;
}

.pk-archive-card__title {
	font-size:   1rem;
	font-weight: 700;
	line-height: 1.35;
	color:       var(--text-heading, #111);
	margin:      0 0 0.5rem;
}

.pk-archive-card__excerpt {
	font-size:   0.875rem;
	line-height: 1.5;
	color:       var(--text-muted);
	margin:      0 0 1rem;
	flex:        1;
}

.pk-archive-card__more {
	font-size:   0.82rem;
	font-weight: 500;
	color:       var(--color-secondary);
	margin-top:  auto;
}

/* Tablet: 2 columns */
@media (max-width: 900px) {
	.pk-archive-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Mobile: 1 column */
@media (max-width: 600px) {
	.pk-archive-grid {
		grid-template-columns: 1fr;
	}
}

/* Tag Cloud card — last item in the grid on top-level category archives.
   No <a class="pk-archive-card__link"> wrapper (nothing to link to), so
   .pk-archive-card__img-wrap / __body sit directly in the flex column
   already established by .pk-archive-card itself. */
/* Inset border so it reads as a distinct card, not a regular article */
.pk-archive-card--tagcloud {
	cursor: default;
	box-shadow: inset 0 0 0 3px var(--color-secondary);
}

.pk-archive-card--tagcloud:hover {
	/* keep the inset border, just drop the regular-card hover elevation */
	box-shadow: inset 0 0 0 3px var(--color-secondary);
}

.pk-archive-card--tagcloud:hover .pk-archive-card__img-wrap img {
	transform: none;
}

.pk-archive-card__tagcloud {
	display:       flex;
	flex-wrap:     wrap;
	align-content: flex-start;
	gap:           0.4rem 0.5rem;
	margin:        0 0 1rem;
	flex:          1;
}

/* Font-size is set inline per tag (0.75rem–var(--font-size-body) scale,
   see ernesto_pfs_get_category_tag_cloud_card()); only weight/color here. */
.pk-archive-card__tagcloud .tag-cloud-link {
	display:          inline-block;
	background-color: color-mix( in srgb, var(--color-secondary, #6C757D) 30%, transparent );
	color:            var(--color-secondary, #6C757D);
	line-height:      1.3;
	font-weight:      400;
	letter-spacing:   0.02em;
	padding:          3px 10px;
	text-decoration:  none;
	white-space:      nowrap;
}

.pk-archive-card__tagcloud .tag-cloud-link:hover,
.pk-archive-card__tagcloud .tag-cloud-link:focus {
	color:           var(--text-main, #1A1A1B);
	text-decoration: none;
}

/* Top third by post count within this category */
.pk-archive-card__tagcloud .pk-tagcloud-link--top {
	font-weight: 700;
}


/* ============================================================
   CALLOUT BOXES — info / success / alert / note / downloads
   Inserted via the "Kriegmann Boxen" block patterns.
   Each box carries a single class: kbox_style_{info|success|alert|note|downloads}.
   ============================================================ */

.kbox_style_info,
.kbox_style_success,
.kbox_style_alert,
.kbox_style_note,
.kbox_style_downloads {
	padding:       24px;
	margin-bottom: 32px;
}

.kbox_style_info > *:last-child,
.kbox_style_success > *:last-child,
.kbox_style_alert > *:last-child,
.kbox_style_note > *:last-child,
.kbox_style_downloads > *:last-child {
	margin-bottom: 0;
}

.kbox_style_info h4,
.kbox_style_success h4,
.kbox_style_alert h4,
.kbox_style_note h4,
.kbox_style_downloads h4 {
	margin-top: 0;
}

/* Info: Primary color */
.kbox_style_info {
	background-color: color-mix( in srgb, var(--color-primary, #0066FF) 10%, transparent );
	border:            none;
}

.kbox_style_info h4 {
	color: var(--color-primary, #0066FF);
}

/* Success: Success color */
.kbox_style_success {
	background-color: color-mix( in srgb, var(--color-success, #28A745) 10%, transparent );
	border:            4px solid var(--color-success, #28A745);
}

.kbox_style_success h4 {
	color: var(--color-success, #28A745);
}

/* Achtung: Error color */
.kbox_style_alert {
	background-color: color-mix( in srgb, var(--color-error, #DC3545) 10%, transparent );
	border:            4px solid var(--color-error, #DC3545);
}

.kbox_style_alert h4 {
	color: var(--color-error, #DC3545);
}

/* Hinweis: Body Text color */
.kbox_style_note {
	background-color: color-mix( in srgb, var(--text-main, #1A1A1B) 10%, transparent );
	border:            none;
}

.kbox_style_note h4 {
	color: var(--text-main, #1A1A1B);
}

/* Downloads: Notice color (customizer "Notice" = --color-info) */
.kbox_style_downloads {
	background-color: color-mix( in srgb, var(--color-info, #17A2B8) 10%, transparent );
	border:            4px solid var(--color-info, #17A2B8);
}

.kbox_style_downloads h4 {
	color: var(--color-info, #17A2B8);
}

.kbox_style_downloads ul {
	list-style: none;
	margin:     0;
	padding:    0;
}

.kbox_style_downloads li {
	margin-bottom: 8px;
}

.kbox_style_downloads li:last-child {
	margin-bottom: 0;
}

.kbox_style_downloads a {
	color:           var(--color-primary, #0066FF);
	font-weight:     600;
	text-decoration: none;
}

.kbox_style_downloads a::before {
	content:      "⬇";
	margin-right: 0.4em;
}

.kbox_style_downloads a:hover,
.kbox_style_downloads a:focus {
	text-decoration: underline;
}


/* ============================================================
   DOCUMENT LINK ICONS — badge before any list-item link that
   points to a PDF or Office file (works inside any box or content).
   ============================================================ */

.container li a[href$=".pdf" i]::before,
.container li a[href$=".doc" i]::before,
.container li a[href$=".docx" i]::before,
.container li a[href$=".odt" i]::before,
.container li a[href$=".xls" i]::before,
.container li a[href$=".xlsx" i]::before,
.container li a[href$=".ods" i]::before,
.container li a[href$=".ppt" i]::before,
.container li a[href$=".pptx" i]::before,
.container li a[href$=".odp" i]::before {
	display:        inline-block;
	color:          #fff;
	font-size:      10px;
	font-weight:    700;
	letter-spacing: 0.03em;
	padding:        2px 6px;
	margin-right:   8px;
	vertical-align: middle;
}

.container li a[href$=".pdf" i]::before {
	content:          "PDF";
	background-color: #C0392B;
}

.container li a[href$=".doc" i]::before,
.container li a[href$=".docx" i]::before,
.container li a[href$=".odt" i]::before {
	content:          "DOC";
	background-color: #2B579A;
}

.container li a[href$=".xls" i]::before,
.container li a[href$=".xlsx" i]::before,
.container li a[href$=".ods" i]::before {
	content:          "XLS";
	background-color: #1D6F42;
}

.container li a[href$=".ppt" i]::before,
.container li a[href$=".pptx" i]::before,
.container li a[href$=".odp" i]::before {
	content:          "PPT";
	background-color: #D24726;
}