/* ============================================================
   Weide & Land – Components
   Alle Klassen: wl- Präfix
   Keine !important, keine Inline-Styles, keine Hex-Werte
   ============================================================ */

/* ── Skip Link (Accessibility) ── */
.wl-skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: var(--z-modal);
  padding: var(--space-3) var(--space-6);
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: var(--weight-medium);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: top var(--transition-fast);
}
.wl-skip-link:focus { top: var(--space-4); }

/* ── Container ── */
.wl-container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
@media (min-width: 768px)  { .wl-container { padding-inline: var(--space-8);  } }
@media (min-width: 1280px) { .wl-container { padding-inline: var(--space-12); } }

.wl-container--narrow { max-width: var(--container-md); }
.wl-container--content { max-width: var(--container-content); }

/* ── Buttons ── */
.wl-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: 1;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    color            var(--transition-fast),
    border-color     var(--transition-fast),
    box-shadow       var(--transition-fast);
  min-height: 44px; /* Touch-Target */
}

.wl-btn:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.wl-btn--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}
.wl-btn--primary:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-white);
}

.wl-btn--secondary {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.wl-btn--secondary:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.wl-btn--ghost {
  background-color: transparent;
  color: var(--color-text-muted);
  border-color: var(--color-border);
}
.wl-btn--ghost:hover {
  background-color: var(--color-surface-alt);
  color: var(--color-text);
}

.wl-btn--sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  min-height: 36px;
}

/* ── Card ── */
.wl-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.wl-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.wl-card__image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.wl-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.wl-card:hover .wl-card__image img { transform: scale(1.04); }

.wl-card__body {
  padding: var(--space-6);
}

.wl-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-end: var(--space-3);
}

.wl-card__title {
  font-family: var(--font-headline);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  margin-block-end: var(--space-3);
  color: var(--color-neutral-dark);
}
.wl-card__title a {
  text-decoration: none;
  color: inherit;
}
.wl-card__title a:hover { color: var(--color-primary); }

.wl-card__excerpt {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  margin-block-end: var(--space-4);
}

/* ── Badge ── */
.wl-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  line-height: 1;
}

.wl-badge--green   { background-color: var(--color-meadow-pale);  color: var(--color-meadow-deep);  }
.wl-badge--earth   { background-color: var(--color-wool-warm);    color: var(--color-earth-dark);   }
.wl-badge--sky     { background-color: var(--color-sky-light);    color: var(--color-sky-deep);     }
.wl-badge--neutral { background-color: var(--color-neutral-light);color: var(--color-neutral-mid);  }

/* ── Section ── */
.wl-section {
  padding-block: var(--space-16);
}
.wl-section--sm { padding-block: var(--space-10); }
.wl-section--lg { padding-block: var(--space-24); }

.wl-section--alt    { background-color: var(--color-surface-alt); }
.wl-section--warm   { background-color: var(--color-surface-warm); }
.wl-section--green  { background-color: var(--color-meadow-deep); color: var(--color-white); }

.wl-section__header {
  max-width: var(--container-md);
  margin-block-end: var(--space-12);
}
.wl-section__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-block-end: var(--space-2);
}
.wl-section__title {
  font-family: var(--font-headline);
  font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
  margin-block-end: var(--space-4);
}
.wl-section__lead {
  font-size: var(--text-md);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

/* ── Grid ── */
.wl-grid {
  display: grid;
  gap: var(--space-6);
}
.wl-grid--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.wl-grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }

/* ── Hero ── */
.wl-hero {
  position: relative;
  min-height: clamp(480px, 60vh, 700px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--color-meadow-deep);
}

.wl-hero__bg {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
}
.wl-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wl-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(45,74,45,.75) 0%,
    rgba(26,26,24,.45) 100%
  );
  z-index: var(--z-raised);
}

.wl-hero__content {
  position: relative;
  z-index: calc(var(--z-raised) + 1);
  width: 100%;
  padding-block: var(--space-16);
}

.wl-hero__eyebrow {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-meadow-pale);
  margin-block-end: var(--space-4);
}

.wl-hero__title {
  font-family: var(--font-headline);
  font-size: var(--text-hero);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-white);
  max-width: 720px;
  margin-block-end: var(--space-6);
}
.wl-hero__title em {
  font-style: italic;
  color: var(--color-meadow-light);
}

.wl-hero__lead,
.wl-hero__text {
  font-size: var(--text-md);
  color: var(--color-white);
  max-width: 560px;
  line-height: var(--leading-relaxed);
  margin-block-end: var(--space-8);
  opacity: 0.9;
}

.wl-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Buttons im Hero auf dunklem Hintergrund */
.wl-hero .wl-btn--primary {
  background-color: var(--color-white);
  color: var(--color-meadow-deep);
  border-color: var(--color-white);
}
.wl-hero .wl-btn--primary:hover {
  background-color: var(--color-wool-light);
  border-color: var(--color-wool-light);
  color: var(--color-meadow-deep);
}
.wl-hero .wl-btn--secondary {
  background-color: transparent;
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.65);
}
.wl-hero .wl-btn--secondary:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: var(--color-white);
  color: var(--color-white);
}

/* ── Glossar-Eintrag ── */
.wl-glossar-term {
  background-color: var(--color-surface-warm);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-6);
  margin-block-end: var(--space-8);
}
.wl-glossar-term__title {
  font-family: var(--font-headline);
  font-size: var(--text-2xl);
  margin-block-end: var(--space-2);
}
.wl-glossar-term__category {
  margin-block-end: var(--space-4);
}
.wl-glossar-related {
  margin-block-start: var(--space-8);
  padding-block-start: var(--space-6);
  border-top: 1px solid var(--color-border);
}
.wl-glossar-related__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-block-end: var(--space-3);
}
.wl-glossar-related__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}
.wl-glossar-related__list a {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  text-decoration: none;
  color: var(--color-primary);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.wl-glossar-related__list a:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

/* ── Ratgeber Meta ── */
.wl-ratgeber-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  background-color: var(--color-surface-alt);
  border-radius: var(--radius-md);
  margin-block-end: var(--space-8);
}
.wl-ratgeber-meta__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.wl-ratgeber-meta__item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-primary);
}

/* ── Rasse-Profil Hero ── */
.wl-rasse-hero {
  position: relative;
  min-height: clamp(320px, 45vh, 560px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-color: var(--color-meadow-deep);
}
.wl-rasse-hero__img {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.wl-rasse-hero__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.wl-rasse-hero__overlay {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: var(--space-10) var(--space-12);
  background: linear-gradient(
    to top,
    rgba(26,26,24,.80) 0%,
    rgba(45,74,45,.45) 55%,
    transparent 100%
  );
}
.wl-rasse-hero__content { max-width: 680px; }
.wl-rasse-hero__badge   { margin-block-end: var(--space-3); }
.wl-rasse-hero__title {
  font-family: var(--font-headline);
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-white);
  margin-block-end: var(--space-4);
}
.wl-rasse-hero__excerpt {
  font-size: var(--text-md);
  color: rgba(255,255,255,.85);
  line-height: var(--leading-relaxed);
  max-width: 560px;
}

/* ── Rasse-Layout (Content + Steckbrief) ── */
.wl-rasse-layout {
  display: grid;
  gap: var(--space-10);
  padding-block: var(--space-12);
}
@media (min-width: 900px) {
  .wl-rasse-layout {
    grid-template-columns: 1fr 300px;
    align-items: start;
  }
}

/* ── Steckbrief Sidebar ──
   Mobil vor dem Fließtext, damit eilige Leser Kerndaten (Herkunft, Gewicht,
   Eignung) sofort sehen, ohne zu scrollen; ab 900px per Grid rechts daneben. */
.wl-steckbrief {
  order: -1;
}
@media (min-width: 900px) {
  .wl-steckbrief {
    order: initial;
    position: sticky;
    top: calc(160px + var(--space-4));
  }
}
.wl-steckbrief__inner {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.wl-steckbrief__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-white);
  background-color: var(--color-meadow-deep);
  padding: var(--space-3) var(--space-4);
  margin: 0;
}
.wl-steckbrief__list {
  margin: 0;
  padding: 0;
}
.wl-steckbrief__row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--color-border-light);
}
.wl-steckbrief__row:last-child { border-bottom: none; }
.wl-steckbrief__row dt {
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
}
.wl-steckbrief__row dd { margin: 0; color: var(--color-text); }
.wl-steckbrief__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-neutral-light);
}
.wl-steckbrief__tag {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  background-color: var(--color-meadow-pale);
  color: var(--color-meadow-deep);
  border-radius: var(--radius-pill);
}
.wl-steckbrief__back {
  display: block;
  margin-block-start: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.wl-steckbrief__back:hover { color: var(--color-primary); }

/* ── Inhaltsverzeichnis (TOC) ── */
.wl-toc {
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-block-end: var(--space-8);
}
.wl-toc__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.wl-toc__list {
  margin: 0;
  padding-inline-start: var(--space-5);
  display: grid;
  gap: var(--space-1);
}
.wl-toc__list a {
  color: var(--color-primary);
  text-decoration: none;
  font-size: var(--text-sm);
}
.wl-toc__list a:hover { text-decoration: underline; }

/* ── Pagination ── */
.wl-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-12);
}
.wl-pagination a,
.wl-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.wl-pagination a { border: 1px solid var(--color-border); color: var(--color-text); }
.wl-pagination a:hover { background-color: var(--color-surface-alt); }
.wl-pagination .current {
  background-color: var(--color-primary);
  color: var(--color-white);
  border: 1px solid var(--color-primary);
}

/* ── Site Header ── */
.wl-site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--color-neutral-light);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.wl-site-header__inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-4);
  padding-block: var(--space-3);
}
.wl-site-header__brand a {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.wl-site-header__tagline {
  display: none;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0;
}
@media (min-width: 1024px) { .wl-site-header__tagline { display: block; } }

/* ── Logo (Bild + Wordmark) ── */
.wl-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  text-decoration: none;
}
.wl-logo-img {
  width: auto;
  height: 80px;
  display: block;
}
@media (min-width: 768px) {
  .wl-logo-img { height: 140px; }
}
.wl-logo-wordmark {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  color: var(--color-neutral-dark);
  white-space: nowrap;
}
@media (min-width: 768px) {
  .wl-logo-wordmark { font-size: var(--text-xl); }
}
.wl-logo-wordmark__amp { color: var(--color-meadow-mid); }

/* Textlogo-Fallback */
.wl-logo-text {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-heading);
  letter-spacing: 0.05em;
}
.wl-logo-text--light { color: var(--color-white); }
.wl-logo-text__amp { color: var(--color-meadow-mid); }

/* ── Textfarbe Header & Nav – Override Kadence-Defaults ── */
.wl-site-header,
.wl-site-header a,
.wl-site-header button,
.wl-nav-toggle {
  color: var(--color-neutral-dark);
}

/* ── Primary Navigation ── */
.wl-primary-nav {
  display: flex;
  align-items: center;
}
@media (min-width: 768px) {
  .wl-primary-nav {
    margin-left: 100px;
    align-self: flex-end;
  }
}

/* ── Sitesuche ── */
.wl-site-header__search {
  position: relative;
  margin-inline-start: auto;
}
.wl-search-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-neutral-dark);
  cursor: pointer;
  border-radius: var(--radius-pill);
  transition: background-color var(--transition-fast);
}
.wl-search-toggle svg { width: 20px; height: 20px; }
.wl-search-toggle:hover,
.wl-search-toggle[aria-expanded="true"] { background-color: var(--color-meadow-pale); }

.wl-header-search {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: var(--z-sticky);
  min-width: 280px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-3);
}
.wl-header-search .search-form {
  display: flex;
  gap: var(--space-2);
}
.wl-header-search .search-field {
  flex: 1;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-sm);
}
.wl-header-search .search-submit {
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-white);
  font-size: var(--text-sm);
  cursor: pointer;
}

/* ── Hamburger Toggle ── */
.wl-nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: var(--space-2);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text);
}
.wl-nav-toggle__bar {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transform-origin: center;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.wl-nav-toggle[aria-expanded="true"] .wl-nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.wl-nav-toggle[aria-expanded="true"] .wl-nav-toggle__bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.wl-nav-toggle[aria-expanded="true"] .wl-nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
@media (min-width: 768px) { .wl-nav-toggle { display: none; } }

/* ── Sub-Aufklapp-Buttons (JS-injiziert, für Accordion & Keyboard) ── */
.wl-sub-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}
.wl-sub-toggle:hover {
  color: var(--color-primary);
  background-color: var(--color-surface-alt);
}
.wl-sub-toggle svg {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-fast);
}
.wl-sub-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
/* Desktop: Sub-Toggles ausblenden – Hover regelt das Panel */
@media (min-width: 768px) {
  .wl-sub-toggle { display: none; }
}

/* ── Navigationsmenü (Mobile-First) ── */
.wl-nav-menu {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Mobile: aufgeklapptes Hauptmenü */
.wl-nav-menu.is-open {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-white);
  border-top: 3px solid var(--color-primary);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  padding-block: var(--space-2);
  max-height: calc(100dvh - 90px);
  overflow-y: auto;
  z-index: var(--z-dropdown);
}

/* Desktop: horizontale Navigationsleiste */
@media (min-width: 768px) {
  .wl-nav-menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-1);
    position: static;
    background: none;
    border: none;
    padding: 0;
    max-height: none;
    overflow: visible;
  }
}

/* ── L1 Items: Link + Toggle nebeneinander ── */
.wl-nav-menu > .menu-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 40%, transparent);
}
/* Aufgeklapptes Untermenü (mobile) erzwingt Zeilenumbruch: sonst rutscht es als
   drittes Flex-Element neben Link + Toggle statt in eine neue Zeile darunter */
.wl-nav-menu > .menu-item > .sub-menu {
  flex-basis: 100%;
}
.wl-nav-menu > .menu-item:last-child { border-bottom: none; }

@media (min-width: 768px) {
  #wl-primary-menu > .menu-item {
    border-bottom: none;
  }
}

/* L1 Links */
.wl-nav-menu > .menu-item > a {
  flex: 1;
  display: block;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}
.wl-nav-menu > .menu-item > a:hover,
.wl-nav-menu > .current-menu-item > a,
.wl-nav-menu > .current-menu-ancestor > a {
  color: var(--color-primary);
  background-color: var(--color-surface-alt);
}
@media (min-width: 768px) {
  .wl-nav-menu > .menu-item > a {
    flex: none;
    /* Touch-Target: min. ~44px Höhe (space-3 * 2 + Zeilenhöhe), auch für
       Tablets/Touch-Laptops im Desktop-Layout. */
    padding: var(--space-3) var(--space-4);
    /* Immer über der Lücken-Brücke (siehe Mega-Panel-Block): jeder echte
       Link bleibt so direkt hoverbar/klickbar, auch während ein Panel
       geöffnet ist – nötig für sofortiges Umschalten zwischen Menüpunkten. */
    position: relative;
    z-index: 2;
  }
  .wl-nav-menu > .menu-item > a:hover,
  .wl-nav-menu > .current-menu-item > a,
  .wl-nav-menu > .current-menu-ancestor > a {
    background-color: transparent;
  }
  .wl-nav-menu > .menu-item > a:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: -3px;
    border-radius: var(--radius-sm);
  }
  /* Aktiver Zustand: Unterstrich */
  .wl-nav-menu > .menu-item-has-children > a::after {
    content: ' ▾';
    font-size: 0.7em;
    opacity: 0.5;
    display: inline;
  }
}

/* ── Sub-Menus: Mobile Accordion ── */
.wl-nav-menu .sub-menu {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}
.wl-nav-menu .sub-menu.is-open {
  display: block;
}

/* L2 Item-Layout (mobile) */
.wl-nav-menu .sub-menu > .menu-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
/* Aufgeklapptes L3-Untermenü erzwingt ebenfalls Zeilenumbruch (siehe L1 oben) */
.wl-nav-menu .sub-menu > .menu-item > .sub-menu {
  flex-basis: 100%;
}

/* L2 Links (mobile) */
.wl-nav-menu .sub-menu > .menu-item > a {
  flex: 1;
  display: block;
  padding: var(--space-2) var(--space-4) var(--space-2) calc(var(--space-4) + var(--space-4));
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: var(--weight-medium);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-fast);
}
.wl-nav-menu .sub-menu > .menu-item > a:hover { color: var(--color-primary); }

/* L3 Links (mobile, tiefer eingerückt) */
.wl-nav-menu .sub-menu .sub-menu > .menu-item > a {
  padding-inline-start: calc(var(--space-4) + var(--space-8));
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
}

/* ── Desktop: Mega-Panel (L1 Sub-Menu) ──
   Vollständig CSS-gesteuert (kein JavaScript): Sichtbarkeit läuft rein über
   :hover/:focus-within, ohne Verzögerung – ein Wechsel zu einem anderen
   Menüpunkt funktioniert direkt, wie man es von einer Navigation erwartet
   (kein "erst verlassen, dann neu öffnen").

   Das Panel ist über die volle Kopfzeilenbreite verankert (relativ zu
   .wl-site-header, das per position:sticky bereits als Containing Block
   wirkt – .wl-primary-nav bleibt bewusst unpositioniert) – dadurch beginnt
   jedes Panel bündig unterhalb der kompletten Kopfzeile (inkl. Logo) und
   erstreckt sich über die volle Fensterbreite, nicht nur über die Nav-Box.

   Spalten-Layout bewusst mit Flexbox (flex-wrap) statt CSS-Grid auto-fit:
   auto-fit + minmax kombiniert mit einer prozentualen Breite führt in
   manchen Browsern zu Fehlberechnungen, bei denen einzelne Spalten über den
   Panel-Rand hinaus gerendert werden. Flexbox mit expliziter
   Basis-/Maximalbreite pro Spalte verhält sich vorhersagbar und bricht
   zuverlässig um, wenn der Platz nicht reicht.

   Lücken-Brücke: Jeder L1-Menüpunkt bekommt eine unsichtbare Fläche über die
   volle Nav-Breite auf Höhe der Nav-Zeile, aktiv nur solange der eigene
   Punkt gehovert/fokussiert ist. Sie liegt UNTER den echten Links (z-index 1
   vs. 2 bei den Links oben) – ein Nachbarlink bleibt dadurch jederzeit sofort
   hoverbar (direktes Umschalten funktioniert), nur die LEEREN Zwischenräume
   in der Zeile werden abgefangen, damit ein leicht ungerader Mausweg beim
   Ansteuern von Panel-Inhalten dort nicht ins Leere greift und das Menü
   grundlos schließt. */
@media (min-width: 768px) {
  .wl-nav-menu > .menu-item-has-children::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    z-index: 1;
    pointer-events: none;
  }
  .wl-nav-menu > .menu-item-has-children:hover::before,
  .wl-nav-menu > .menu-item-has-children:focus-within::before {
    pointer-events: auto;
  }

  /* Panel ist immer im Layout, Sichtbarkeit via visibility/opacity */
  .wl-nav-menu > .menu-item-has-children > .sub-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    /* Gleiche Breite/Zentrierung wie .wl-container – Panel-Kanten fluchten
       mit Logo und Seiteninhalt, statt kantenbündig am Fensterrand zu kleben */
    max-width: var(--container-xl);
    margin-inline: auto;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-primary);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: 0 16px 48px rgba(26,26,24,.13), 0 4px 12px rgba(26,26,24,.08);
    padding-block: var(--space-6);
    padding-inline: var(--space-8);
    z-index: var(--z-dropdown);
    column-gap: var(--space-6);
    row-gap: var(--space-4);
    overflow: hidden;

    /* Einflug-Animation */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition:
      opacity 160ms ease,
      transform 160ms ease,
      visibility 0ms linear 160ms;
  }

  /* Panel einblenden: Hover oder Tastatur-Fokus – rein CSS, keine Verzögerung */
  .wl-nav-menu > .menu-item-has-children:hover > .sub-menu,
  .wl-nav-menu > .menu-item-has-children:focus-within > .sub-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition:
      opacity 160ms ease,
      transform 160ms ease,
      visibility 0ms linear 0ms;
  }

  /* L2 Items im Panel: Spalten. flex-basis mit Ober-/Untergrenze statt fixer
     Breite – wächst bei viel Platz leicht mit, bricht bei wenig Platz sauber
     in eine neue Zeile um (kein Überlauf über den Panel-Rand hinaus). */
  .wl-nav-menu > .menu-item-has-children > .sub-menu > .menu-item {
    display: block;
    flex: 1 1 180px;
    max-width: 260px;
    min-width: 0;
    border-bottom: none;
    position: static;
  }

  /* L2 Links: Spalten-Überschriften */
  .wl-nav-menu > .menu-item-has-children > .sub-menu > .menu-item > a {
    flex: none;
    display: block;
    padding: 0 0 var(--space-2) 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-heading);
    text-decoration: none;
    border-bottom: 1px solid var(--color-border-light);
    margin-bottom: var(--space-3);
    background: none;
    border-radius: 0;
    white-space: normal;
    transition: color var(--transition-fast);
  }
  .wl-nav-menu > .menu-item-has-children > .sub-menu > .menu-item > a::after {
    display: none;
  }
  .wl-nav-menu > .menu-item-has-children > .sub-menu > .menu-item > a:hover {
    color: var(--color-primary);
    background: none;
  }

  /* L2 ohne Kinder: einfacher Link, bündig mit Spalten-Überschriften */
  .wl-nav-menu > .menu-item-has-children > .sub-menu > .menu-item:not(.menu-item-has-children) > a {
    border-bottom: none;
    margin-bottom: 0;
    padding: 0 0 var(--space-2) 0;
    font-weight: var(--weight-regular);
    color: var(--color-text);
  }

  /* L2 Sub-Menu (= L3 Liste) im Panel: kein eigener Hover-Trigger nötig, folgt
     einfach dem Sichtbarkeits-/Interaktionszustand des L1-Panels (display,
     visibility, opacity, pointer-events NICHT selbst überschreiben!). Panels
     überlappen sich jetzt vollständig (volle Nav-Breite) – ein eigenes
     visibility:visible/pointer-events:auto hier würde sonst die L3-Liste
     eines GESCHLOSSENEN Nachbar-Panels unsichtbar, aber weiterhin klick-/
     hoverbar machen (visibility lässt sich von Kindern überschreiben,
     pointer-events wird nicht durch die 0-Opacity des Elternteils blockiert)
     – und genau das hat den wiederkehrenden Bug verursacht. */
  .wl-nav-menu > .menu-item-has-children > .sub-menu > .menu-item > .sub-menu {
    display: block;
    position: static;
    transform: none;
    min-width: 0;
    max-width: none;
    width: auto;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    transition: none;
  }

  /* L3 Items */
  .wl-nav-menu > .menu-item-has-children > .sub-menu > .menu-item > .sub-menu > .menu-item {
    display: block;
    border-bottom: none;
    position: static;
  }

  /* L3 Links */
  .wl-nav-menu > .menu-item-has-children > .sub-menu > .menu-item > .sub-menu > .menu-item > a {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding: calc(var(--space-1) + 1px) 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    color: var(--color-text-muted);
    text-decoration: none;
    background: none;
    border-radius: 0;
    white-space: normal;
    transition: color var(--transition-fast);
  }
  .wl-nav-menu > .menu-item-has-children > .sub-menu > .menu-item > .sub-menu > .menu-item > a::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-meadow-light);
    flex-shrink: 0;
    margin-top: 4px;
  }
  .wl-nav-menu > .menu-item-has-children > .sub-menu > .menu-item > .sub-menu > .menu-item > a:hover {
    color: var(--color-primary);
    background: none;
  }

  /* "Alle anzeigen"-Link (JS-injiziert) */
  .wl-nav-menu .wl-all-link > a {
    color: var(--color-primary);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    padding: var(--space-2) 0 0 0;
    margin-top: var(--space-1);
    opacity: 0.85;
    border-top: 1px solid var(--color-border-light);
    display: inline-block;
    transition: opacity var(--transition-fast);
  }
  .wl-nav-menu .wl-all-link > a:hover { opacity: 1; }
  .wl-nav-menu .wl-all-link > a::before { display: none; }

  /* "Alle Themen in …"-Link je Ratgeber-Kategorie (server-seitig erzeugt)
     Selektor bewusst so spezifisch wie die L3-Link-Regel oben (gleiche
     Verschachtelungstiefe), sonst gewinnt deren font-size/font-weight. */
  .wl-nav-menu > .menu-item-has-children > .sub-menu > .menu-item > .sub-menu > .wl-view-all-link > a {
    font-weight: var(--weight-bold, 700);
    font-size: var(--text-xs);
  }
  .wl-nav-menu .wl-view-all-link > a::before { display: none; }
}
@media (min-width: 1280px) {
  /* Innenabstand des Panels folgt .wl-container auch am größten Breakpoint */
  .wl-nav-menu > .menu-item-has-children > .sub-menu {
    padding-inline: var(--space-12);
  }
}

/* ── Site Footer ── */
.wl-site-footer {
  background: var(--color-meadow-deep);
  color: var(--color-neutral-light);
  padding-block: var(--space-12) var(--space-8);
  margin-top: var(--space-16);
}
.wl-site-footer__inner {
  display: grid;
  gap: var(--space-8);
}
@media (min-width: 768px) {
  .wl-site-footer__inner { grid-template-columns: 1fr 2fr; }
}
.wl-site-footer__brand .wl-logo-text {
  font-size: var(--text-2xl);
  letter-spacing: 0.08em;
}
.wl-site-footer__tagline {
  font-size: var(--text-sm);
  color: var(--color-meadow-pale);
  margin-block-start: var(--space-2);
  letter-spacing: 0.02em;
}
.wl-site-footer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.wl-footer-menu,
.wl-legal-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}
.wl-footer-menu a,
.wl-legal-menu a {
  font-size: var(--text-sm);
  color: var(--color-meadow-pale);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.wl-footer-menu a:hover,
.wl-legal-menu a:hover { color: var(--color-white); }
.wl-legal-menu a { color: var(--color-wool-warm); }
.wl-site-footer__bottom {
  grid-column: 1 / -1;
  padding-block-start: var(--space-6);
  border-top: 1px solid color-mix(in srgb, var(--color-meadow-mid) 40%, transparent);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-8);
  align-items: center;
}
.wl-site-footer__copyright,
.wl-site-footer__affiliate-note {
  font-size: var(--text-xs);
  color: var(--color-meadow-pale);
  margin: 0;
}
.wl-site-footer__copyright a { color: inherit; }
.wl-site-footer__affiliate-note a { color: var(--color-wool-warm); }

/* ── Archive Header ── */
.wl-archive-header {
  margin-block-end: var(--space-10);
}
.wl-archive-header__title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  color: var(--color-heading);
  margin-block-end: var(--space-3);
}
.wl-archive-header__description {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 60ch;
}

/* ── Section Headers ── */
.wl-section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block-end: var(--space-8);
}
.wl-section__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--color-heading);
  margin: 0;
}
.wl-section--alt { background: var(--color-surface-alt); }

/* ── Narrow Container ── */
.wl-container--narrow { max-width: var(--container-md); }

/* ── Layout: Content + Sidebar ── */
.wl-layout-content-sidebar {
  display: grid;
  gap: var(--space-8);
}
@media (min-width: 1024px) {
  .wl-layout-content-sidebar { grid-template-columns: 1fr 320px; }
}
.wl-layout-content-sidebar__sidebar { display: flex; flex-direction: column; gap: var(--space-6); }

/* ── Widget ── */
.wl-widget {
  background: var(--color-surface-alt);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.wl-widget__title {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  margin-block-end: var(--space-4);
  color: var(--color-heading);
}

/* ── Glossar-Index (Archiv) ── */
.wl-glossar-az {
  margin-block-end: var(--space-8);
}
.wl-glossar-az ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.wl-glossar-az a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--color-surface-alt);
  color: var(--color-text);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.wl-glossar-az a:hover {
  background: var(--color-primary);
  color: var(--color-white);
}
.wl-glossar-list { margin: 0; padding: 0; }
.wl-glossar-list__letter {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-primary);
  margin-block: var(--space-6) var(--space-2);
  scroll-margin-top: 80px;
}
.wl-glossar-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.wl-glossar-list__link {
  color: var(--color-text);
  text-decoration: none;
  font-weight: var(--weight-medium);
  flex: 1;
  transition: color var(--transition-fast);
}
.wl-glossar-list__link:hover { color: var(--color-primary); }

/* ── Glossar-Teaser (Startseite) ── */
.wl-glossar-teaser {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.wl-glossar-teaser__item {
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  color: var(--color-text);
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.wl-glossar-teaser__item:hover {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

/* ── Taxonomy Filter ── */
.wl-taxonomy-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-end: var(--space-8);
}
.wl-taxonomy-filter .wl-btn.is-active {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

/* ── No Results ── */
.wl-no-results {
  text-align: center;
  padding-block: var(--space-16);
  color: var(--color-text-muted);
  font-size: var(--text-lg);
}

/* ── Card Footer ── */
.wl-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
  padding-block-start: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.wl-card__meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.wl-card__image-link img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

/* ── Breadcrumb-Navigation ── */
.wl-breadcrumbs {
  margin-block: var(--space-4) var(--space-2);
}
.wl-breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.wl-breadcrumbs__item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.wl-breadcrumbs__item a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.wl-breadcrumbs__item a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}
.wl-breadcrumbs__item span[aria-current="page"] {
  color: var(--color-text);
  font-weight: var(--weight-medium);
}
.wl-breadcrumbs__sep {
  color: var(--color-border);
}

/* ── "Weiterlesen"-Box ── */
.wl-related {
  margin-block-start: var(--space-10);
  padding-block-start: var(--space-8);
  border-top: 1px solid var(--color-border);
}
.wl-related__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-heading);
  margin-block-end: var(--space-4);
}
.wl-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}
.wl-related__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.wl-related__item:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
}
.wl-related__image {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.wl-related__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wl-related__item-title {
  padding: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}