/*
Theme Name: Waisenhunde Child
Template: hello-elementor
Version: 1.0
*/

/* --- Vereinsfarben (Tokens) --- */
:root{
  --wh-weiss: #F4F4F4;
  --wh-lila:  #8C3A76;
  --wh-beige: #BDA392;

  --wh-lila-hover: #733061;
  --wh-focus: rgba(140, 58, 118, 0.35);

  /* lines / surfaces */
  --wh-line: rgba(0,0,0,.10);
  --wh-outline: rgba(0,0,0,.08);
}
/* =========================================================
   Global Font (Single Source of Truth) - Inter (local)
   ========================================================= */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./assets/fonts/InterVariable.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("./assets/fonts/InterVariable-Italic.woff2") format("woff2");
}

/* Enforce sitewide font without touching colors */
html, body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}


/* =========================================================
   Typo + Links (nur im Hund-Profil)
   ========================================================= */

.wh-single{
  font-size: 15px;
  line-height: 1.55;
  color: rgba(0,0,0,.82);
}

.wh-single .wh-tabpanes,
.wh-single .wh-kontakt-body{
  font-size: 15px;
  line-height: 1.55;
}

.wh-single a,
.wh-single a:visited,
.wh-single a:active{
  color: var(--wh-lila) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wh-single a:hover,
.wh-single a:focus{
  color: var(--wh-lila-hover) !important;
}
.wh-single a:focus-visible{
  outline: 3px solid var(--wh-focus);
  outline-offset: 2px;
}

/* --- Global mobile overflow guard (prevents left/right swipe) --- */
html, body{
  max-width: 100%;
  overflow-x: clip;
}
@supports not (overflow-x: clip){
  html, body{ overflow-x: hidden; }
}

/* Make sure media never exceeds container */
img, video, iframe{
  max-width: 100%;
  height: auto;
}

/* --- Layout --- */
.wh-container{
  max-width:1200px;
  margin:0 auto;
  padding:32px 16px;
  box-sizing:border-box;
}

.wh-title{
  margin:0 0 18px;
  font-size:46px;
  line-height:1.1;
  overflow-wrap:anywhere;
}
@media (max-width: 600px){
  .wh-title{ font-size:32px; }
}

.wh-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:28px;
  align-items:start;
  min-width: 0;
}
.wh-media,
.wh-facts{
  min-width: 0;
}
@media (max-width: 1024px){
  .wh-grid{ grid-template-columns:1fr; }
}

/* --- Media (old thumb, harmless if unused now) --- */
.wh-thumb img{
  width:100%;
  height:auto;
  border-radius:16px;
  display:block;
}

/* --- Cards (premium look) --- */
.wh-card{
  background: #fff;
  border-radius:18px;
  overflow:hidden;

  box-shadow:
    0 18px 45px rgba(0,0,0,.14),
    0 3px 10px rgba(0,0,0,.06);
  border: 1px solid var(--wh-outline);
}

/* =========================================================
   STARTSEITE: Elementor Buttons ohne Unterstreichung
   ========================================================= */
.elementor a.elementor-button,
.elementor a.elementor-button:visited,
.elementor a.elementor-button:hover,
.elementor a.elementor-button:focus{
  text-decoration: none !important;
}
.elementor a.elementor-button .elementor-button-text{
  text-decoration: none !important;
}

/* =========================================================
   Media Card Slider (PRO)
   ========================================================= */

.wh-card--media{
  position: relative;
  overflow: hidden;
}

/* Header oben in der Media-Card */
.wh-media-head{
  display:flex;
  align-items:center;
  justify-content:space-between;

  background: linear-gradient(180deg, rgba(189,163,146,.70), rgba(189,163,146,.35));
  padding: 14px 14px 12px;

  border-bottom: 1px solid rgba(0,0,0,.08);
}

.wh-media-title{
  font-size: 18px;
  line-height: 1.2;
  color: var(--wh-lila);
  letter-spacing: .2px;
  font-weight: 800;
}

/* Header-Buttons aus (wir nutzen Overlay) */
.wh-media-nav{
  display:none;
}

/* Slider: horizontal + snap */
.wh-slider{
  display:flex;
  gap:14px;

  overflow-x:auto;
  overflow-y:hidden;

  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;

  background: #fff;

  scrollbar-width: none;
  -ms-overflow-style: none;
}
.wh-slider::-webkit-scrollbar{
  display:none;
}

.wh-slide{
  flex: 0 0 100%;
  scroll-snap-align: start;
  position: relative;
  background: #fff;
  overflow: hidden;
}

/* Default: cover (Premium-Look) */
.wh-slide img{
  width:100%;
  height: clamp(320px, 52vh, 560px);
  object-fit: cover;
  object-position: center 25%;
  display:block;
  position: relative;
  z-index: 2;
}

/* Fallback wenn keine Bilder */
.wh-media-empty{
  padding: 16px;
}

/* Videos innerhalb derselben Card */
.wh-media-videos{
  padding: 14px 14px 16px;
  border-top: 1px solid rgba(0,0,0,.08);
  background: #fff;
}

.wh-media-subtitle{
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--wh-lila);
  margin: 0 0 10px;
}

.wh-video-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.wh-video-item{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  overflow:hidden;
  background: rgba(244,244,244,.55);
  padding: 10px;
}

.wh-video-item video{
  width:100%;
  height:auto;
  display:block;
  border-radius: 10px;
}

/* Counter (1 / N) */
.wh-media-count{
  position:absolute;
  right: 14px;
  bottom: 46px;
  z-index: 11;

  padding: 6px 10px;
  border-radius: 999px;

  background: rgba(0,0,0,.45);
  color: #fff;

  font-weight: 800;
  font-size: 13px;
  letter-spacing: .2px;

  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.25);
}

/* Dots */
.wh-media-dots{
  position:absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 11;

  display:flex;
  gap: 8px;

  padding: 8px 10px;
  border-radius: 999px;

  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.20);
  backdrop-filter: blur(6px);
}

.wh-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.45);
}

.wh-dot.is-active{
  background: #fff;
  transform: scale(1.2);
}


/* =========================================================
   Overlay Controls (Desktop only) + Pfeil-Fix
   ========================================================= */

/* Grundregel: Overlay-Pfeile standardmäßig aus */
.wh-card--media .wh-media-btn--prev,
.wh-card--media .wh-media-btn--next{
  display:none;
}

/* Touch Geräte: Pfeile aus (Swipe) */
@media (hover: none), (pointer: coarse){
  .wh-card--media .wh-media-btn--prev,
  .wh-card--media .wh-media-btn--next{
    display:none !important;
  }
}

/* Desktop: Pfeile an + hochwertiger Look */
@media (hover: hover) and (pointer: fine){
  .wh-card--media .wh-media-btn--prev,
  .wh-card--media .wh-media-btn--next{
    display:flex !important;

    position:absolute;
    top: calc(50% + 18px);
    transform: translateY(-50%);
    z-index: 10;

    width: 52px;
    height: 52px;
    border-radius: 999px;

    border: 1px solid rgba(255,255,255,.55);
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), rgba(255,255,255,0) 55%),
                rgba(140, 58, 118, .62);

    box-shadow:
      0 18px 40px rgba(0,0,0,.18),
      0 2px 10px rgba(0,0,0,.12);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    cursor:pointer;

    /* Zentrierung wirklich fix (Flexbox) */
    align-items:center;
    justify-content:center;

    opacity: 0;
    pointer-events: none;

    transition:
      opacity .15s ease,
      transform .15s ease,
      background-color .15s ease,
      box-shadow .15s ease;
  }

  .wh-card--media:hover .wh-media-btn--prev,
  .wh-card--media:hover .wh-media-btn--next{
    opacity: .95;
    pointer-events: auto;
  }

  .wh-card--media .wh-media-btn--prev:hover,
  .wh-card--media .wh-media-btn--next:hover{
    transform: translateY(-50%) scale(1.06);
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.30), rgba(255,255,255,0) 55%),
                rgba(140, 58, 118, .80);
    box-shadow:
      0 22px 55px rgba(0,0,0,.22),
      0 6px 16px rgba(0,0,0,.16);
  }

  .wh-card--media .wh-media-btn--prev:active,
  .wh-card--media .wh-media-btn--next:active{
    transform: translateY(-50%) scale(.98);
  }

  .wh-card--media .wh-media-btn--prev{ left: 14px; }
  .wh-card--media .wh-media-btn--next{ right: 14px; }
}

/* Kein Text */
.wh-card--media .wh-media-btn--prev,
.wh-card--media .wh-media-btn--next{
  font-size: 0;
  line-height: 0;
}

/* Chevron als CSS-Shape – optisch zentriert */
.wh-card--media .wh-media-btn--prev::before,
.wh-card--media .wh-media-btn--next::before{
  content:"";
  display:block;
  width: 12px;
  height: 12px;
  border-right: 3px solid rgba(255,255,255,.98);
  border-bottom: 3px solid rgba(255,255,255,.98);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

/* Richtung + kleine optische Korrektur */
.wh-card--media .wh-media-btn--prev::before{
  transform: rotate(135deg) translateX(1px);
}
.wh-card--media .wh-media-btn--next::before{
  transform: rotate(-45deg) translateX(-1px);
}

/* =========================================================
   Tabs (Header-Style wie Kontakt)
   ========================================================= */

.wh-tabs{
  display:grid;
  grid-template-columns: 1fr 1.15fr 1.45fr 0.85fr;

  background: linear-gradient(180deg, rgba(189,163,146,.70), rgba(189,163,146,.35));

  border-top-left-radius:18px;
  border-top-right-radius:18px;
  overflow:hidden;

  border-bottom: 1px solid rgba(0,0,0,.08);
}

@media (max-width: 1024px){
  .wh-tabs{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

.wh-tab{
  appearance: none;
  -webkit-appearance: none;

  display:flex;
  align-items:center;
  justify-content:center;

  width:100%;
  height:100%;
  min-height: 48px;

  box-sizing: border-box;

  border:0;
  margin:0;
  background: transparent;

  padding: 14px 10px;

  font-weight: 800;
  font-size: 15px;
  line-height: 1;
  letter-spacing: .2px;

  color: var(--wh-lila);
  cursor:pointer;

  white-space: nowrap;
  word-break: keep-all;
  hyphens: none;

  outline: none;
  box-shadow: none;
  transform: none;

  transition: background-color .15s ease, color .15s ease;
}

.wh-tab:hover{
  background: rgba(244,244,244,.16);
}

.wh-tab.is-active{
  background: var(--wh-lila);
  color: #fff;

  border: 0;
  outline: 0;
  transform: none;
  box-shadow: inset 0 0 0 0 transparent;
}

.wh-tab:focus-visible{
  outline: 2px solid transparent;
  outline-offset: 0;
  box-shadow: inset 0 0 0 3px var(--wh-focus);
}

@media (max-width:480px){
  .wh-tab{
    padding: 12px 8px;
    font-size: 13px;
    min-height: 44px;
  }
}
@media (max-width:360px){
  .wh-tab{ font-size: 12px; }
}

.wh-tabpanes{
  padding:18px 18px 20px;
  background: #fff;
}
@media (max-width: 480px){
  .wh-tabpanes{ padding:16px 14px 18px; }
}

.wh-pane{ display:none; }
.wh-pane.is-active{ display:block; }

.wh-list{
  margin: 10px 0 0;
  padding-left: 18px;
}
.wh-list li{
  overflow-wrap:anywhere;
  margin: 6px 0;
}

/* =========================================================
   Kontaktbox (starker Card-Look + Akzent)
   ========================================================= */

.wh-card--kontakt{
  margin-top: 18px;

  background: #fff;
  border-radius:18px;
  overflow:hidden;

  box-shadow:
    0 18px 45px rgba(0,0,0,.14),
    0 3px 10px rgba(0,0,0,.06);
  border: 1px solid var(--wh-outline);

  position: relative;
}

.wh-card--kontakt::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width: 8px;
  background: var(--wh-lila);
}

.wh-kontakt-head{
  background: linear-gradient(180deg, rgba(189,163,146,.70), rgba(189,163,146,.35));
  padding: 16px 16px 14px 18px;
  padding-left: 22px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.wh-kontakt-title{
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
  color: var(--wh-lila);
  letter-spacing: .2px;
}

.wh-kontakt-sub{
  margin: 6px 0 0;
  font-size: 14px;
  color: rgba(0,0,0,.72);
}

.wh-kontakt-body{
  padding: 14px 16px 16px 22px;
}

.wh-kontakt-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.wh-kontakt-list li{
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 10px;
  align-items: baseline;

  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  background: rgba(244,244,244,.55);
}

.wh-kontakt-list strong{
  color: rgba(0,0,0,.78);
}

.wh-kontakt-link{
  color: var(--wh-lila) !important;
  text-decoration: none;
  font-weight: 700;
}
.wh-kontakt-link:hover,
.wh-kontakt-link:focus{
  color: var(--wh-lila-hover) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 520px){
  .wh-kontakt-list li{
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

.wh-kontakt-form{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(0,0,0,.18);
}

.wh-card--content{
  margin-top:24px;
  padding:18px;
}

/* =========================================================
   Auto-Fit + PREMIUM Upgrade (Blur Background)
   ========================================================= */

.wh-slide.is-contain{
  background: #fff;
}

/* Blur backdrop (nur wenn JS --wh-bg setzt) */
.wh-slide.is-contain::before{
  content:"";
  position:absolute;
  inset:-22px;
  z-index: 1;

  background-image: var(--wh-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  filter: blur(18px) saturate(1.15);
  transform: scale(1.12);

  opacity: .85;
}

/* Darken/soften overlay für bessere Lesbarkeit/Look */
.wh-slide.is-contain::after{
  content:"";
  position:absolute;
  inset:0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.55));
}

/* Vorderes Bild bleibt scharf und komplett sichtbar */
.wh-slide.is-contain img{
  object-fit: contain;
  object-position: center;
  z-index: 2;
}

/* Optional: leichtes “Card”-Feeling fürs Vorderbild bei contain */
.wh-slide.is-contain img{
  filter: drop-shadow(0 18px 45px rgba(0,0,0,.22));
}

/* Archive Hund - Grid, Cards, Filter */
.wh-filter {
    background: #fff;
    border-radius: 18px;
    padding: 20px;
    margin: 0 0 32px;
    box-shadow: 0 18px 45px rgba(0,0,0,.14), 0 3px 10px rgba(0,0,0,.06);
    border: 1px solid var(--wh-outline);
}

.wh-filter-form {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
}

.wh-filter label {
    display: flex;
    flex-direction: column;
    font-weight: 600;
    color: var(--wh-lila);
    font-size: 15px;
}

.wh-filter select {
    margin-top: 6px;
    padding: 10px 12px;
    border: 1px solid var(--wh-outline);
    border-radius: 12px;
    background: rgba(244,244,244,.55);
    color: rgba(0,0,0,.8);
}

.wh-filter button {
    padding: 12px 24px;
    background: var(--wh-lila);
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease;
}

.wh-filter button:hover {
    background: var(--wh-lila-hover);
}

.wh-filter-reset {
    color: var(--wh-lila);
    text-decoration: none;
    font-weight: 600;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid var(--wh-outline);
    background: rgba(244,244,244,.55);
    transition: all .15s ease;
}

.wh-filter-reset:hover {
    background: var(--wh-lila);
    color: white;
}

.wh-hunde-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 28px;
    margin: 0 0 40px;
}

.wh-hund-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(0,0,0,.14), 0 3px 10px rgba(0,0,0,.06);
    border: 1px solid var(--wh-outline);
    transition: transform .15s ease, box-shadow .15s ease;
}

.wh-hund-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 60px rgba(0,0,0,.20), 0 8px 20px rgba(0,0,0,.10);
}

.wh-hund-thumb {
    display: block;
    width: 100%;
    height: 280px;
    overflow: hidden;
}

.wh-hund-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.wh-hund-card:hover .wh-hund-img {
    transform: scale(1.05);
}

.wh-hund-info {
    padding: 20px;
}

.wh-hund-name {
    margin: 0 0 12px;
    font-size: 20px;
    line-height: 1.3;
}

.wh-hund-name a {
    color: rgba(0,0,0,.9);
    text-decoration: none;
}

.wh-hund-name a:hover {
    color: var(--wh-lila);
}

.wh-hund-rasse {
    font-size: 16px;
    font-weight: 700;
    color: var(--wh-lila);
    margin: 0 0 8px;
}

.wh-hund-meta {
    display: flex;
    gap: 12px;
    font-size: 14px;
    color: rgba(0,0,0,.7);
}

.wh-hund-meta span {
    background: rgba(140,58,118,.08);
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 600;
}

/* Pagination anpassen */
.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 40px 0;
}

.pagination a,
.pagination .current {
    padding: 12px 20px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    transition: all .15s ease;
}

.pagination a {
    color: var(--wh-lila);
    border: 1px solid var(--wh-outline);
    background: rgba(244,244,244,.55);
}

.pagination a:hover {
    background: var(--wh-lila);
    color: white;
}

.pagination .current {
    background: var(--wh-lila);
    color: white;
    border: 1px solid var(--wh-lila);
}

/* Responsive */
@media (max-width: 1024px) {
    .wh-filter-form {
        flex-direction: column;
        align-items: stretch;
    }
    
    .wh-filter label {
        flex-direction: row;
        justify-content: space-between;
    }
    
    .wh-hunde-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 20px;
    }
}

.wh-status-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.wh-badge { padding: 0.4rem 0.75rem; border-radius: 20px; font-size: 0.85rem; font-weight: 600; }
.wh-badge-zuhause-gesucht { background: #e3f2fd; color: #1976d2; }
.wh-badge-pflegestelle-gesucht { background: #fff3e0; color: #f57c00; }
.wh-badge-zuhause-gefunden { background: #e8f5e8; color: #388e3c; opacity: 0.8; }

.wh-slider-wrap{ position: relative; }
.wh-slider-wrap .wh-media-count,
.wh-slider-wrap .wh-media-dots{ z-index: 12; }

/* =========================================================
   Video Slider (wie Bilder) - perfekt & stabil
   ========================================================= */

/* Wir überschreiben die alte Grid-Optik NICHT global, sondern nur wenn der neue Slider existiert */
.wh-vslider-wrap{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(244,244,244,.55);
  border: 1px solid rgba(0,0,0,.08);
}

/* Horizontaler Slider + Snap (Swipe auf Mobile/Tablet) */
.wh-vslider{
  display:flex;
  gap:14px;

  overflow-x:auto;
  overflow-y:hidden;

  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;
  -ms-overflow-style: none;
}
.wh-vslider::-webkit-scrollbar{ display:none; }

.wh-vslide{
  flex: 0 0 100%;
  scroll-snap-align: start;
  position: relative;
  padding: 10px;
  box-sizing: border-box;
}

/* Video-Player: immer 1 pro View, premium Größe */
.wh-vslide video{
  width:100%;
  display:block;
  border-radius: 12px;
  background: #000;

  /* ähnlich zu Bildhöhe, aber etwas niedriger (Videos wirken sonst riesig) */
  height: clamp(240px, 42vh, 420px);
  object-fit: contain;
}

/* Counter + Dots (wie Bild-Slider) */
.wh-vcount{
  position:absolute;
  right: 14px;
  bottom: 46px;
  z-index: 12;

  padding: 6px 10px;
  border-radius: 999px;

  background: rgba(0,0,0,.45);
  color: #fff;

  font-weight: 800;
  font-size: 13px;
  letter-spacing: .2px;

  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.25);
}

.wh-vdots{
  position:absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 12;

  display:flex;
  gap: 8px;

  padding: 8px 10px;
  border-radius: 999px;

  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.20);
  backdrop-filter: blur(6px);
}

.wh-vdot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.45);
}
.wh-vdot.is-active{
  background: #fff;
  transform: scale(1.2);
}

/* Default: Video-Pfeile aus */
.wh-vbtn{ display:none; }

/* Touch Geräte: Pfeile aus (Swipe) */
@media (hover: none), (pointer: coarse){
  .wh-vbtn{ display:none !important; }
}

/* Desktop: Pfeile an (optisch wie Bild-Pfeile) */
@media (hover: hover) and (pointer: fine){
  .wh-vbtn{
    display:flex !important;

    position:absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 12;

    width: 52px;
    height: 52px;
    border-radius: 999px;

    border: 1px solid rgba(255,255,255,.55);
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), rgba(255,255,255,0) 55%),
                rgba(140, 58, 118, .62);

    box-shadow:
      0 18px 40px rgba(0,0,0,.18),
      0 2px 10px rgba(0,0,0,.12);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    cursor:pointer;

    align-items:center;
    justify-content:center;

    opacity: 0;
    pointer-events: none;

    transition:
      opacity .15s ease,
      transform .15s ease,
      background-color .15s ease,
      box-shadow .15s ease;
  }

  .wh-vslider-wrap:hover .wh-vbtn{
    opacity: .95;
    pointer-events: auto;
  }

  .wh-vbtn:hover{
    transform: translateY(-50%) scale(1.06);
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.30), rgba(255,255,255,0) 55%),
                rgba(140, 58, 118, .80);
    box-shadow:
      0 22px 55px rgba(0,0,0,.22),
      0 6px 16px rgba(0,0,0,.16);
  }

  .wh-vbtn:active{
    transform: translateY(-50%) scale(.98);
  }

  .wh-vbtn--prev{ left: 14px; }
  .wh-vbtn--next{ right: 14px; }
}

/* Chevron wie bei Bild-Pfeilen */
.wh-vbtn{
  font-size: 0;
  line-height: 0;
}
.wh-vbtn::before{
  content:"";
  display:block;
  width: 12px;
  height: 12px;
  border-right: 3px solid rgba(255,255,255,.98);
  border-bottom: 3px solid rgba(255,255,255,.98);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
.wh-vbtn--prev::before{
  transform: rotate(135deg) translateX(1px);
}
.wh-vbtn--next::before{
  transform: rotate(-45deg) translateX(-1px);
}

/* Mobile: etwas kompakter */
@media (max-width: 520px){
  .wh-vslide{ padding: 8px; }
  .wh-vslide video{ height: clamp(200px, 38vh, 340px); }
}

/* Videos als eigene Card (gleiche Optik wie Galerie) */
.wh-card--videos{ margin-top: 18px; }
.wh-media-videos--card{ border-top: 0; }

/* Selbstauskunft (iFrame) – Premium Card Inhalt */
.wh-form-card{ margin-top: 18px; }

.wh-iframe-wrap{
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(244,244,244,.55);
}

/* Modern & stabil: aspect-ratio für responsive iframes */
.wh-iframe-wrap iframe{
  width: 100%;
  border: 0;
  display: block;
  aspect-ratio: 16 / 10;
  min-height: 560px;
}

@media (max-width: 520px){
  .wh-iframe-wrap iframe{
    aspect-ratio: 16 / 12;
    min-height: 520px;
  }
}

/* Desktop/Tablet/Mobile Umschaltung für Selbstauskunft */
.wh-desktop-only{ display:block; }
.wh-mobile-only{ display:none; }

@media (max-width: 1024px){
  .wh-desktop-only{ display:none !important; }
  .wh-mobile-only{ display:block !important; }
}

/* --- Patenhunde CTA-Card (im Grid wie normale Cards) --- */
.wh-paten-cta{
  border: 1px solid var(--wh-outline);
}

.wh-paten-cta .wh-hund-info{
  padding: 18px;
}

.wh-paten-cta .wh-hund-name{
  margin: 0 0 10px;
  color: var(--wh-lila);
}

.wh-paten-cta-text{
  color: rgba(0,0,0,.78);
  line-height: 1.55;
  margin: 0 0 14px;
}

.wh-paten-cta-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.wh-paten-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  border: 1px solid var(--wh-line);
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
}

.wh-paten-btn:active{
  transform: translateY(1px);
}

.wh-paten-btn-primary{
  background: var(--wh-lila);
  color: #fff !important;
  border-color: transparent;
}

.wh-paten-btn-primary:hover,
.wh-paten-btn-primary:focus{
  background: var(--wh-lila-hover);
}

.wh-paten-btn-secondary{
  background: #fff;
  color: var(--wh-lila) !important;
}

.wh-paten-btn-secondary:hover,
.wh-paten-btn-secondary:focus{
  background: rgba(140,58,118,.08);
}

/* Patenschaft: Buttons nicht strecken */
.wh-paten-cta-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.wh-paten-btn{
  display: inline-flex;
  width: auto;
  flex: 0 0 auto;
  align-self: flex-start;
}

/* Patenschaft: Abstand wie bei anderen Cards */
.wh-card--paten{
  margin-top: 18px; /* anpassbar: 16-22px */
}

/* Buttons: nicht strecken (fix für deinen "leeren" Button) */
.wh-paten-cta-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.wh-paten-btn{
  display:inline-flex;
  width:auto;
  flex:0 0 auto;
  align-self:flex-start;
}

/* Disabled Button (kommt bald) */
.wh-paten-btn-disabled{
  opacity: .75;
  cursor: not-allowed;
  user-select: none;
  pointer-events: none;
}

.wh-card--hilfe { margin-bottom: 18px; }
.wh-card--hilfe:last-child { margin-bottom: 0; }

.wh-hilfe-qr{
  display:block;
  max-width: 220px;
  width: 100%;
  height: auto;
  margin-top: 12px;
  border-radius: 12px;
}

.wh-paten-btn-disabled{
  opacity: .75;
  cursor: not-allowed;
  user-select: none;
  pointer-events: none;
}

/* =========================================================
   FINAL OVERRIDE: /deine-hilfe/ unify font-weight (no colors)
   Must be at end of file to win the cascade.
   ========================================================= */
.wh-page--hilfe .wh-help-card .wh-kontakt-body,
.wh-page--hilfe .wh-help-card .wh-kontakt-body p,
.wh-page--hilfe .wh-help-card .wh-kontakt-body li,
.wh-page--hilfe .wh-help-card .wh-kontakt-body a,
.wh-page--hilfe .wh-help-card .wh-kontakt-body strong {
  font-weight: 400 !important;
}



/* Optional: leichtes "Frosted" Overlay hinter Textbereich */
.wh-help-card:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,.88) 0%,
    rgba(255,255,255,.82) 55%,
    rgba(255,255,255,.55) 100%
  );
  z-index:2; /* unter Text, über Bild */
  pointer-events:none;
}

/* Positionen: mehr im Blick, weniger "hinter der Card versteckt" */
.wh-help-card.is-left .wh-accent{
  left:14px;
  top:14px;
  transform:rotate(-4deg);
}
.wh-help-card.is-right .wh-accent{
  right:14px;
  top:14px;
  transform:rotate(4deg);
}
.wh-help-card.is-bottom .wh-accent{
  right:14px;
  bottom:14px;
  transform:rotate(3deg);
}

/* Mobile */
@media (max-width: 900px){
  .wh-help-card .wh-accent{
    width:180px;
    height:180px;
    opacity:.55;
  }
}

/* =========================================================
   FIX 1: Runde Ecken wirklich überall (gegen Elementor Overrides)
   ========================================================= */

/* Falls Elementor Container/Widget-Wrapper eckig bleiben */
.wh-card,
.wh-hund-card,
.wh-filter,
.wh-card--kontakt,
.wh-card--media,
.wh-card--videos,
.wh-form-card{
  border-radius: 18px;
  overflow: hidden;
}

/* Bild-Wrapper in Cards ebenfalls rund + clippen */
.wh-hund-thumb,
.wh-thumb,
.wh-vslider-wrap,
.wh-iframe-wrap{
  border-radius: 14px;
  overflow: hidden;
}

/* =========================================================
   FIX 2 (optional): Reihenfolge NUR per CSS, falls du wirklich
   .wh-slide als direkte Children hast.
   =========================================================
   WICHTIG: Das ändert nur die *visuelle* Reihenfolge, nicht die DOM-
   Reihenfolge (Accessibility/Tab-Reihenfolge bleibt DOM-basiert). [web:337][web:338]
   Wenn du das willst, sag mir deine gewünschte Reihenfolge (z.B. 3-1-5-2-4),
   dann setze ich dir das exakt.
*/

/* Hilfe-Seite: stabile Layer + Grid */
.wh-help-grid{
  display: grid;
  gap: 18px;
}

/* Wichtig: damit :after und .wh-accent korrekt in der Card verankert sind */
.wh-help-card{
  position: relative;
  overflow: hidden;
}

/* Optional: falls Elementor/Theme irgendwo Radius überschreibt */
.wh-help-card,
.wh-card--hilfe{
  border-radius: 18px;
}
/* Hilfe-Kacheln: Basis */
.wh-help-card,
.elementor-widget-wrap .wh-help-card {
  position: relative;
  overflow: hidden;
}

/* Bild-Layer: immer hinter Content, aber sichtbar */
.wh-help-card .wh-card-media,
.wh-help-card .elementor-widget-image,
.wh-help-card img {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: min(42%, 320px);
  height: auto;
  max-height: 78%;
  object-fit: cover;

  /* Sichtbarkeit hoch */
  opacity: 1;
  filter: contrast(1.12) saturate(1.15) brightness(1.03);

  /* Optional: leichtes “Card-Feeling” */
  border-radius: 14px;
  box-shadow: 0 14px 32px rgba(0,0,0,.18);

  z-index: 1; /* Bild unter Text/Buttons */
  pointer-events: none;
}

/* Content immer darüber */
.wh-help-card .wh-card-content,
.wh-help-card .elementor-widget-container,
.wh-help-card .elementor-button-wrapper,
.wh-help-card a.elementor-button {
  position: relative;
  z-index: 3;
}

/* Platz schaffen, damit Text nicht ins Bild läuft */
.wh-help-card {
  padding-right: clamp(180px, 40%, 360px);
}

/* Mobile: Bild nach oben, volle Breite, damit nichts überlappt */
@media (max-width: 767px) {
  .wh-help-card {
    padding-right: 20px;
    padding-top: 190px;
  }

  .wh-help-card .wh-card-media,
  .wh-help-card .elementor-widget-image,
  .wh-help-card img {
    top: 18px;
    left: 18px;
    right: 18px;
    transform: none;
    width: auto;
    max-height: 160px;
    z-index: 1;
  }
}

/* =========================================================
   HILFE-SEITE (deine-hilfe): Bild rechts neben Text – OHNE Effekte
   Überschreibt alte absolute/opacity/overlay Regeln
   ========================================================= */

.wh-page--hilfe .wh-help-card{
  /* 2-Spalten Layout */
  display: grid;
  grid-template-columns: 1fr clamp(200px, 26vw, 320px);
  gap: 22px;
  align-items: center;

  position: relative;
  overflow: hidden;

  /* wichtig: kein künstlicher Platz per padding-right */
  padding-right: 0 !important;
  padding-top: 0 !important;
}

/* Overlay von vorher komplett deaktivieren */
.wh-page--hilfe .wh-help-card::after{
  content: none !important;
  display: none !important;
}

/* Das Akzentbild ist ein normales Element im Grid (nicht absolut) */
.wh-page--hilfe .wh-help-card > img.wh-accent{
  position: static !important;
  inset: auto !important;
  transform: none !important;

  grid-column: 2;
  grid-row: 1 / span 2;

  width: 100%;
  height: clamp(200px, 26vw, 320px);
  object-fit: cover;

  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;

  border-radius: 18px;
  box-shadow: none !important;

  pointer-events: none;
  user-select: none;
}

/* Text links */
.wh-page--hilfe .wh-help-card .wh-kontakt-head,
.wh-page--hilfe .wh-help-card .wh-kontakt-body{
  grid-column: 1;
  position: relative;
  z-index: 1;
}

/* Mobile: Bild oben, dann Text */
@media (max-width: 767px){
  .wh-page--hilfe .wh-help-card{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .wh-page--hilfe .wh-help-card > img.wh-accent{
    grid-column: 1;
    grid-row: 1;
    height: 210px;
  }

  .wh-page--hilfe .wh-help-card .wh-kontakt-head{ grid-row: 2; }
  .wh-page--hilfe .wh-help-card .wh-kontakt-body{ grid-row: 3; }
}

/* =========================================================
   HILFE-SEITE: Card sauber "abschließen" (Header über volle Breite)
   ========================================================= */

.wh-page--hilfe .wh-help-card{
  display: grid;
  grid-template-columns: 1fr clamp(220px, 26vw, 340px);
  grid-template-rows: auto 1fr; /* Header oben, Body nimmt Rest */
  gap: 0;                       /* wichtig: kein Spalt zwischen Head/Body */
  align-items: stretch;

  overflow: hidden;
  position: relative;
  padding: 0 !important;
}

/* Overlay von alten Regeln AUS */
.wh-page--hilfe .wh-help-card::after{
  content: none !important;
  display: none !important;
}

/* Header über beide Spalten */
.wh-page--hilfe .wh-help-card .wh-kontakt-head{
  grid-column: 1 / -1;
  grid-row: 1;
  margin: 0;
}

/* Body links, mit deinem Padding */
.wh-page--hilfe .wh-help-card .wh-kontakt-body{
  grid-column: 1;
  grid-row: 2;
  margin: 0;
}

/* Bild rechts: in Zeile 2, volle Höhe */
.wh-page--hilfe .wh-help-card > img.wh-accent{
  grid-column: 2;
  grid-row: 2;

  width: 100%;
  height: 100%;
  min-height: 260px;  /* damit kleine Textkarten nicht "zu flach" werden */
  object-fit: cover;

  position: static !important;
  transform: none !important;
  opacity: 1 !important;
  filter: none !important;

  border-radius: 0 !important;  /* Card clipped eh über overflow hidden */
  box-shadow: none !important;
  pointer-events: none;
  user-select: none;
}

/* Abstand innen: links Standard, rechts Bild bekommt etwas Luft */
.wh-page--hilfe .wh-help-card{
  border-radius: 18px;
}
.wh-page--hilfe .wh-help-card .wh-kontakt-body{
  padding-right: 22px;
}

/* Mobile: Bild oben, dann Head, dann Body (alles 1 Spalte) */
@media (max-width: 767px){
  .wh-page--hilfe .wh-help-card{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }

  .wh-page--hilfe .wh-help-card > img.wh-accent{
    grid-column: 1;
    grid-row: 1;
    height: 220px;
    min-height: 220px;
  }

  .wh-page--hilfe .wh-help-card .wh-kontakt-head{
    grid-column: 1;
    grid-row: 2;
  }

  .wh-page--hilfe .wh-help-card .wh-kontakt-body{
    grid-column: 1;
    grid-row: 3;
    padding-right: 16px;
  }
}

/* =========================================================
   HILFE-SEITE: Card-Look erzwingen + Bild zentrieren + runde Ecken
   ========================================================= */

.wh-page--hilfe .wh-help-card,
.wh-page--hilfe .wh-card--hilfe{
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 18px !important;

  /* Shadow am Element selbst erzwingen */
  box-shadow:
    0 18px 45px rgba(0,0,0,.14),
    0 3px 10px rgba(0,0,0,.06) !important;

  overflow: hidden !important;
}

/* Layout: Header volle Breite, darunter Body + Bild */
.wh-page--hilfe .wh-help-card{
  display: grid !important;
  grid-template-columns: 1fr clamp(220px, 26vw, 340px) !important;
  grid-template-rows: auto 1fr !important;
  gap: 0 !important;
  align-items: stretch !important;
  padding: 0 !important;
}

/* Alte Overlays/Experimente AUS */
.wh-page--hilfe .wh-help-card::before,
.wh-page--hilfe .wh-help-card::after{
  content: none !important;
  display: none !important;
}

/* Header über beide Spalten */
.wh-page--hilfe .wh-help-card .wh-kontakt-head{
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
}

/* Body links */
.wh-page--hilfe .wh-help-card .wh-kontakt-body{
  grid-column: 1 !important;
  grid-row: 2 !important;
}

/* Bild rechts: NICHT oben kleben -> zentrieren */
.wh-page--hilfe .wh-help-card > img.wh-accent{
  grid-column: 2 !important;
  grid-row: 2 !important;

  /* Zentrierung in der Grid-Zelle */
  align-self: center !important;
  justify-self: center !important; /* grid item horizontal zentrieren [web:388] */

  width: calc(100% - 28px) !important;   /* Luft zum Rand */
  height: clamp(220px, 22vw, 300px) !important;
  object-fit: cover !important;

  margin: 14px !important;

  /* echte runde Ecken am Bild */
  border-radius: 18px !important;

  opacity: 1 !important;
  filter: none !important;
  box-shadow: none !important;
  position: static !important;
  transform: none !important;
  pointer-events: none;
}

/* Mobile: Bild oben, dann Text */
@media (max-width: 767px){
  .wh-page--hilfe .wh-help-card{
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto !important;
  }

  .wh-page--hilfe .wh-help-card > img.wh-accent{
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: calc(100% - 28px) !important;
    height: 220px !important;
    margin: 14px !important;
  }

  .wh-page--hilfe .wh-help-card .wh-kontakt-head{ grid-row: 2 !important; }
  .wh-page--hilfe .wh-help-card .wh-kontakt-body{ grid-row: 3 !important; }
}

/* Hilfe-Seite: Fließtext-Links lila, Buttons unberührt */
.wh-page--hilfe .wh-kontakt-body p a,
.wh-page--hilfe .wh-kontakt-body li a{
  color: var(--wh-lila) !important;
  text-decoration: none !important;
}

.wh-page--hilfe .wh-kontakt-body p a:hover,
.wh-page--hilfe .wh-kontakt-body p a:focus,
.wh-page--hilfe .wh-kontakt-body li a:hover,
.wh-page--hilfe .wh-kontakt-body li a:focus{
  color: var(--wh-lila-hover) !important;
  text-decoration: none !important;
}

/* Buttons: Primär bleibt weiß, Sekundär bleibt lila */
.wh-page--hilfe a.wh-paten-btn.wh-paten-btn-primary,
.wh-page--hilfe a.wh-paten-btn.wh-paten-btn-primary:visited{
  color: #fff !important;
}

.wh-page--hilfe a.wh-paten-btn.wh-paten-btn-secondary,
.wh-page--hilfe a.wh-paten-btn.wh-paten-btn-secondary:visited{
  color: var(--wh-lila) !important;
}

/* single-hund: Hinweis-Box Abstand wie Kontakt-Card */
.wh-single .wh-card--hinweis{
  margin-top: 18px;
}
/* Formulare-Seite: Intro + Toggle */
.wh-page--formulare .wh-form-intro{
  padding: 18px;
}

.wh-page--formulare .wh-form-intro-grid{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  align-items: center;
}

@media (max-width: 900px){
  .wh-page--formulare .wh-form-intro-grid{
    grid-template-columns: 1fr;
  }
}

.wh-page--formulare .wh-form-logo{
  width: min(240px, 100%);
  height: auto;
  display: block;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--wh-outline);
  box-shadow: 0 18px 45px rgba(0,0,0,.10), 0 3px 10px rgba(0,0,0,.06);
}

.wh-page--formulare .wh-form-intro-logo-wrap{
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 900px){
  .wh-page--formulare .wh-form-intro-logo-wrap{
    justify-content: flex-start;
  }
}
/* Formulare: PDF/Download Card */
.wh-page--formulare .wh-form-doc{
  margin-top: 18px;
}

.wh-page--formulare .wh-form-doc-grid{
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
  align-items: start;
}

@media (max-width: 900px){
  .wh-page--formulare .wh-form-doc-grid{
    grid-template-columns: 1fr;
  }
}

.wh-page--formulare .wh-form-doc-thumb{
  display: block;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(244,244,244,.55);
  box-shadow: 0 14px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
}

.wh-page--formulare .wh-form-doc-thumb img{
  display: block;
  width: 100%;
  height: auto;
}

.wh-page--formulare .wh-form-doc-text p{
  color: rgba(0,0,0,.82);
  line-height: 1.55;
}

/* =========================================================
   Formulare: Intro-Card soll exakt wie andere Cards wirken
   (Header/Body Layout statt pauschalem padding)
   ========================================================= */

/* Das alte padding:18px auf der Intro-Card darf nicht greifen,
   sonst sieht der Header anders aus als bei der PDF-Card */
.wh-page--formulare .wh-form-intro{
  padding: 0; /* überschreibt die bestehende Regel */
}

/* Grid-Padding kommt jetzt über wh-kontakt-body.
   Sicherstellen, dass das Grid nicht "double padding" bekommt. */
.wh-page--formulare .wh-form-intro .wh-form-intro-grid{
  margin: 0;
}

/* Optional: falls irgendwo spacing komisch wirkt, stellen wir sicher,
   dass das Logo-Grid sauber in den Body passt */
.wh-page--formulare .wh-form-intro .wh-form-intro-logo-wrap{
  align-self: center;
}

/* =========================================================
   SPENDENAUFRUF – Layout (nur diese Seite)
   Voraussetzung: body hat .wh-page--spendenaufruf
   ========================================================= */

.wh-page--spendenaufruf .wh-donate-hero{
  overflow: hidden;
}

.wh-page--spendenaufruf .wh-donate-hero-grid{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  align-items: stretch;
}
@media (max-width: 900px){
  .wh-page--spendenaufruf .wh-donate-hero-grid{
    grid-template-columns: 1fr;
  }
}

.wh-page--spendenaufruf .wh-donate-hero-media{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--wh-outline);
  background: rgba(244,244,244,.55);
  box-shadow: 0 18px 45px rgba(0,0,0,.10), 0 3px 10px rgba(0,0,0,.06);
}

.wh-page--spendenaufruf .wh-donate-hero-media img{
  width: 100%;
  height: clamp(260px, 42vh, 520px);
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Galerie */
.wh-page--spendenaufruf .wh-donate-gallery{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 900px){
  .wh-page--spendenaufruf .wh-donate-gallery{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px){
  .wh-page--spendenaufruf .wh-donate-gallery{
    grid-template-columns: 1fr;
  }
}

.wh-page--spendenaufruf .wh-donate-gallery a,
.wh-page--spendenaufruf .wh-donate-gallery figure{
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(244,244,244,.55);
  box-shadow: 0 14px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
  display: block;
}

.wh-page--spendenaufruf .wh-donate-gallery img{
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}
@media (max-width: 520px){
  .wh-page--spendenaufruf .wh-donate-gallery img{
    height: 200px;
  }
}

/* Impact-Kacheln */
.wh-page--spendenaufruf .wh-impact-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 1024px){
  .wh-page--spendenaufruf .wh-impact-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px){
  .wh-page--spendenaufruf .wh-impact-grid{
    grid-template-columns: 1fr;
  }
}

.wh-page--spendenaufruf .wh-impact{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--wh-outline);
  background: #fff;
  box-shadow: 0 18px 45px rgba(0,0,0,.12), 0 3px 10px rgba(0,0,0,.06);
}

.wh-page--spendenaufruf .wh-impact-head{
  background: linear-gradient(180deg, rgba(189,163,146,.70), rgba(189,163,146,.35));
  padding: 14px 16px 12px 18px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.wh-page--spendenaufruf .wh-impact-amount{
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .2px;
  color: var(--wh-lila);
}

.wh-page--spendenaufruf .wh-impact-body{
  padding: 14px 16px 16px 18px;
  color: rgba(0,0,0,.82);
  line-height: 1.55;
}

.wh-page--spendenaufruf .wh-impact-actions{
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.wh-page--spendenaufruf .wh-impact-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 800;
  border: 1px solid rgba(0,0,0,.10);
  transition: background .15s ease, transform .05s ease;
}

.wh-page--spendenaufruf .wh-impact-btn-primary{
  background: var(--wh-lila);
  color: #fff !important;
  border-color: transparent;
}
.wh-page--spendenaufruf .wh-impact-btn-primary:hover{
  background: var(--wh-lila-hover);
}
.wh-page--spendenaufruf .wh-impact-btn:active{
  transform: translateY(1px);
}

/* =========================================================
   ADOPTION (Template) – Premium Cards + Beige Header
   Scoped: .wh-page--adoption
   ========================================================= */

.wh-page--adoption .wh-adopt-card{
  margin-top: 18px;
}

/* Header */
.wh-page--adoption .wh-adopt-head{
  background: linear-gradient(180deg, rgba(189,163,146,.70), rgba(189,163,146,.35));
  padding: 16px 16px 14px 18px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.wh-page--adoption .wh-adopt-title{
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
  color: var(--wh-lila);
  letter-spacing: .2px;
  font-weight: 800;
}

/* Desktop layout */
.wh-page--adoption .wh-adopt-grid{
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 0;
  align-items: stretch;
}

/* Alternate */
.wh-page--adoption .wh-adopt-grid--reverse{
  direction: rtl;
}
.wh-page--adoption .wh-adopt-grid--reverse > *{
  direction: ltr;
}

/* Media column */
.wh-page--adoption .wh-adopt-media{
  background: rgba(244,244,244,.55);
  border-right: 1px solid rgba(0,0,0,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.wh-page--adoption .wh-adopt-grid--reverse .wh-adopt-media{
  border-right: 0;
  border-left: 1px solid rgba(0,0,0,.08);
}

.wh-page--adoption .wh-adopt-media img{
  width: 100%;
  height: 100%;
  min-height: clamp(260px, 34vh, 420px);
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Text */
.wh-page--adoption .wh-adopt-body{
  padding: 14px 16px 16px 22px;
  color: rgba(0,0,0,.82);
  line-height: 1.55;
}

.wh-page--adoption .wh-adopt-body p{
  margin: 0 0 10px;
}

.wh-page--adoption .wh-adopt-body ul{
  margin: 10px 0 12px;
  padding-left: 18px;
}

.wh-page--adoption .wh-adopt-body li{
  margin: 6px 0;
  overflow-wrap: anywhere;
}

/* Button */
.wh-page--adoption .wh-adopt-download{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 800;
  background: var(--wh-lila);
  color: #fff !important;
  border: 1px solid transparent;
  transition: background .15s ease, transform .05s ease;
}
.wh-page--adoption .wh-adopt-download:hover,
.wh-page--adoption .wh-adopt-download:focus{
  background: var(--wh-lila-hover);
}
.wh-page--adoption .wh-adopt-download:active{
  transform: translateY(1px);
}

/* Card 5: always one column + thumbnail sizing */
.wh-page--adoption .wh-adopt-grid--onecol{
  grid-template-columns: 1fr !important;
}

.wh-page--adoption .wh-adopt-thumb{
  display: block;
  text-decoration: none;
}

.wh-page--adoption .wh-adopt-thumb--inline{
  display: grid;
  place-items: center;
  width: min(520px, 100%);
  margin: 14px 0 12px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(244,244,244,.55);
}

.wh-page--adoption .wh-adopt-thumb--inline img{
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: contain;
  object-position: center;
  background: #fff;
  display: block;
}

/* Tablet/Mobile: image top, text bottom */
@media (max-width: 1024px){
  .wh-page--adoption .wh-adopt-grid{
    grid-template-columns: 1fr;
  }
  .wh-page--adoption .wh-adopt-grid--reverse{
    direction: ltr;
  }
  .wh-page--adoption .wh-adopt-media{
    border-right: 0;
    border-left: 0;
    border-bottom: 1px solid rgba(0,0,0,.08);
  }
  .wh-page--adoption .wh-adopt-body{
    padding: 14px 14px 16px;
  }
  .wh-page--adoption .wh-adopt-media img{
    min-height: 240px;
    object-position: center 35%;
  }
  .wh-page--adoption .wh-adopt-thumb--inline img{
    max-height: 260px;
  }
}

@media (max-width: 767px){
  .wh-page--adoption .wh-adopt-media img{
    min-height: 220px;
  }
  .wh-page--adoption .wh-adopt-thumb--inline img{
    max-height: 220px;
  }
}
/* =========================================================
   PFLEGESTELLEN-FAQ (Template)
   Scoped: .wh-page--pflegestellen-faq
   ========================================================= */

.wh-page--pflegestellen-faq .wh-pf-hero{
  padding: 18px;
}

.wh-page--pflegestellen-faq .wh-pf-hero-grid{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  align-items: center;
}

.wh-page--pflegestellen-faq .wh-pf-hero-media{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(244,244,244,.55);
}

.wh-page--pflegestellen-faq .wh-pf-hero-media img{
  width: 100%;
  height: clamp(220px, 28vh, 380px);
  object-fit: cover;
  display: block;
}

@media (max-width: 900px){
  .wh-page--pflegestellen-faq .wh-pf-hero{
    padding: 16px;
  }
  .wh-page--pflegestellen-faq .wh-pf-hero-grid{
    grid-template-columns: 1fr;
  }
}

/* FAQ Card Head */
.wh-page--pflegestellen-faq .wh-pf-faq-head{
  background: linear-gradient(180deg, rgba(189,163,146,.70), rgba(189,163,146,.35));
  padding: 16px 16px 14px 18px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.wh-page--pflegestellen-faq .wh-pf-faq-title{
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
  color: var(--wh-lila);
  letter-spacing: .2px;
  font-weight: 800;
}

.wh-page--pflegestellen-faq .wh-pf-faq-sub{
  margin: 6px 0 0;
  color: rgba(0,0,0,.72);
  font-size: 14px;
}

/* Accordion */
.wh-page--pflegestellen-faq .wh-pf-accordion{
  padding: 12px 12px 14px;
}

.wh-page--pflegestellen-faq .wh-pf-item{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  margin: 10px 0;
}

.wh-page--pflegestellen-faq .wh-pf-q{
  list-style: none;
  cursor: pointer;
  padding: 14px 14px;
  font-weight: 800;
  color: rgba(0,0,0,.86);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.wh-page--pflegestellen-faq .wh-pf-q::-webkit-details-marker{
  display: none;
}

.wh-page--pflegestellen-faq .wh-pf-q::after{
  content: "";
  width: 10px;
  height: 10px;
  border-right: 3px solid var(--wh-lila);
  border-bottom: 3px solid var(--wh-lila);
  transform: rotate(45deg);
  transition: transform .15s ease;
  flex: 0 0 auto;
}

.wh-page--pflegestellen-faq details[open] > .wh-pf-q::after{
  transform: rotate(-135deg);
}

.wh-page--pflegestellen-faq .wh-pf-a{
  padding: 0 14px 14px;
  color: rgba(0,0,0,.82);
  line-height: 1.55;
}

.wh-page--pflegestellen-faq .wh-pf-a p{
  margin: 10px 0;
}

.wh-page--pflegestellen-faq .wh-pf-a .wh-list{
  margin: 10px 0 0;
}
/* =========================================================
   GLOBAL STACK: einheitliche Card-Abstände (Template-Seiten)
   ========================================================= */

/* Reset (auch gegen Inline-Styles) */
.wh-container .wh-card,
.wh-container .wh-card--kontakt,
.wh-container .wh-card--content,
.wh-container .wh-card--videos,
.wh-container .wh-form-card{
  margin-top: 0 !important;
}

/* Abstand zwischen Cards (auch wenn Wrapper dazwischen sind -> ohne >) */
.wh-container .wh-card + .wh-card{
  margin-top: 24px !important;
}

@media (max-width: 600px){
  .wh-container .wh-card + .wh-card{
    margin-top: 18px !important;
  }
}



/* ==========================================================
   STARTSEITE – FINAL (CSS-first, ohne Elementor-Gefrickel)
   - Header/Footer bleiben full width
   - Inhalt bekommt max-width + padding
   - Cards bekommen einheitlichen Abstand untereinander
   ========================================================== */

/* 1) Layout-Container: NUR der Content-Bereich (nicht Header/Footer) */
body.home .site-main{
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 16px 56px;
  box-sizing: border-box;
}

@media (min-width: 1025px){
  body.home .site-main{
    padding: 40px 24px 72px;
  }
}



/* =========================================================
   SINGLE HUND – Share Card + Lightbox
   (am Ende der Datei lassen, damit es gewinnt)
   ========================================================= */

/* 1) Share-Card: keine Sonder-Margins, läuft im globalen Card-Stack mit */
.wh-single .wh-card--share {
  /* bewusst kein margin-top, global stack regelt das */
}

/* Share-Card soll optisch exakt in die Card-Familie passen */
.wh-single .wh-card--share .wh-kontakt-head {
  background: linear-gradient(180deg, rgba(189,163,146,.70), rgba(189,163,146,.35));
  padding: 16px 16px 14px 18px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.wh-single .wh-card--share .wh-kontakt-title {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
  color: var(--wh-lila);
  letter-spacing: .2px;
  font-weight: 800;
}
.wh-single .wh-card--share .wh-kontakt-sub {
  margin: 6px 0 0;
  font-size: 14px;
  color: rgba(0,0,0,.72);
}
.wh-single .wh-card--share .wh-kontakt-body {
  padding: 14px 16px 16px 18px; /* wie Kopf-Logik, ähnlich Kontakt */
}

/* Actions (Buttons) */
.wh-single .wh-share-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.wh-single .wh-share-btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid rgba(0,0,0,.10);
  transition: background .15s ease, transform .05s ease, border-color .15s ease;
  user-select: none;
}

.wh-single .wh-share-btn:active {
  transform: translateY(1px);
}

.wh-single .wh-share-btn {
  background: var(--wh-lila);
  color: #fff;
  border-color: transparent;
}
.wh-single .wh-share-btn:hover,
.wh-single .wh-share-btn:focus {
  background: var(--wh-lila-hover);
  color: #fff;
}

.wh-single .wh-share-btn--secondary {
  background: #fff;
  color: var(--wh-lila);
  border-color: rgba(0,0,0,.10);
}
.wh-single .wh-share-btn--secondary:hover,
.wh-single .wh-share-btn--secondary:focus {
  background: rgba(140,58,118,.08);
  color: var(--wh-lila);
}

/* Fallback links als kleine Pills */
.wh-single .wh-share-fallback {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.wh-single .wh-share-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(244,244,244,.55);
  text-decoration: none !important;
  font-weight: 800;
  color: var(--wh-lila) !important;
  transition: background .15s ease, border-color .15s ease;
}

.wh-single .wh-share-link:hover,
.wh-single .wh-share-link:focus {
  background: rgba(140,58,118,.10);
  border-color: rgba(140,58,118,.18);
  color: var(--wh-lila-hover) !important;
}

/* Hint Text */
.wh-single .wh-share-hint {
  color: rgba(0,0,0,.72);
  line-height: 1.45;
}

/* 2) Lightbox Trigger: Button soll aussehen wie "normales Bild" */
.wh-single .wh-lightbox-trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  text-align: inherit;
}
.wh-single .wh-lightbox-trigger img {
  border-radius: 0; /* Card/Slide kümmert sich, damit nichts doppelt rund wird */
}

/* 3) Lightbox Overlay */
html.wh-no-scroll,
html.wh-no-scroll body {
  overflow: hidden !important;
  height: 100%;
}

.wh-lightbox {
  position: fixed;
  inset: 0;
  z-index: 999999; /* über Elementor/Offcanvas etc. */
  display: none;
}

.wh-lightbox.is-open {
  display: block;
}

.wh-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.wh-lightbox__dialog {
  position: absolute;
  inset: 16px;
  display: grid;
  place-items: center;
}

@media (max-width: 520px) {
  .wh-lightbox__dialog { inset: 10px; }
}

.wh-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(0,0,0,.45), 0 8px 22px rgba(0,0,0,.28);
  background: #000; /* für transparente PNGs egal */
}

/* Close Button */
.wh-lightbox__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
}

.wh-lightbox__close:before,
.wh-lightbox__close:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 3px;
  background: rgba(255,255,255,.95);
  border-radius: 99px;
  transform-origin: center;
}
.wh-lightbox__close:before { transform: translate(-50%, -50%) rotate(45deg); }
.wh-lightbox__close:after  { transform: translate(-50%, -50%) rotate(-45deg); }

.wh-lightbox__close:hover {
  background: rgba(140,58,118,.55);
  border-color: rgba(255,255,255,.35);
}

/* 4) Footer Shortcode Button (falls du [wh_share_site] nutzt) */
.wh-share-mini {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.wh-share-mini-btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 800;
  cursor: pointer;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(244,244,244,.55);
  color: var(--wh-lila);
  text-decoration: none !important;
  transition: background .15s ease, transform .05s ease;
}
.wh-share-mini-btn:hover,
.wh-share-mini-btn:focus {
  background: rgba(140,58,118,.10);
  color: var(--wh-lila-hover);
}
.wh-share-mini-btn:active {
  transform: translateY(1px);
}
.wh-share-mini-btn--secondary {
  background: #fff;
}
/* =========================================================
   Lightbox – nicht riesig, sondern "groß aber kontrolliert"
   ========================================================= */

.wh-lightbox__dialog {
  /* mehr Rand um das Bild -> wirkt weniger riesig */
  inset: 48px;
}

@media (max-width: 900px) {
  .wh-lightbox__dialog { inset: 22px; }
}

@media (max-width: 520px) {
  .wh-lightbox__dialog { inset: 14px; }
}

/* Bild bewusst kleiner als der Viewport halten */
.wh-lightbox__img {
  max-width: min(1100px, 92vw);
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* =========================================================
   GLOBAL TYPO: Alle Cards wie Kontakt (final, stabil)
   ========================================================= */

/* Basis-Typo in allen Cards */
.wh-container .wh-card,
.wh-single .wh-card{
  font-size: 15px;
  line-height: 1.55;
  color: rgba(0,0,0,.82);
}

/* Normaltext in Cards erbt sauber (Elementor setzt gern eigene Defaults) */
.wh-container .wh-card :where(p, li, span, a),
.wh-single .wh-card :where(p, li, span, a){
  font-size: inherit;
  line-height: inherit;
}

/* “Kontakt”-Headings als Standard-Pattern (wenn vorhanden) */
.wh-container .wh-card .wh-kontakt-title,
.wh-single .wh-card .wh-kontakt-title{
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: .2px;
  font-weight: 800;
  color: var(--wh-lila);
}

.wh-container .wh-card .wh-kontakt-sub,
.wh-single .wh-card .wh-kontakt-sub{
  margin: 6px 0 0;
  font-size: 14px;
  color: rgba(0,0,0,.72);
}

/* Body-Bereiche (Kontakt/Tabpanes) auf Kontakt-Niveau festnageln */
.wh-container .wh-card .wh-kontakt-body,
.wh-container .wh-card .wh-tabpanes,
.wh-single .wh-card .wh-kontakt-body,
.wh-single .wh-card .wh-tabpanes{
  font-size: 15px;
  line-height: 1.55;
}
/* Header Share Button (ersetzt PayPal Icon rechts) */
.wh-site-header .wh-header-share{
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.18);
  color: rgba(0,0,0,.88);
  font-weight: 850;
  letter-spacing: .2px;
  cursor: pointer;
  transition: background .15s ease, transform .05s ease, border-color .15s ease;
}

.wh-site-header .wh-header-share:hover,
.wh-site-header .wh-header-share:focus{
  background: rgba(255,255,255,.26);
  border-color: rgba(255,255,255,.45);
}

.wh-site-header .wh-header-share:active{
  transform: translateY(1px);
}

/* Optional: kleines Feedback neben dem Button */
.wh-site-header .wh-header-share-hint{
  margin-left: 10px;
  font-size: 13px;
  color: rgba(0,0,0,.75);
}
/* =========================================================
   FINAL: /deine-hilfe/ – make all card titles consistently bold
   (font-weight only, no color changes)
   ========================================================= */
.wh-page--hilfe .wh-help-card .wh-kontakt-title {
  font-weight: 700 !important;
}
/* ===== Grundlayout / Card ===== */
.wh-impressum .wh-wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 16px;
}

.wh-impressum .wh-card{
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 12px 34px rgba(0,0,0,.12);
  overflow: hidden;
}

.wh-impressum .wh-card-body{
  padding: 22px;
}

/* ===== Bild neben Text ===== */
.wh-impressum .wh-impressum-layout{
  display: flex;
  flex-wrap: wrap;      /* erlaubt Umbruch auf mobile */
  gap: 22px;
  align-items: flex-start;
}

.wh-impressum .wh-impressum-media{
  flex: 0 0 320px;      /* Bildspalte */
}

.wh-impressum .wh-impressum-img{
  width: 100%;
  height: 100%;
  max-height: 420px;    /* Bild begrenzen */
  object-fit: cover;    /* sauber zuschneiden statt riesig */
  display: block;
  border-radius: 14px;
}

/* Textspalte */
.wh-impressum .wh-impressum-content{
  flex: 1 1 420px;
  min-width: 280px;
}

.wh-impressum h1{ margin: 0 0 12px 0; }
.wh-impressum h4{ margin: 18px 0 6px 0; }
.wh-impressum p{ margin: 0 0 10px 0; }

/* ===== Links lila (LVHA-Reihenfolge) ===== */
.wh-impressum a:link,
.wh-impressum a:visited{
  color: #7b3fe4;
  text-decoration: none;
}

.wh-impressum a:hover,
.wh-impressum a:active{
  color: #5a22c8;
  text-decoration: underline;
}
/* Smooth scroll nur wenn erlaubt (a11y) */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.wh-backtotop{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;

  padding: 12px 14px;
  border: 0;
  border-radius: 999px;

  background: #111;
  color: #fff;
  font: inherit;
  line-height: 1;
  cursor: pointer;

  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 180ms ease-in-out, transform 180ms ease-in-out;
}

.wh-backtotop.is-visible{
  opacity: 0.92;
  pointer-events: auto;
  transform: translateY(0);
}

.wh-backtotop:hover{ opacity: 1; }

.wh-backtotop:focus-visible{
  outline: 3px solid #4c9ffe;
  outline-offset: 3px;
}

@media (max-width: 768px){
  .wh-backtotop{
    right: 12px;
    bottom: 12px;
    padding: 14px 16px;
  }
}
/* =========================================================
   WH Startseiten-Card System (FINAL, repariert)
   - Outer Container: .wh-home-card
   - Inner Container: .wh-home-card__inner  (MUSS Container sein)
   ========================================================= */

.wh-home-card{
  width: 100% !important;
  padding: 0 16px !important;        /* Globaler Seiten-Inset */
  margin: 32px 0 !important;
  box-sizing: border-box !important;
}

/* ===============================
   Welcome Card Layout
   =============================== */

.card-welcome-inner {
    display: flex;
    gap: 40px;
    align-items: center;
}

.card-welcome-image {
    flex: 0 0 45%;
}

.card-welcome-image img {
    width: 100%;
    height: auto;
    border-radius: 16px;
}

.card-welcome .card-content {
    flex: 1;
}

/* Responsive */
@media (max-width: 900px) {
    .card-welcome-inner {
        flex-direction: column;
    }
}
/* ===============================
   Social Icons
   =============================== */

.social-links {
    display: flex;
    gap: 16px;
    margin-top: 20px;
}

.social-links img {
    width: 60px;
    height: 36px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.social-links a:hover img {
    transform: scale(1.1);
    opacity: 0.85;
}
/* ===============================
   News Card
   =============================== */

.card-news {
    margin-top: 40px;
}

.card-news .card-title {
    margin-bottom: 24px;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.news-item {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.news-item h3 {
    margin-bottom: 12px;
    font-size: 1.1rem;
}

.news-excerpt {
    flex-grow: 1;
    opacity: 0.85;
    margin-bottom: 20px;
}

/* Button Variante */
.btn-outline {
    align-self: flex-start;
    border: 1px solid currentColor;
    background: transparent;
}

/* Responsive */
@media (max-width: 900px) {
    .news-grid {
        grid-template-columns: 1fr;
    }
}
/* ===== WH Core Header (no Elementor) ===== */
.wh-site-header{
  background: linear-gradient(180deg, rgba(140,58,118,1) 0%, rgba(189,163,146,1) 100%);
}

.wh-header-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 16px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 14px;
}

.wh-header-logo{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.wh-header-logo img{
  display:block;
  height: 64px;
  width: auto;
  border-radius: 14px;
}

/* Desktop nav */
.wh-nav-desktop{ justify-self: center; }
.wh-menu{
  list-style: none;
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.wh-menu > li{ position: relative; }
.wh-menu a{
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: .2px;
  color: rgba(0,0,0,.88);
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.22);
}
.wh-menu a:hover{ background: rgba(255,255,255,.26); }

/* Dropdowns */
.wh-menu .sub-menu{
  list-style:none;
  position:absolute;
  left:0;
  top:100%;
  min-width: 260px;
  margin: 10px 0 0;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 24px 60px rgba(0,0,0,.18), 0 6px 18px rgba(0,0,0,.10);
  display:none;
  z-index: 9999;
}
.wh-menu li:hover > .sub-menu{ display:block; }
.wh-menu .sub-menu a{
  height: auto;
  padding: 10px 12px;
  border-radius: 12px;
  background: transparent;
  border-color: transparent;
}

/* Hamburger button */
.wh-nav-toggle{
  display: none;
  width: 62px;
  height: 48px;
  border-radius: 16px;
  background: rgba(244,244,244,.82);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 18px 45px rgba(0,0,0,.16), 0 3px 10px rgba(0,0,0,.08);
}
.wh-burger{
  width: 26px; height: 3px; border-radius: 999px;
  background: var(--wh-lila);
  position: relative;
  display:block;
  margin: 0 auto;
}
.wh-burger:before, .wh-burger:after{
  content:"";
  position:absolute;
  left:0;
  width:26px; height:3px; border-radius:999px;
  background: var(--wh-lila);
}
.wh-burger:before{ top:-8px; }
.wh-burger:after{ top:8px; }

/* Offcanvas */
.wh-offcanvas{ position: fixed; inset: 0; z-index: 99999; }
.wh-offcanvas[hidden]{ display:none; }
.wh-offcanvas-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.45); }
.wh-offcanvas-panel{
  position:absolute;
  top:0; right:0; bottom:0;
  width: min(92vw, 420px);
  background: rgba(255,255,255,.98);
  border-left: 1px solid rgba(0,0,0,.10);
  box-shadow: -18px 0 55px rgba(0,0,0,.22);
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}
.wh-offcanvas-head{
  position: sticky;
  top:0;
  padding: 12px 12px;
  display:flex;
  justify-content: space-between;
  align-items:center;
  background: rgba(255,255,255,.98);
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.wh-offcanvas-close{
  width:44px; height:44px; border-radius:14px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(244,244,244,.65);
  position: relative;
}
.wh-offcanvas-close:before, .wh-offcanvas-close:after{
  content:""; position:absolute; left:50%; top:50%;
  width:18px; height:3px; background: rgba(0,0,0,.75);
  border-radius:999px; transform-origin:center;
}
.wh-offcanvas-close:before{ transform: translate(-50%,-50%) rotate(45deg); }
.wh-offcanvas-close:after{ transform: translate(-50%,-50%) rotate(-45deg); }

/* Mobile menu list */
.wh-menu-mobile, .wh-menu-mobile .sub-menu{
  list-style:none; margin:0; padding: 10px;
}
.wh-menu-mobile a{
  display:flex;
  align-items:center;
  justify-content: space-between;
  margin: 4px 0;
  padding: 14px 14px;
  border-radius: 14px;
  text-decoration:none;
  font-weight: 850;
  background: rgba(140,58,118,.06);
  border: 1px solid rgba(140,58,118,.14);
  color: rgba(0,0,0,.88);
}

/* Breakpoint: Tablet/Mobile */
@media (max-width: 1024px){
  .wh-nav-desktop{ display:none; }
  .wh-nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
}
/* ===== WH THEME HEADER (wp_nav_menu) – Desktop clean ===== */
.wh-site-header{
  background: linear-gradient(180deg, #8C3A76 0%, #BDA392 100%);
}

.wh-header-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 16px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 14px;
}

.wh-nav-desktop{ justify-self: center; }

/* Top-Level: kompakte Buttons statt riesige Pills */
@media (min-width: 1025px){
  .wh-menu{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 0;
  }
  .wh-menu > li{ position: relative; }

  .wh-menu > li > a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 12px;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 800;
    letter-spacing: .2px;
    color: rgba(0,0,0,.90);
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: none;
    transition: background .15s ease, border-color .15s ease, transform .05s ease;
  }
  .wh-menu > li > a:hover{
    background: rgba(255,255,255,.26);
    border-color: rgba(255,255,255,.30);
  }
  .wh-menu > li > a:active{ transform: translateY(1px); }

  /* Dropdown: echte Card */
  .wh-menu .sub-menu{
    list-style: none;
    position: absolute;
    left: 0;
    top: calc(100% + 10px);
    min-width: 260px;
    margin: 0;
    padding: 10px;
    border-radius: 16px;
    background: rgba(244,244,244,.98); /* Vereinsweiß */
    border: 1px solid rgba(0,0,0,.10);
    box-shadow: 0 24px 60px rgba(0,0,0,.18), 0 6px 18px rgba(0,0,0,.10);
    display: none;
    z-index: 99999;
  }
  .wh-menu li:hover > .sub-menu{ display: block; }

  .wh-menu .sub-menu a{
    display: block;
    padding: 10px 12px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 750;
    color: rgba(0,0,0,.86);
    background: transparent;
    border: 1px solid transparent;
  }
  .wh-menu .sub-menu a:hover{
    background: rgba(140,58,118,.10);
    border-color: rgba(140,58,118,.18);
  }
}
.wh-site-footer{
  background: linear-gradient(180deg, rgba(189,163,146,1) 0%, rgba(140,58,118,1) 100%);
  padding: 28px 0 40px;
}

.wh-footer-grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
  align-items: start;
}

.wh-footer-title{
  margin: 0 0 8px;
  color: #8C3A76;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .2px;
}

.wh-site-footer a{
  color: #8C3A76;
  text-decoration: none;
  font-weight: 750;
}
.wh-site-footer a:hover{ text-decoration: underline; text-underline-offset: 2px; }

.wh-footer-social{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.wh-footer-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(244,244,244,.85);
  border: 1px solid rgba(0,0,0,.10);
}

.wh-footer-brand img{
  max-width: 220px;
  height: auto;
  border-radius: 18px;
  opacity: .95;
}

@media (max-width: 900px){
  .wh-footer-grid{ grid-template-columns: 1fr; }
  .wh-footer-brand{ order: -1; }
}
/* === STARTSEITE – FRONT-PAGE.PHP EXAKT === */
.front-page{
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 40px 20px 56px !important;
}

/* Cards */
.front-page > section.card{
  background: #fff !important;
  border-radius: 18px !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.14), 0 3px 10px rgba(0,0,0,.06) !important;
  padding: 28px !important;
  margin: 0 !important;
  overflow: hidden !important;
}
.front-page > section.card + section.card{
  margin-top: 24px !important;
}

/* Welcome Grid */
.front-page .card-welcome-inner{
  display: grid !important;
  grid-template-columns: minmax(260px,42%) 1fr !important;
  gap: 28px !important;
  align-items: center !important;
}

/* Hero Bild HARTEST */
.front-page .card-welcome-image{
  position: relative !important;
  width: 100% !important;
  height: clamp(240px,32vw,360px) !important;
}
.front-page .card-welcome-image img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 16px !important;
}

/* BUTTONS HARTEST */
.front-page .card-actions{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 18px !important;
}
.front-page .card-actions a.btn,
.front-page .news-item a.btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 20px !important;
  background: #8C3A76 !important;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  border-radius: 14px !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  min-height: 52px !important;
  white-space: nowrap !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 0 !important;
}
.front-page .news-item a.btn.btn-outline{
  background: transparent !important;
  color: #8C3A76 !important;
  border-color: rgba(0,0,0,.14) !important;
}
.front-page a.btn:hover{
  background: #733061 !important;
}

/* Social */
.front-page .social-links{
  display: flex !important;
  gap: 12px !important;
  margin-top: 14px !important;
}
.front-page .social-links a{
  display: inline-flex !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  background: rgba(244,244,244,.9) !important;
  border: 1px solid rgba(0,0,0,.10) !important;
}
.front-page .social-links img{
  width: 22px !important;
  height: 22px !important;
}

/* News */
.front-page .news-grid{
  display: grid !important;
  grid-template-columns: repeat(3,1fr) !important;
  gap: 18px !important;
}

/* Mobile */
@media (max-width: 900px){
  .front-page .news-grid{ grid-template-columns: 1fr !important; }
  .front-page .card-welcome-inner{ grid-template-columns: 1fr !important; }
}
/* === HEADER DROPDOWN + LOGO PERFEKT === */

/* 1. LOGO klickbar zur Startseite (160x153px) */
.wh-header-logo {
  cursor: pointer !important;
}
.wh-header-logo img {
  border-radius: 12px !important;
  transition: transform .2s ease !important;
}
.wh-header-logo:hover img {
  transform: scale(1.05) !important;
}

/* 2. DROPDOWN STABIL (breiter + langsamer) */
.wh-menu > li.menu-item-has-children {
  position: relative !important;
}
.wh-menu .sub-menu {
  position: absolute !important;
  top: 100% !important;              /* Direkt unter */
  left: 0 !important;
  min-width: 280px !important;       /* Breiter */
  background: #fff !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.15) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-10px) !important;
  transition: all .25s cubic-bezier(0.4,0,0.2,1) !important; /* Sanft */
  z-index: 999 !important;
  padding: 12px 0 !important;
  border: 1px solid rgba(0,0,0,.08) !important;
}

.wh-menu li:hover > .sub-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* 3. NESTED Sub-Sub-Menü (Hündinnen/Rüden/Welpen) */
.wh-menu .sub-menu .sub-menu {
  top: 0 !important;
  left: 100% !important;             /* Rechts daneben */
  min-width: 220px !important;
}

/* 4. MOBILE Offcanvas (Touch-friendly) */
.wh-offcanvas .sub-menu {
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  box-shadow: none !important;
  background: rgba(0,0,0,.03) !important;
  margin-left: 20px !important;
  padding-left: 12px !important;
  border-left: 2px solid #8C3A76 !important;
}
/* LOGO immer sichtbar + klickbar */
.wh-header-logo {
  display: block !important;
  width: 160px !important;
  height: 153px !important;
}
.wh-header-logo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 12px !important;
}

/* LOGO IMMER SICHTBAR (160x153) */
.wh-header-logo {
  display: block !important;
  flex-shrink: 0 !important;
  width: 160px !important;
  height: 153px !important;
  background: url('https://whpage.patchnerf.de/wp-content/uploads/2026/01/Logo-Waisenhunde.webp') center/contain no-repeat !important;
  background-size: contain !important;
  border-radius: 12px !important;
  transition: transform .2s ease !important;
}
.wh-header-logo:hover {
  transform: scale(1.02) !important;
}
.wh-header-logo img { display: none !important; } /* Custom Logo überschreiben */

/* SUCHE rechts neben Nav */
.wh-header-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}
.wh-search {
  flex-shrink: 0 !important;
}
.wh-search input[type="search"] {
  border-radius: 24px !important;
  border: 2px solid #e1e5e9 !important;
  padding: 10px 16px !important;
  width: 220px !important;
  font-size: 15px !important;
}

/* HAMBURGER Mobile */
@media (max-width: 1024px) {
  .wh-nav-desktop { display: none !important; }
  .wh-nav-toggle {
    display: block !important;
    width: 44px !important;
    height: 44px !important;
    background: none !important;
    border: none !important;
  }
  .wh-burger {
    display: block !important;
    width: 24px !important;
    height: 2px !important;
    background: #333 !important;
    position: relative !important;
  }
  .wh-burger::before,
  .wh-burger::after {
    content: '' !important;
    position: absolute !important;
    width: 24px !important;
    height: 2px !important;
    background: #333 !important;
    left: 0 !important;
  }
  .wh-burger::before { top: -8px !important; }
  .wh-burger::after { top: 8px !important; }
}
/* EIN LOGO (Background only, Custom Logo killen) */
.wh-header-logo img.custom-logo { display: none !important; }
.wh-logo-placeholder { display: none !important; }
.wh-header-logo {
  display: block !important;
  width: 160px !important;
  height: 153px !important;
  background: url('https://whpage.patchnerf.de/wp-content/uploads/2026/01/Logo-Waisenhunde.webp') center/contain no-repeat !important;
  border-radius: 12px !important;
}

/* SUCHE */
.wh-search-form {
  display: flex !important;
  gap: 8px !important;
}
.wh-search-field {
  border-radius: 24px !important;
  border: 2px solid #e1e5e9 !important;
  padding: 12px 18px !important;
  font-size: 15px !important;
}
.wh-search-btn {
  border: none !important;
  background: #8C3A76 !important;
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  color: white !important;
  cursor: pointer !important;
}
/* === SOCIAL ICONS WILLKOMMENSCARD – CLEAN 44x44px === */
body.home .social-links {
  display: flex !important;
  gap: 12px !important;
  margin-top: 18px !important;
}
body.home .social-links a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  background: #fff !important;       /* Weiß, KEIN Grau */
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.08) !important;
  padding: 0 !important;             /* Kein Padding */
}
body.home .social-links img {
  width: 24px !important;            /* Perfekt zentriert */
  height: 24px !important;
  object-fit: contain !important;
}
/* =========================================================
   MOBILE/TABLET NAV – Offcanvas + Hamburger (Vereinsfarben)
   passt zu header.php: #wh-offcanvas + .wh-nav-toggle + .wh-burger
   ========================================================= */

:root{
  --wh-lila: #8C3A76;
}

/* ---------- HEADER LAYOUT: professionell (Desktop + Mobile) ---------- */

/* Desktop: Logo links, Suche rechts, Menü darunter zentriert */
@media (min-width: 1025px){
  .wh-header-inner{
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    grid-template-areas:
      "logo search"
      "nav  nav" !important;
    align-items: center !important;
    column-gap: 18px !important;
    row-gap: 10px !important;
  }
  .wh-header-logo{ grid-area: logo !important; }
  .wh-search{
    grid-area: search !important;
    justify-self: end !important;
    width: min(520px, 100%) !important;
  }
  .wh-nav-desktop{
    grid-area: nav !important;
    justify-self: center !important;
  }

  .wh-nav-toggle{ display: none !important; }
}

/* Mobile/Tablet: oben Logo + Burger, darunter Suche in voller Breite */
@media (max-width: 1024px){
  .wh-header-inner{
    display: grid !important;
    grid-template-columns: auto auto !important;
    grid-template-areas:
      "logo toggle"
      "search search" !important;
    align-items: center !important;
    column-gap: 12px !important;
    row-gap: 10px !important;
  }
  .wh-header-logo{ grid-area: logo !important; }
  .wh-search{ grid-area: search !important; width: 100% !important; }
  .wh-search-form{ width: 100% !important; }
  .wh-search-field{ width: 100% !important; }

  .wh-nav-desktop{ display: none !important; }

  .wh-nav-toggle{
    grid-area: toggle !important;
    justify-self: end !important;

    width: 56px !important;
    height: 48px !important;
    border-radius: 16px !important;
    background: rgba(244,244,244,.86) !important;
    border: 1px solid rgba(0,0,0,.10) !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.16), 0 3px 10px rgba(0,0,0,.08) !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
  }
}

/* ---------- Hamburger Icon (span.wh-burger) ---------- */
.wh-burger{
  width: 26px;
  height: 3px;
  border-radius: 999px;
  background: var(--wh-lila);
  position: relative;
  display: block;
}
.wh-burger::before,
.wh-burger::after{
  content:"";
  position:absolute;
  left:0;
  width:26px;
  height:3px;
  border-radius:999px;
  background: var(--wh-lila);
  transition: transform .18s ease, top .18s ease, opacity .18s ease;
}
.wh-burger::before{ top:-8px; }
.wh-burger::after{ top: 8px; }

/* Open -> X */
body.wh-offcanvas-open .wh-burger{ background: transparent; }
body.wh-offcanvas-open .wh-burger::before{ top:0; transform: rotate(45deg); }
body.wh-offcanvas-open .wh-burger::after{ top:0; transform: rotate(-45deg); }

/* ---------- Offcanvas (Wrapper + Backdrop + Panel) ---------- */
.wh-offcanvas{
  position: fixed;
  inset: 0;
  z-index: 99999;
}
.wh-offcanvas[hidden]{ display:none; }

.wh-offcanvas-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.45);
}

.wh-offcanvas-panel{
  position:absolute;
  top:0; right:0; bottom:0;
  width: min(92vw, 420px);
  background: rgba(255,255,255,.98);
  border-left: 1px solid rgba(0,0,0,.10);
  box-shadow: -18px 0 55px rgba(0,0,0,.22);
  overflow:auto;
  -webkit-overflow-scrolling: touch;

  transform: translateX(102%);
  transition: transform .22s ease;
}

/* wenn sichtbar (hidden=false), dann rein sliden */
.wh-offcanvas:not([hidden]) .wh-offcanvas-panel{
  transform: translateX(0);
}

.wh-offcanvas-head{
  position: sticky;
  top:0;
  padding: 12px 12px;
  display:flex;
  justify-content: space-between;
  align-items:center;
  background: rgba(255,255,255,.98);
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.wh-offcanvas-close{
  width:44px;
  height:44px;
  border-radius:14px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(244,244,244,.65);
  font-size: 26px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Scroll lock */
body.wh-offcanvas-open{
  overflow: hidden !important;
  touch-action: none;
}

/* Mobile Menu Links */
.wh-nav-mobile .wh-menu-mobile,
.wh-nav-mobile .wh-menu-mobile ul{
  list-style:none;
  margin:0;
  padding:10px;
}

.wh-nav-mobile .wh-menu-mobile > li > a{
  display:flex;
  align-items:center;
  justify-content: space-between;
  margin: 6px 6px;
  padding: 14px 14px;
  border-radius: 14px;

  background: rgba(140,58,118,.06);
  border: 1px solid rgba(140,58,118,.14);

  color: rgba(0,0,0,.88);
  font-weight: 850;
  text-decoration:none;
  min-height: 52px;
}

.wh-nav-mobile .wh-menu-mobile li.current-menu-item > a,
.wh-nav-mobile .wh-menu-mobile li.current-menu-ancestor > a{
  background: var(--wh-lila);
  border-color: rgba(140,58,118,.45);
  color:#fff;
}

.wh-nav-mobile .wh-menu-mobile .sub-menu{
  padding-left: 8px;
  margin: 6px 0 10px;
}
.wh-nav-mobile .wh-menu-mobile .sub-menu a{
  display:block;
  margin: 6px 10px;
  padding: 12px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.08);
  color: rgba(0,0,0,.86);
  text-decoration:none;
  font-weight: 750;
}

/* =========================================================
   HEADER LAYOUT (pro, stabil)
   - Mobile: Logo links, Hamburger rechts, Suche darunter
   - Desktop: Logo + Suche links, Nav rechts (clean, keine Pill-Party)
   ========================================================= */

.wh-site-header .wh-header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

@media (max-width: 1024px){
  .wh-site-header .wh-header-inner{
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 12px;
  }

  .wh-site-header .wh-header-logo{ grid-column: 1; grid-row: 1; }
  .wh-site-header .wh-nav-toggle{ grid-column: 2; grid-row: 1; justify-self: end; }

  /* Suche immer volle Breite UNTER Logo/Hamburger */
  .wh-site-header .wh-search{
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
  }
}

/* Desktop Nav clean */
@media (min-width: 1025px){
  .wh-nav-desktop .wh-menu{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .wh-nav-desktop .wh-menu > li{ margin: 0; padding: 0; }
  .wh-nav-desktop .wh-menu > li > a{
    display: inline-flex;
    align-items: center;
    height: 42px;
    padding: 0 12px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 800;
    color: rgba(0,0,0,.88);
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(0,0,0,.10);
  }
  .wh-nav-desktop .wh-menu > li > a:hover{
    background: rgba(140,58,118,.12);
    border-color: rgba(140,58,118,.20);
  }
  .wh-nav-desktop .wh-menu > li.current-menu-item > a,
  .wh-nav-desktop .wh-menu > li.current-menu-ancestor > a{
    background: rgba(140,58,118,.22);
    border-color: rgba(140,58,118,.28);
  }
}


/* =========================================================
   MOBILE/TABLET NAV – Offcanvas + Hamburger (Vereinsfarben)
   - nutzt Klassen: .wh-nav-toggle, .wh-nav-mobile
   - Toggle über body.wh-nav-open
   ========================================================= */

@media (min-width: 1025px){
  .wh-nav-toggle{ display: none !important; }
  .wh-nav-mobile{ display: none !important; }
  .wh-nav-desktop{ display: block !important; }
}
@media (max-width: 1024px){
  .wh-nav-desktop{ display: none !important; }
  .wh-nav-mobile{ display: block !important; } /* <- wichtig, verhindert “Overlay-only” Bug */
}

/* Hamburger Button */
@media (max-width: 1024px){
  .wh-nav-toggle{
    width: 56px !important;
    height: 48px !important;
    border-radius: 16px !important;

    background: rgba(244,244,244,.86) !important;
    border: 1px solid rgba(0,0,0,.10) !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.16), 0 3px 10px rgba(0,0,0,.08) !important;

    display: inline-grid !important;
    place-items: center !important;

    position: relative !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
    z-index: 100000 !important; /* über Header */
  }

  /* 3 Balken: wir benutzen span als mittleren Balken + before/after */
  .wh-nav-toggle::before,
  .wh-nav-toggle::after,
  .wh-nav-toggle span{
    content: "" !important;
    position: absolute !important;
    width: 26px !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: var(--wh-lila, #8C3A76) !important;
    transition: transform .18s ease, top .18s ease, opacity .18s ease !important;
  }

  .wh-nav-toggle::before{ top: 16px !important; }
  .wh-nav-toggle span{ top: 22px !important; }
  .wh-nav-toggle::after{ top: 28px !important; }

  /* OPEN -> X */
  body.wh-nav-open .wh-nav-toggle span{ opacity: 0 !important; }
  body.wh-nav-open .wh-nav-toggle::before{
    top: 22px !important;
    transform: rotate(45deg) !important;
  }
  body.wh-nav-open .wh-nav-toggle::after{
    top: 22px !important;
    transform: rotate(-45deg) !important;
  }

  /* Overlay */
  body::before{
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,.45) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity .18s ease, visibility .18s ease !important;
    z-index: 99990 !important;
    pointer-events: none !important;
  }
  body.wh-nav-open::before{
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Offcanvas Panel */
  .wh-nav-mobile{
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: min(92vw, 420px) !important;
    height: 100vh !important;

    background: rgba(255,255,255,.98) !important;
    border-left: 1px solid rgba(0,0,0,.10) !important;
    box-shadow: -18px 0 55px rgba(0,0,0,.22) !important;

    transform: translateX(102%) !important;
    transition: transform .22s ease !important;

    z-index: 99999 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 14px 10px 22px !important;
  }
  body.wh-nav-open .wh-nav-mobile{
    transform: translateX(0) !important;
  }

  /* Scroll lock */
  body.wh-nav-open{
    overflow: hidden !important;
    touch-action: none;
  }

  /* Mobile Menu Links */
  .wh-nav-mobile .wh-menu-mobile,
  .wh-nav-mobile .wh-menu-mobile ul{
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .wh-nav-mobile .wh-menu-mobile > li > a{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    margin: 6px 6px !important;
    padding: 14px 14px !important;
    border-radius: 14px !important;

    background: rgba(140,58,118,.06) !important;
    border: 1px solid rgba(140,58,118,.14) !important;

    color: rgba(0,0,0,.88) !important;
    font-weight: 850 !important;
    text-decoration: none !important;
    min-height: 52px !important;
  }

  .wh-nav-mobile .wh-menu-mobile li.current-menu-item > a,
  .wh-nav-mobile .wh-menu-mobile li.current-menu-ancestor > a{
    background: var(--wh-lila, #8C3A76) !important;
    border-color: rgba(140,58,118,.45) !important;
    color: #fff !important;
  }

  /* Submenus */
  .wh-nav-mobile .wh-menu-mobile .sub-menu{
    padding-left: 8px !important;
    margin: 6px 0 10px !important;
  }
  .wh-nav-mobile .wh-menu-mobile .sub-menu a{
    display: block !important;
    margin: 6px 10px !important;
    padding: 12px 12px !important;
    border-radius: 12px !important;
    background: rgba(0,0,0,.03) !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    color: rgba(0,0,0,.86) !important;
    text-decoration: none !important;
    font-weight: 750 !important;
  }
}
/* =========================================================
   NAV FIX (FINAL) – Offcanvas + Hamburger (Vereinsfarben)
   - arbeitet mit #wh-offcanvas (header.php)
   - Toggle: body.wh-offcanvas-open
   ========================================================= */

:root{
  --wh-lila: #8C3A76;
}

/* Mobile/Tablet Layout: Logo | Suche | Burger */
@media (max-width: 1024px){
  .wh-header-inner{
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 12px !important;
  }

  /* Suche darf Burger NICHT wegdrücken */
  .wh-search{ min-width: 0 !important; }
  .wh-search-form{ display:flex !important; gap:10px !important; align-items:center !important; }
  .wh-search-field{
    width: 100% !important;
    max-width: 520px !important;
  }

  /* Desktop Nav aus */
  .wh-nav-desktop{ display:none !important; }

  /* Burger sichtbar */
  .wh-nav-toggle{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 54px !important;
    height: 48px !important;
    border-radius: 16px !important;

    background: rgba(244,244,244,.88) !important;
    border: 1px solid rgba(0,0,0,.10) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.08) !important;

    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
    position: relative !important;
    z-index: 100010 !important; /* über Header */
  }

  /* 3 Balken über .wh-burger */
  .wh-nav-toggle .wh-burger{
    width: 26px !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: var(--wh-lila) !important;
    position: relative !important;
    display: block !important;
  }
  .wh-nav-toggle .wh-burger::before,
  .wh-nav-toggle .wh-burger::after{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    width:26px !important;
    height:3px !important;
    border-radius:999px !important;
    background: var(--wh-lila) !important;
    transition: transform .18s ease, top .18s ease, opacity .18s ease !important;
  }
  .wh-nav-toggle .wh-burger::before{ top:-8px !important; }
  .wh-nav-toggle .wh-burger::after{ top: 8px !important; }

  /* OPEN -> X */
  body.wh-offcanvas-open .wh-nav-toggle .wh-burger{ background: transparent !important; }
  body.wh-offcanvas-open .wh-nav-toggle .wh-burger::before{ top:0 !important; transform: rotate(45deg) !important; }
  body.wh-offcanvas-open .wh-nav-toggle .wh-burger::after{ top:0 !important; transform: rotate(-45deg) !important; }
}

/* Desktop */
@media (min-width: 1025px){
  .wh-nav-toggle{ display:none !important; }
  #wh-offcanvas{ display:none !important; }
}

/* Offcanvas Wrapper */
#wh-offcanvas{
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
}
#wh-offcanvas[hidden]{ display:none !important; }

/* Backdrop */
#wh-offcanvas .wh-offcanvas-backdrop{
  position:absolute !important;
  inset:0 !important;
  background: rgba(0,0,0,.45) !important;
}

/* Panel */
#wh-offcanvas .wh-offcanvas-panel{
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  width: min(92vw, 420px) !important;
  height: 100vh !important;

  background: rgba(255,255,255,.98) !important;
  border-left: 1px solid rgba(0,0,0,.10) !important;
  box-shadow: -18px 0 55px rgba(0,0,0,.22) !important;

  transform: translateX(102%) !important;
  transition: transform .22s ease !important;

  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding: 14px 12px 22px !important;
}

body.wh-offcanvas-open #wh-offcanvas .wh-offcanvas-panel{
  transform: translateX(0) !important;
}

/* Scroll lock */
body.wh-offcanvas-open{
  overflow: hidden !important;
  touch-action: none;
}

/* Head */
#wh-offcanvas .wh-offcanvas-head{
  display:flex !important;
  align-items:center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 8px 6px 12px !important;
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
  margin-bottom: 10px !important;
}

#wh-offcanvas .wh-offcanvas-title{
  font-weight: 900 !important;
  font-size: 18px !important;
}

#wh-offcanvas .wh-offcanvas-close{
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  background: rgba(244,244,244,.9) !important;
  cursor: pointer !important;
  font-size: 28px !important;
  line-height: 1 !important;
}

/* Menu */
#wh-offcanvas .wh-menu-mobile,
#wh-offcanvas .wh-menu-mobile ul{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}

#wh-offcanvas .wh-menu-mobile > li > a{
  display:flex !important;
  align-items:center !important;
  justify-content: space-between !important;

  margin: 6px 4px !important;
  padding: 14px 14px !important;
  border-radius: 14px !important;

  background: rgba(140,58,118,.06) !important;
  border: 1px solid rgba(140,58,118,.14) !important;

  color: rgba(0,0,0,.88) !important;
  font-weight: 850 !important;
  text-decoration:none !important;
  min-height: 52px !important;
}

#wh-offcanvas .wh-menu-mobile li.current-menu-item > a,
#wh-offcanvas .wh-menu-mobile li.current-menu-ancestor > a{
  background: var(--wh-lila) !important;
  border-color: rgba(140,58,118,.45) !important;
  color:#fff !important;
}

#wh-offcanvas .wh-menu-mobile .sub-menu{
  padding-left: 8px !important;
  margin: 6px 0 10px !important;
}
#wh-offcanvas .wh-menu-mobile .sub-menu a{
  display:block !important;
  margin: 6px 10px !important;
  padding: 12px 12px !important;
  border-radius: 12px !important;
  background: rgba(0,0,0,.03) !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  color: rgba(0,0,0,.86) !important;
  text-decoration:none !important;
  font-weight: 750 !important;
}
/* =========================================================
   MOBILE NAV – Submenu Pfeile (Accordion Toggle) sauber + Vereinsfarben
   (passt zu wh-nav.js: .wh-sub-toggle + .wh-sub-arrow + .wh-sub-open)
   ========================================================= */

@media (max-width: 1024px){

  /* jedes Top-Level Item als "Container", damit der Pfeil rechts sitzen kann */
  .wh-nav-mobile .wh-menu-mobile > li{
    position: relative !important;
  }

  /* Parent-Link: rechts Platz lassen für den Pfeil-Button */
  .wh-nav-mobile .wh-menu-mobile > li.menu-item-has-children > a{
    padding-right: 64px !important;
  }

  /* Pfeil-Button (der neben dem Link liegt) */
  .wh-nav-mobile .wh-sub-toggle{
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;

    background: rgba(140,58,118,.10) !important;          /* Vereinslila leicht */
    border: 1px solid rgba(140,58,118,.22) !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.10) !important;

    display: inline-grid !important;
    place-items: center !important;

    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;

    -webkit-tap-highlight-color: transparent;
    appearance: none !important;
  }

  .wh-nav-mobile .wh-sub-toggle:focus{
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(140,58,118,.18) !important;
  }

  /* Pfeil-Icon selbst */
  .wh-nav-mobile .wh-sub-arrow{
    color: #8C3A76 !important;     /* Vereinsfarbe */
    font-size: 18px !important;
    line-height: 1 !important;
    font-weight: 900 !important;

    display: inline-block !important;
    transform: rotate(0deg);
    transition: transform .18s ease !important;
  }

  /* Wenn Submenu offen ist -> Pfeil drehen */
  .wh-nav-mobile li.wh-sub-open > .wh-sub-toggle .wh-sub-arrow{
    transform: rotate(180deg);
  }

  /* Submenu optisch etwas eingerückt, sauberer */
  .wh-nav-mobile .wh-menu-mobile .sub-menu{
    margin: 8px 0 14px !important;
    padding-left: 10px !important;
  }
}
/* =========================================================
   MOBILE NAV – Submenu sauber einklappbar + Pfeile in Vereinsfarben
   Fix: Submenus sind default zu (sonst "Zuhause gesucht" immer offen)
   Fix: Abstand oben, damit das X/Hamburger nix überdeckt
   ========================================================= */
@media (max-width: 1024px){

  /* Panel oben Luft geben (damit Button/X nicht über dem 1. Item liegt) */
  .wh-nav-mobile{
    padding-top: 74px !important;
  }

  /* Submenus standardmäßig verstecken */
  .wh-nav-mobile .menu-item-has-children > .sub-menu{
    display: none !important;
    margin: 10px 0 12px !important;
    padding: 0 0 0 10px !important;
  }
  .wh-nav-mobile .menu-item-has-children.wh-sub-open > .sub-menu{
    display: block !important;
  }

  /* Parent-Link rechts Platz für Pfeil */
  .wh-nav-mobile .menu-item-has-children > a{
    padding-right: 54px !important;
  }

  /* Pfeil-Button: sauber rechts, Vereinsfarben, gleiche Größe überall */
  .wh-nav-mobile .menu-item-has-children{
    position: relative !important;
  }
  .wh-nav-mobile .wh-sub-toggle{
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;

    background: rgba(140,58,118,.10) !important;
    border: 1px solid rgba(140,58,118,.28) !important;
    cursor: pointer !important;

    display: inline-grid !important;
    place-items: center !important;
    padding: 0 !important;
  }

  /* Chevron Icon */
  .wh-nav-mobile .wh-sub-toggle::before{
    content: "" !important;
    width: 10px !important;
    height: 10px !important;
    border-right: 3px solid var(--wh-lila, #8C3A76) !important;
    border-bottom: 3px solid var(--wh-lila, #8C3A76) !important;
    transform: rotate(45deg) !important;
    transition: transform .18s ease !important;
  }

  /* Open: Chevron nach oben */
  .wh-nav-mobile li.wh-sub-open > .wh-sub-toggle::before{
    transform: rotate(-135deg) !important;
  }

  /* Submenu Items: optisch etwas “leichter” & eingerückt */
  .wh-nav-mobile .sub-menu > li > a{
    background: rgba(0,0,0,.03) !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    border-radius: 12px !important;
    margin: 6px 10px !important;
    padding: 12px 12px !important;
    display: block !important;
    font-weight: 750 !important;
    text-decoration: none !important;
  }
}
/* =========================================================
   FIX: Doppel-Pfeile im Mobile-Menü verhindern
   (Theme/Alt-CSS setzt oft Pfeile via ::after auf Links)
   ========================================================= */
@media (max-width: 1024px){

  /* Kill alle "Theme-Dropdown-Pfeile" im Offcanvas,
     damit NUR unser .wh-sub-toggle Pfeil sichtbar ist */
  .wh-nav-mobile .menu-item-has-children > a::after,
  .wh-nav-mobile .menu-item-has-children > a::before,
  .wh-nav-mobile .menu-item-has-children::after,
  .wh-nav-mobile .menu-item-has-children::before{
    content: none !important;
    display: none !important;
    background: none !important;
  }

  /* Sicherheit: falls irgendwo background-image Pfeile kommen */
  .wh-nav-mobile .menu-item-has-children > a{
    background-image: none !important;
  }

  /* Toggle immer “oben” */
  .wh-nav-mobile .wh-sub-toggle{
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 3 !important;
  }
}
/* =========================================================
   MOBILE NAV – Dropdown-UX Fix (Pfeile sauber, nicht überlagert)
   - Überschreibt evtl. alte Arrow-Styles
   ========================================================= */
@media (max-width: 1024px){

  /* Falls irgendwo noch Theme-/Pseudo-Arrows hängen: AUS */
  .wh-nav-mobile .menu-item-has-children > a::after,
  .wh-nav-mobile .menu-item-has-children > a:after,
  .wh-nav-mobile .menu-item-has-children::after,
  .wh-nav-mobile .menu-item-has-children:after{
    content: none !important;
    display: none !important;
    background: none !important;
  }

  /* Link bekommt Platz für den Toggle-Button rechts */
  .wh-nav-mobile .menu-item-has-children > a{
    position: relative !important;
    padding-right: 62px !important;
  }

  /* Submenu: default ZU (fix für "Zuhause gesucht ist permanent aufgeklappt") */
  .wh-nav-mobile .sub-menu{
    display: none !important;
    margin-top: 8px !important;
  }
  .wh-nav-mobile .menu-item-has-children.wh-sub-open > .sub-menu{
    display: block !important;
  }

  /* Toggle Button rechts – sauber, Vereinsfarben */
  .wh-nav-mobile .wh-sub-toggle{
    -webkit-appearance: none;
    appearance: none;

    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;

    border: 1px solid rgba(140,58,118,.30) !important;
    background: rgba(140,58,118,.10) !important;

    display: inline-grid !important;
    place-items: center !important;

    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    cursor: pointer !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.10) !important;
    z-index: 2 !important;
  }

  /* Falls JS irgendwo Text reinsetzt: unsichtbar -> wir zeichnen Chevron via CSS */
  .wh-nav-mobile .wh-sub-toggle{
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  /* EIN Chevron (aus 2 Strichen) – kein Doppel-Pfeil */
  .wh-nav-mobile .wh-sub-toggle::before,
  .wh-nav-mobile .wh-sub-toggle::after{
    content: "" !important;
    width: 12px !important;
    height: 2px !important;
    background: #8C3A76 !important;
    border-radius: 999px !important;

    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform-origin: center !important;
    transition: transform .18s ease !important;
  }

  /* geschlossen: V */
  .wh-nav-mobile .wh-sub-toggle::before{
    transform: translate(-60%,-50%) rotate(45deg) !important;
  }
  .wh-nav-mobile .wh-sub-toggle::after{
    transform: translate(-40%,-50%) rotate(-45deg) !important;
  }

  /* offen: ^ */
  .wh-nav-mobile .menu-item-has-children.wh-sub-open > a > .wh-sub-toggle::before{
    transform: translate(-60%,-50%) rotate(-45deg) !important;
  }
  .wh-nav-mobile .menu-item-has-children.wh-sub-open > a > .wh-sub-toggle::after{
    transform: translate(-40%,-50%) rotate(45deg) !important;
  }
}
/* =========================================================
   FIX: Offcanvas Close (X) bleibt sichtbar beim Scrollen
   - nutzt bestehenden Button: .wh-nav-toggle (Burger->X)
   - wenn Menü offen: Button FIXED oben rechts, über Overlay
   ========================================================= */
@media (max-width: 1024px){
  body.wh-nav-open .wh-nav-toggle{
    position: fixed !important;
    top: 14px !important;
    right: 14px !important;
    z-index: 100000 !important; /* über body::before Overlay + Panel */
  }

  /* damit der fixe Button nicht über dem ersten Menüpunkt liegt */
  body.wh-nav-open .wh-nav-mobile{
    padding-top: 74px !important;
  }

  /* optisch sauber im Vereinslook */
  body.wh-nav-open .wh-nav-toggle{
    background: rgba(255,255,255,.92) !important;
    border: 1px solid rgba(140,58,118,.35) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.18) !important;
  }
}
/* =========================================================
   FRONT-PAGE: Social Icons größer + ohne Kachel
   + News: Carousel (FINAL)
   ========================================================= */

:root{
  --wh-lila: #8C3A76;
  --wh-lila-dark: #733061;
}

/* =======================
   Social Icons
   ======================= */
body.home #site-content.front-page .social-links{
  gap: 12px !important;
}

body.home #site-content.front-page .social-links a{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  transition: transform .15s ease, background .15s ease !important;
}

body.home #site-content.front-page .social-links img{
  width: 28px !important;
  height: 28px !important;
  display: block !important;
}

body.home #site-content.front-page .social-links a:hover{
  transform: translateY(-2px) !important;
  background: rgba(140,58,118,.08) !important;
}

/* =========================================================
   NEWS CAROUSEL
   Desktop: Pfeile nur bei Hover + Dots sichtbar
   Mobile/Tablet: keine Pfeile + Dots sichtbar
   ========================================================= */

/* Wrapper */
#site-content.front-page .wh-news-carousel{
  position: relative !important;
}

/* Scroll-Fläche */
#site-content.front-page .wh-news-carousel .news-grid{
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 18px !important;

  overflow-x: auto !important;
  overflow-y: hidden !important;

  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch;

  padding: 6px 62px 22px !important; /* unten Platz für Dots */
  margin: 0 !important;

  grid-template-columns: unset !important;
}

/* Scrollbar aus */
#site-content.front-page .wh-news-carousel .news-grid::-webkit-scrollbar{
  display: none;
}
#site-content.front-page .wh-news-carousel .news-grid{
  scrollbar-width: none;
}

/* Slides – Desktop: 3 */
#site-content.front-page .wh-news-carousel .news-item{
  scroll-snap-align: start;
  flex: 0 0 calc((100% - 36px) / 3) !important;
  min-width: calc((100% - 36px) / 3) !important;
}

/* Mobile / Tablet: 1 */
@media (max-width: 1024px){
  #site-content.front-page .wh-news-carousel .news-grid{
    padding: 6px 16px 24px !important;
  }
  #site-content.front-page .wh-news-carousel .news-item{
    flex: 0 0 100% !important;
    min-width: 100% !important;
  }
}

/* =======================
   Pfeile
   ======================= */
#site-content.front-page .wh-news-carousel-btn{
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;

  background: var(--wh-lila) !important;
  border: 1px solid rgba(140,58,118,.3) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.2) !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  color: #fff !important;
  font-size: 30px !important;

  z-index: 20 !important;

  /* default: versteckt */
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;

  transition: opacity .2s ease, transform .2s ease, background .2s ease !important;
}

/* Desktop: sichtbar bei Hover über der CARD */
#site-content.front-page .card-news:hover .wh-news-carousel-btn{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Optional: auch wenn direkt über dem Carousel */
#site-content.front-page .wh-news-carousel:hover .wh-news-carousel-btn{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

#site-content.front-page .wh-news-carousel-btn:hover{
  background: rgba(140,58,118,.85) !important;
  transform: translateY(-50%) scale(1.08) !important;
}

#site-content.front-page .wh-news-carousel-btn:disabled{
  opacity: .35 !important;
}

#site-content.front-page .wh-news-carousel-btn--prev{ left: 15px !important; }
#site-content.front-page .wh-news-carousel-btn--next{ right: 15px !important; }

/* Mobile & Tablet: NIE Pfeile */
@media (max-width: 1024px){
  #site-content.front-page .wh-news-carousel-btn{
    display: none !important;
  }
}

/* =======================
   Dots – IMMER sichtbar
   ======================= */
#site-content.front-page .wh-news-dots{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;

  display: flex !important; /* überschreibt JS */
  justify-content: center;
  gap: 8px;

  z-index: 15;
}

#site-content.front-page .wh-news-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;

  background: rgba(140,58,118,.25);
  border: 1px solid rgba(140,58,118,.35);

  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}

#site-content.front-page .wh-news-dot.is-active{
  background: var(--wh-lila);
  transform: scale(1.2);
}
/* =========================================================
   NEWS: optisch wie Hunde-Slider (Dots = kleine Bullets)
   + News-Card kompakter (Button näher an Text)
   ========================================================= */

/* Kompaktere News-Card (nur innerhalb News) */
#site-content.front-page .card-news .news-item h3{
  margin: 10px 0 6px !important;
}

#site-content.front-page .card-news .news-excerpt{
  margin: 0 0 10px !important;
}

#site-content.front-page .card-news .news-item .btn{
  margin-top: 6px !important; /* näher an Text */
}

/* Optional: wenn der Button im Theme viel Padding hat, nur hier minimal kleiner */
#site-content.front-page .card-news .news-item .btn.btn-outline{
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* Pfeile: Desktop nur bei Hover, Mobile/Tablet keine */
#site-content.front-page .card-news .wh-news-carousel-btn{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .18s ease, transform .18s ease, background .18s ease !important;
}

@media (hover:hover){
  #site-content.front-page .card-news:hover .wh-news-carousel-btn,
  #site-content.front-page .card-news .wh-news-carousel:hover .wh-news-carousel-btn{
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

@media (max-width: 1024px){
  #site-content.front-page .card-news .wh-news-carousel-btn{
    display: none !important;
  }
}

/* Dots: Swiper-ähnliche Bullets (wie Hunde-Slider) */
#site-content.front-page .card-news .wh-news-dots{
  display: flex !important;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;          /* wirkt wie beim Hunde-Slider */
  position: static !important; /* nicht absolut: sauberer Abstand wie unten */
}

#site-content.front-page .card-news .wh-news-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  padding: 0;
  border: 0;

  background: rgba(0,0,0,.28);
  opacity: .55;
  cursor: pointer;

  transition: transform .15s ease, opacity .15s ease, background .15s ease;
}

#site-content.front-page .card-news .wh-news-dot.is-active{
  background: #1e73be; /* aktiver Bullet wie beim Hunde-Slider (blau) */
  opacity: 1;
  transform: scale(1.15);
}

#site-content.front-page .card-news .wh-news-dot:focus-visible{
  outline: 3px solid rgba(30,115,190,.30);
  outline-offset: 3px;
}
/* =========================================================
   FRONT PAGE – NEWS CARD: wirklich kompakter (kürzer)
   Ursache: .news-item padding + space-between + excerpt margin
   Fix: nur #site-content.front-page .card-news ...
   ========================================================= */

#site-content.front-page .card-news{
  margin-top: 28px !important;        /* vorher 40px */
  padding-top: 22px !important;
  padding-bottom: 18px !important;
}

#site-content.front-page .card-news .card-title{
  margin-bottom: 14px !important;     /* vorher 24px */
}

/* überschreibt die globalen Grid-Regeln nur in der News-Card */
#site-content.front-page .card-news .news-grid{
  gap: 18px !important;               /* vorher 24px */
}

/* wichtigste Kürzung: weniger Innen-Padding + kein space-between */
#site-content.front-page .card-news .news-item{
  padding: 16px !important;           /* vorher 24px */
  justify-content: flex-start !important;  /* statt space-between */
  row-gap: 8px !important;            /* kontrollierte Abstände */
}

/* Titel/Excerpt/Btn dichter */
#site-content.front-page .card-news .news-item h3{
  margin: 10px 0 4px !important;
}

#site-content.front-page .card-news .news-excerpt{
  margin: 0 0 8px !important;         /* vorher 20px */
}

/* Button näher ran, nicht “unten kleben” */
#site-content.front-page .card-news .news-item a.btn.btn-outline{
  margin-top: 6px !important;
  align-self: flex-start !important;
  padding: 10px 16px !important;
}

/* Carousel: weniger Bottom-Padding (Dots sind jetzt statisch darunter) */
#site-content.front-page .card-news .wh-news-carousel .news-grid{
  padding-bottom: 10px !important;
}

/* Dots: näher an Inhalt */
#site-content.front-page .card-news .wh-news-dots{
  margin-top: 6px !important;
}

/* Mobile noch etwas kompakter */
@media (max-width: 1024px){
  #site-content.front-page .card-news{
    margin-top: 22px !important;
    padding-top: 18px !important;
    padding-bottom: 16px !important;
  }

  #site-content.front-page .card-news .news-item{
    padding: 14px !important;
  }

  #site-content.front-page .card-news .news-item h3{
    margin-top: 8px !important;
  }
}
/* =========================================================
   FOOTER – CLEAN & READABLE
   ========================================================= */

/* Überschriften gut lesbar */
.wh-site-footer .wh-footer-title{
  color: #000 !important;
  font-weight: 700;
  margin-bottom: 10px;
}

/* Social Icons */
.wh-footer-social{
  display: flex;
  gap: 16px;
  align-items: center;
}

.wh-footer-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 56px;
  height: 56px;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  transition: transform .2s ease, opacity .2s ease;
}

.wh-footer-icon img{
  width: 34px;
  height: 34px;
  display: block;
}

.wh-footer-icon:hover{
  transform: translateY(-2px) scale(1.08);
  opacity: .9;
}

/* Mobile etwas größer für Touch */
@media (max-width: 768px){
  .wh-footer-icon{
    width: 60px;
    height: 60px;
  }
  .wh-footer-icon img{
    width: 38px;
    height: 38px;
  }
}
/* =========================================================
   FOOTER GRID – Logo mittig, Adresse & Konto darunter (STABIL)
   ========================================================= */
.wh-site-footer .wh-footer-grid{
  display: grid;
  grid-template-columns: 1fr 1fr auto 1fr 1fr; /* Mitte = Logo */
  grid-template-rows: auto auto;
  align-items: start;
  gap: 28px 32px;
}

/* Zeile 1 */
.wh-site-footer .wh-footer-social{
  grid-column: 1;
  grid-row: 1;
}

.wh-site-footer .wh-footer-col--legal{
  grid-column: 2;
  grid-row: 1;
}

.wh-site-footer .wh-footer-brand{
  grid-column: 3;
  grid-row: 1;
  justify-self: center;
  align-self: start;
}

.wh-site-footer .wh-footer-col--kontakt{
  grid-column: 4;
  grid-row: 1;
}

/* Zeile 2: Adresse + Konto direkt unter Logo */
.wh-site-footer .wh-footer-col--addr{
  grid-column: 3;
  grid-row: 2;
  justify-self: center;
  text-align: center;
  margin-top: 6px;
}

/* Logo stabil */
.wh-site-footer .wh-footer-brand img{
  display: block;
  margin: 0 auto;
}

/* Mobile / Tablet – alles sauber untereinander */
@media (max-width: 900px){
  .wh-site-footer .wh-footer-grid{
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 18px;
    text-align: center;
  }

  .wh-site-footer .wh-footer-social,
  .wh-site-footer .wh-footer-brand,
  .wh-site-footer .wh-footer-col{
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: center;
  }
}
/* =========================================================
   FIX: Hunde-Slider (Mobile) – Meta-Pills dürfen WRAPPEN
   -> verhindert abgeschnittene/überlaufende Texte in den Cards
   Stabil & langfristig
   ========================================================= */

/* Grundfix: Meta-Zeile darf umbrechen (auch Desktop ok) */
.wh-hund-meta{
  flex-wrap: wrap;
  align-items: center;
  row-gap: 10px;
  column-gap: 10px;
  min-width: 0;
}

/* Pills: Text darf umbrechen statt rauszulaufen */
.wh-hund-meta > span{
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.2;
}

/* Slider-Kontext: schmalere Flächen dürfen nicht "clippen" */
.wh-hund-slider .swiper-slide,
.wh-hund-slider .wh-hund-card,
.wh-hund-slider .wh-hund-info{
  min-width: 0;
}

/* Mobile Feintuning: besser lesbar, weniger gequetscht */
@media (max-width: 520px){
  .wh-hund-info{
    padding: 16px;
  }

  .wh-hund-thumb{
    height: 240px;
  }

  .wh-hund-meta{
    font-size: 13px;
    row-gap: 8px;
    column-gap: 8px;
  }

  .wh-hund-meta > span{
    padding: 6px 10px;
  }

  .wh-status-badges{
    margin-top: 10px;
  }

  .wh-badge{
    font-size: 0.9rem;
    padding: 0.45rem 0.8rem;
  }
}
/* =========================================================
   Hunde-Archiv Pagination – Vereinslook (scoped)
   ========================================================= */
.post-type-archive-hund .wh-pagination{
  margin: 40px 0;
}

.post-type-archive-hund .wh-pagination ul.page-numbers{
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 0;
  margin: 0;
}

.post-type-archive-hund .wh-pagination .page-numbers{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;

  padding: 0 14px;
  border-radius: 12px;

  text-decoration: none;
  font-weight: 700;

  border: 1px solid var(--wh-outline);
  background: rgba(244,244,244,.55);
  color: var(--wh-lila);
  transition: transform .15s ease, background .15s ease, color .15s ease;
}

.post-type-archive-hund .wh-pagination .page-numbers:hover{
  background: var(--wh-lila);
  color: #fff;
  transform: translateY(-1px);
}

.post-type-archive-hund .wh-pagination .page-numbers.current{
  background: var(--wh-lila);
  color: #fff;
  border-color: var(--wh-lila);
}

.post-type-archive-hund .wh-pagination .page-numbers.dots{
  border: 0;
  background: transparent;
  min-width: auto;
  padding: 0 4px;
  color: rgba(0,0,0,.55);
}

/* =========================================================
   Slide Animation (nur fürs Archiv-Ergebnis)
   ========================================================= */
.post-type-archive-hund #wh-archive-results.wh-page-slide-out{
  animation: whPageOut .22s ease forwards;
}
.post-type-archive-hund #wh-archive-results.wh-page-slide-in{
  animation: whPageIn .22s ease forwards;
}

@keyframes whPageOut{
  from{ opacity: 1; transform: translateX(0); }
  to  { opacity: 0; transform: translateX(-18px); }
}
@keyframes whPageIn{
  from{ opacity: 0; transform: translateX(18px); }
  to  { opacity: 1; transform: translateX(0); }
}
/* =========================================================
   Suche (/ ?s= ) – Suchergebnisse im Vereinslook (scoped)
   Greift nur auf der Suchergebnisseite, macht nichts kaputt.
   ========================================================= */
body.search.search-results .site-main,
body.search.search-no-results .site-main{
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 18px 40px;
}

body.search.search-results .page-header,
body.search.search-no-results .page-header{
  margin: 0 0 18px;
}

body.search.search-results .page-title,
body.search.search-no-results .page-title{
  margin: 0 0 10px;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: rgba(0,0,0,.92);
}

body.search.search-results .page-title span,
body.search.search-no-results .page-title span{
  color: var(--wh-lila);
}

/* Ergebnis-Liste als “Cards” */
body.search.search-results .site-main article,
body.search.search-results .site-main .post,
body.search.search-results .site-main .page,
body.search.search-results .site-main .type-hund{
  background: #fff;
  border: 1px solid var(--wh-outline);
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(0,0,0,.10), 0 3px 10px rgba(0,0,0,.05);
  padding: 18px 18px 14px;
  margin: 0 0 16px;
}

body.search.search-results .site-main article:hover{
  box-shadow: 0 28px 60px rgba(0,0,0,.14), 0 8px 20px rgba(0,0,0,.08);
  transform: translateY(-2px);
  transition: transform .15s ease, box-shadow .15s ease;
}

/* Titel/Links in Vereinslila */
body.search.search-results .entry-title,
body.search.search-results .site-main h2{
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 1.25;
}

body.search.search-results .entry-title a,
body.search.search-results .site-main a{
  color: var(--wh-lila);
  text-decoration: none;
  font-weight: 700;
}

body.search.search-results .entry-title a:hover,
body.search.search-results .site-main a:hover{
  text-decoration: underline;
}

/* Auszug/Text */
body.search.search-results .entry-summary,
body.search.search-results .entry-content,
body.search.search-no-results .page-content{
  color: rgba(0,0,0,.76);
  font-size: 16px;
  line-height: 1.6;
}

body.search.search-results .entry-meta,
body.search.search-results .entry-footer{
  color: rgba(0,0,0,.6);
  font-size: 13px;
  margin-top: 10px;
}

/* No-Results “Card” */
body.search.search-no-results .site-main .no-results{
  background: #fff;
  border: 1px solid var(--wh-outline);
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(0,0,0,.10), 0 3px 10px rgba(0,0,0,.05);
  padding: 18px;
}

/* Pagination (Hello Elementor nutzt oft .navigation .nav-links .page-numbers) */
body.search.search-results .navigation.pagination,
body.search.search-results nav.navigation{
  display: flex;
  justify-content: center;
  margin: 26px 0 0;
}

body.search.search-results .nav-links{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

body.search.search-results .nav-links .page-numbers{
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid var(--wh-outline);
  background: rgba(244,244,244,.55);
  color: var(--wh-lila);
  font-weight: 700;
  text-decoration: none;
  transition: all .15s ease;
}

body.search.search-results .nav-links .page-numbers:hover{
  background: var(--wh-lila);
  color: #fff;
  border-color: var(--wh-lila);
}

body.search.search-results .nav-links .page-numbers.current{
  background: var(--wh-lila);
  color: #fff;
  border-color: var(--wh-lila);
}

/* Mobile */
@media (max-width: 768px){
  body.search.search-results .site-main article,
  body.search.search-results .site-main .post,
  body.search.search-results .site-main .page,
  body.search.search-results .site-main .type-hund{
    padding: 16px 14px 12px;
    border-radius: 16px;
  }
}
/* Suchergebnisse: Bilder klein halten (sonst frisst es Platz) */
body.search.search-results .site-main article img,
body.search.search-results .site-main .post img,
body.search.search-results .site-main .page img{
  max-width: 100%;
  height: auto;
}

body.search.search-results .site-main article .post-thumbnail,
body.search.search-results .site-main article .wp-post-image,
body.search.search-results .site-main article img.wp-post-image{
  display: block;
}

/* Wenn das Theme die Bilder als großes <img> im Content ausgibt */
body.search.search-results .site-main article img.wp-post-image,
body.search.search-results .site-main article .post-thumbnail img{
  width: 100%;
  max-height: 220px;          /* << hier Größe steuern */
  object-fit: cover;
  border-radius: 14px;
}

/* Optional: etwas Abstand unter dem Bild */
body.search.search-results .site-main article .post-thumbnail,
body.search.search-results .site-main article img.wp-post-image{
  margin: 10px 0 12px;
}
/* Suchergebnisse: Bild komplett anzeigen (nicht abschneiden) */
body.search.search-results .site-main article img.wp-post-image,
body.search.search-results .site-main article .post-thumbnail img{
  width: 100%;
  max-height: 220px;        /* Höhe bleibt angenehm kompakt */
  object-fit: contain;     /* <<< WICHTIG: ganzes Bild */
  background: #f3f3f3;      /* füllt seitliche Leerflächen */
  border-radius: 14px;
  padding: 6px;            /* etwas Luft, wirkt hochwertig */
}
/* =========================================================
   News (/news/ + Single News) – Überschriften/Links in Vereinslila (scoped)
   Elementor ist aus – daher sauber über Body-Classes scopen.
   ========================================================= */

/* Falls das Theme statt wh-news-info WordPress-Standardklassen nutzt */
body.post-type-archive-news .entry-title a,
body.post-type-archive-news .entry-title a:visited,
body.post-type-archive-news .site-main a,
body.post-type-archive-news .site-main a:visited{
  color: var(--wh-lila) !important;
}
body.post-type-archive-news .entry-title a:hover,
body.post-type-archive-news .site-main a:hover{
  color: var(--wh-lila-hover) !important;
}

/* Single News: /news/<beitrag>/ */
body.single-news .entry-title,
body.single-news .entry-title a,
body.single-news .site-main a,
body.single-news .site-main a:visited{
  color: var(--wh-lila) !important;
}
body.single-news .site-main a:hover{
  color: var(--wh-lila-hover) !important;
}
/* Single Hund Tabs: nur Layout-Fix für 4 Tabs (keine Farbänderungen) */
.single-hund .wh-tabs{
  display:flex;
  flex-wrap:wrap;
}

.single-hund .wh-tabs .wh-tab{
  box-sizing:border-box;
  flex: 1 1 25%;
  min-width: 140px;     /* verhindert dass Labels ineinander laufen */
  text-align:center;
  white-space:nowrap;   /* kein Wort-chaos */
}

/* Tablet/Mobil: 2 pro Reihe => alle Tabs sichtbar, ohne Swipe */
@media (max-width: 720px){
  .single-hund .wh-tabs .wh-tab{
    flex: 1 1 50%;
    min-width: 0;
  }
}
/* =========================================================
   Matching Widget (Startseite) – FINAL (ohne :has(), sauber)
   ========================================================= */

/* Match-Card wieder wie alle Cards behandeln (Padding über Variable) */
.front-page > section.card.card-match{
  --wh-card-pad: 28px;
  padding: var(--wh-card-pad);
  position: relative;
  overflow: hidden;
}

/* Mobile: harmonischer Card-Padding */
@media (max-width: 720px){
  .front-page > section.card.card-match{
    --wh-card-pad: 18px;
  }
}

/* Untertitel im Match-Widget: nicht “doppelt” Abstand */
.front-page > section.card.card-match > p{
  margin-top: 6px;
}

/* Form: kein extra Padding mehr (Card padded already) */
.front-page > section.card.card-match .wh-match-form{
  padding: 0;
}

/* Grid: ruhig, responsive */
.front-page > section.card.card-match .wh-match-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

/* Tablet */
@media (max-width: 980px){
  .front-page > section.card.card-match .wh-match-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Mobile */
@media (max-width: 620px){
  .front-page > section.card.card-match .wh-match-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }
}

/* ---------------------------------------------------------
   Pills: checked-state zuverlässig (ohne :has())
   Markup: <label class="wh-match-pill"><input ...><span>Text</span></label>
   Wir stylen die “Pill” über das <span>, damit input:checked + span geht.
   --------------------------------------------------------- */

.wh-match-pill{
  position: relative;
  display: block;
  cursor: pointer;
  user-select: none;
}

/* Input verstecken aber weiterhin fokusierbar */
.wh-match-pill input{
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  left: 0;
  top: 0;
}

/* Das sichtbare Pill-UI */
.wh-match-pill span{
  display: flex;
  align-items: center;
  gap: 10px;

  width: 100%;
  min-width: 0;

  padding: 10px 12px;
  border-radius: 999px;

  background: rgba(140, 58, 118, 0.06);
  border: 1px solid rgba(140, 58, 118, 0.18);

  color: #3a1a31;
  font-weight: 800;

  transition: transform .08s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}

/* kleiner Punkt links als “Status” */
.wh-match-pill span::before{
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(140, 58, 118, 0.25);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9);
  flex: 0 0 auto;
}

/* Hover: dezenter Lift */
.wh-match-pill:hover span{
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(20, 8, 18, 0.08);
  border-color: rgba(140, 58, 118, 0.28);
}

/* Fokus (Keyboard) */
.wh-match-pill input:focus-visible + span{
  outline: 3px solid rgba(140, 58, 118, 0.35);
  outline-offset: 2px;
}

/* Checked: klar sichtbar (Browser-sicher) */
.wh-match-pill input:checked + span{
  background: #8C3A76;
  border-color: #8C3A76;
  color: #fff;
  box-shadow: 0 10px 24px rgba(140, 58, 118, 0.28);
}

.wh-match-pill input:checked + span::before{
  background: #fff;
  box-shadow: inset 0 0 0 3px rgba(140, 58, 118, 0.55);
}

/* Disabled: ruhig */
.wh-match-pill input:disabled + span{
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Actions */
.front-page > section.card.card-match .wh-match-actions{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid rgba(140, 58, 118, 0.12);
}

/* Buttons in Vereinsstil */
.front-page > section.card.card-match .btn{
  appearance: none;
  border: 0;
  padding: 11px 16px;
  border-radius: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .12s ease, opacity .12s ease;
}

/* Primary */
.front-page > section.card.card-match .btn{
  background: #8C3A76;
  color: #fff;
  box-shadow: 0 10px 20px rgba(140, 58, 118, 0.22);
}

.front-page > section.card.card-match .btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(140, 58, 118, 0.26);
}

/* Ghost */
.front-page > section.card.card-match .btn.btn--ghost{
  background: transparent;
  color: #8C3A76;
  border: 1px solid rgba(140, 58, 118, 0.25);
  box-shadow: none;
}

.front-page > section.card.card-match .btn.btn--ghost:hover{
  background: rgba(140, 58, 118, 0.07);
}

/* Hint */
.front-page > section.card.card-match .wh-match-hint{
  margin-left: auto;
  font-weight: 900;
  color: rgba(58, 26, 49, 0.75);
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(140, 58, 118, 0.06);
  border: 1px solid rgba(140, 58, 118, 0.12);
}

/* Mobile: Hint unter Buttons */
@media (max-width: 620px){
  .front-page > section.card.card-match .wh-match-hint{
    margin-left: 0;
    width: 100%;
    text-align: center;
  }
}


/* =========================================================
   Startseite: EINHEITLICHER lila Card-Header (h2 + h3) – FINAL
   (nur einmal im CSS verwenden, keine Duplikate!)
   ========================================================= */

/* Variable für alle Frontpage-Cards */
.front-page > section.card{
  --wh-card-pad: 28px;
}

/* Mobile: etwas weniger, damit’s nicht gequetscht wirkt */
@media (max-width: 720px){
  .front-page > section.card{
    --wh-card-pad: 18px;
  }
}

/* Header-Balken für direkte Card-Überschriften */
.front-page > section.card > h2,
.front-page > section.card > h3{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;

  margin: calc(-1 * var(--wh-card-pad)) calc(-1 * var(--wh-card-pad)) 18px;
  padding: 16px 22px;

  background: #8C3A76;
  color: #fff;

  border-radius: 16px 16px 0 0;

  font-weight: 900;
  line-height: 1.15;

  box-shadow: 0 10px 24px rgba(140, 58, 118, .18);
  word-break: break-word;
}

/* Untertitel direkt nach Header */
.front-page > section.card > h2 + p,
.front-page > section.card > h3 + p{
  margin-top: 6px;
}

/* Mobile: Header kompakter */
@media (max-width: 640px){
  .front-page > section.card > h2,
  .front-page > section.card > h3{
    padding: 14px 16px;
    margin: calc(-1 * var(--wh-card-pad)) calc(-1 * var(--wh-card-pad)) 14px;
    border-radius: 14px 14px 0 0;
  }
}
/* =========================================================
   OVERRIDE (ganz unten einfügen):
   Frontpage Cards: einheitlicher lila Header + sauberes Padding
   + Matching Widget: mobile-fix (keine überlappenden Pills)
   ========================================================= */

/* 1) Einheitliches Card-Padding auf der Startseite (damit Header-Margins stimmen) */
.front-page section.card{
  --wh-card-pad: 28px;
  padding: var(--wh-card-pad);
  border-radius: 18px;
  overflow: hidden;
}

@media (max-width: 720px){
  .front-page section.card{
    --wh-card-pad: 18px;
    border-radius: 16px;
  }
}

/* 2) Lila Header für direkte h2/h3 in Cards (auch Instagram <h3>) */
.front-page section.card > h2,
.front-page section.card > h3{
  margin: calc(-1 * var(--wh-card-pad)) calc(-1 * var(--wh-card-pad)) 18px !important;
  padding: 16px 22px !important;

  background: #8C3A76 !important;
  color: #fff !important;

  border-radius: 18px 18px 0 0 !important;

  font-weight: 800 !important;
  line-height: 1.15 !important;

  box-shadow: 0 10px 24px rgba(140, 58, 118, .18) !important;
}

@media (max-width: 640px){
  .front-page section.card > h2,
  .front-page section.card > h3{
    margin: calc(-1 * var(--wh-card-pad)) calc(-1 * var(--wh-card-pad)) 14px !important;
    padding: 14px 16px !important;
    border-radius: 16px 16px 0 0 !important;
  }
}

/* 3) Match-Widget: keine Sonder-Padding-Logik mehr (Card regelt das jetzt) */
.front-page section.card.card-match{
  position: relative;
}

/* Text unter Header */
.front-page section.card.card-match > p{
  margin: 6px 0 0 !important;
  color: rgba(40, 18, 34, .9);
  font-weight: 600;
}

/* Form soll NICHT nochmal extra Innen-Padding addieren */
.front-page section.card.card-match .wh-match-form{
  padding: 0 !important;
  margin-top: 12px;
}

/* 4) Pills: robust auf Mobile (Flex-Wrap statt Grid) */
.front-page section.card.card-match .wh-match-grid{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 14px !important;
}

/* Jedes Label ist ein Flex-Item -> verhindert Overlap zuverlässig */
.front-page section.card.card-match .wh-match-pill{
  position: relative;
  flex: 1 1 calc(50% - 10px); /* 2 Spalten */
  min-width: 140px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-sizing: border-box;
}

/* Sehr schmale Geräte -> 1 Spalte */
@media (max-width: 380px){
  .front-page section.card.card-match .wh-match-pill{
    flex-basis: 100%;
  }
}

/* Input unsichtbar aber accessible */
.front-page section.card.card-match .wh-match-pill input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Der sichtbare Pill ist der span */
.front-page section.card.card-match .wh-match-pill span{
  display: flex;
  align-items: center;
  gap: 10px;

  width: 100%;
  box-sizing: border-box;

  padding: 10px 12px;
  border-radius: 999px;

  background: rgba(140, 58, 118, 0.06);
  border: 1px solid rgba(140, 58, 118, 0.18);

  color: #3a1a31;
  font-weight: 800;

  cursor: pointer;
  user-select: none;

  transition: transform .08s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}

/* Punkt links */
.front-page section.card.card-match .wh-match-pill span::before{
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(140, 58, 118, 0.25);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9);
  flex: 0 0 auto;
}

/* Hover */
.front-page section.card.card-match .wh-match-pill:hover span{
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(20, 8, 18, 0.08);
  border-color: rgba(140, 58, 118, 0.28);
}

/* Checked (ohne :has -> iOS-safe) */
.front-page section.card.card-match .wh-match-pill input:checked + span{
  background: #8C3A76;
  border-color: #8C3A76;
  color: #fff;
  box-shadow: 0 10px 24px rgba(140, 58, 118, 0.28);
}

.front-page section.card.card-match .wh-match-pill input:checked + span::before{
  background: #fff;
  box-shadow: inset 0 0 0 3px rgba(140, 58, 118, 0.55);
}

/* Focus */
.front-page section.card.card-match .wh-match-pill input:focus-visible + span{
  outline: 3px solid rgba(140, 58, 118, .25);
  outline-offset: 2px;
}

/* Disabled */
.front-page section.card.card-match .wh-match-pill input:disabled + span{
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Actions */
.front-page section.card.card-match .wh-match-actions{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid rgba(140, 58, 118, 0.12);
}

/* Hint */
.front-page section.card.card-match .wh-match-hint{
  margin-left: auto;
  font-weight: 800;
  color: rgba(58, 26, 49, 0.75);
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(140, 58, 118, 0.06);
  border: 1px solid rgba(140, 58, 118, 0.12);
}

@media (max-width: 620px){
  .front-page section.card.card-match .wh-match-hint{
    margin-left: 0;
    width: 100%;
    text-align: center;
  }
}
/* =========================================================
   QSM – Vereinslook (Archive + Single) – Waisenhunde
   CLEAN + SCOPED (überschreibt NICHT Header/Nav/WP-Bar)
   ========================================================= */

/* ---------- Variablen NUR für QSM Bereiche ---------- */
.wh-qsm-archive,
body.single-qsm_quiz{
  --wh-purple: #8C3A76;
  --wh-purple-dark: #6f2d5d;
  --wh-purple-soft: #e7d9df;
  --wh-text: #2b1c24;
  --wh-muted: #4b2c3a;
  --wh-radius: 18px;
  --wh-shadow: 0 18px 45px rgba(0,0,0,.10), 0 3px 10px rgba(0,0,0,.06);
}

/* =========================================================
   ARCHIV /quiz/ (Template: archive-qsm_quiz.php)
   ========================================================= */

.wh-qsm-archive .wh-qsm-wrap{
  max-width: 1120px;
  margin: 0 auto;
  padding: 44px 18px 76px;
}

.wh-qsm-archive .wh-qsm-head{
  margin: 0 0 22px;
}

.wh-qsm-archive .wh-qsm-title{
  margin: 0 0 10px;
  color: var(--wh-text);
  letter-spacing: -0.03em;
  font-size: clamp(30px, 3.1vw, 46px);
  line-height: 1.06;
}

.wh-qsm-archive .wh-qsm-sub{
  margin: 0;
  max-width: 74ch;
  color: var(--wh-muted);
  opacity: .92;
  font-size: 16px;
  line-height: 1.55;
}
.wh-qsm-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}

.wh-qsm-logo img {
  max-width: 350px;   /* bewusst dezent */
  width: 100%;
  height: auto;
}

/* Grid: Desktop 3 Cards, Tablet 2, Mobile 1 */
.wh-qsm-archive .wh-qsm-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
  margin-top: 22px;
}

.wh-qsm-archive .wh-qsm-card{
  grid-column: span 4;
  background: #fff;
  border-radius: var(--wh-radius);
  border: 1px solid rgba(140,58,118,.12);
  box-shadow: var(--wh-shadow);
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.wh-qsm-archive .wh-qsm-card:hover{
  transform: translateY(-2px);
  border-color: rgba(140,58,118,.22);
  box-shadow: 0 22px 55px rgba(0,0,0,.12), 0 6px 18px rgba(0,0,0,.08);
}

@media (max-width: 980px){
  .wh-qsm-archive .wh-qsm-card{ grid-column: span 6; }
}
@media (max-width: 640px){
  .wh-qsm-archive .wh-qsm-wrap{ padding: 34px 16px 62px; }
  .wh-qsm-archive .wh-qsm-card{ grid-column: 1 / -1; }
}

/* Titel */
.wh-qsm-archive .wh-qsm-card-title{
  margin: 0;
  font-size: 20px;
  line-height: 1.18;
  letter-spacing: -0.015em;
}

.wh-qsm-archive .wh-qsm-card-link{
  color: var(--wh-text);
  text-decoration: none;
  font-weight: 900;
}

.wh-qsm-archive .wh-qsm-card-link:hover{
  color: var(--wh-purple);
}

/* Text */
.wh-qsm-archive .wh-qsm-card-excerpt{
  margin: 0;
  color: var(--wh-muted);
  opacity: .92;
  font-size: 15px;
  line-height: 1.55;
}

/* Button */
.wh-qsm-archive .wh-qsm-card-actions{
  margin-top: auto;
  display: flex;
}

.wh-qsm-archive .wh-qsm-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--wh-purple);
  color: #fff;
  text-decoration: none !important;
  font-weight: 900;
  box-shadow: 0 8px 22px rgba(140,58,118,.22);
  transition: transform .12s ease, background-color .12s ease;
}

.wh-qsm-archive .wh-qsm-btn:hover{
  background: var(--wh-purple-dark);
  transform: translateY(-1px);
}

.wh-qsm-archive .wh-qsm-btn-arrow{
  font-size: 18px;
  line-height: 1;
  opacity: .95;
}

@media (max-width: 640px){
  .wh-qsm-archive .wh-qsm-btn{ width: 100%; }
  .wh-qsm-archive .wh-qsm-btn-arrow{ display: none; }
}

/* Pagination */
.wh-qsm-archive .wh-qsm-pagination{
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.wh-qsm-archive .wh-qsm-pagination .page-numbers{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  text-decoration: none !important;
  border: 1px solid rgba(140,58,118,.22);
  color: var(--wh-purple);
  background: #fff;
  font-weight: 900;
}

.wh-qsm-archive .wh-qsm-pagination .page-numbers.current{
  background: var(--wh-purple);
  color: #fff;
  border-color: var(--wh-purple);
}

/* =========================================================
   SINGLE QUIZ – Buttons + Progress in Vereinslila
   ========================================================= */

body.single-qsm_quiz main,
body.single-qsm_quiz .site-main{
  max-width: 960px;
  margin: 0 auto;
  padding: 30px 18px 64px;
}

/* Card für das Quiz */
body.single-qsm_quiz .qsm-quiz-container,
body.single-qsm_quiz .qsm-quiz-wrapper,
body.single-qsm_quiz .mlw_qmn_quiz,
body.single-qsm_quiz .qmn_quiz_container{
  background: #fff !important;
  border-radius: var(--wh-radius) !important;
  padding: 22px 18px !important;
  box-shadow: var(--wh-shadow) !important;
  border: 1px solid rgba(140,58,118,.12) !important;
}

/* Buttons */
body.single-qsm_quiz .qsm-quiz-container .qsm-btn,
body.single-qsm_quiz .qsm-quiz-container .qmn_btn,
body.single-qsm_quiz .qsm-quiz-container input.qsm-btn,
body.single-qsm_quiz .qsm-quiz-container input.qmn_btn,
body.single-qsm_quiz .qsm-quiz-container .qsm-next-button,
body.single-qsm_quiz .qsm-quiz-container .qsm-prev-button,
body.single-qsm_quiz .qsm-quiz-wrapper .qsm-btn,
body.single-qsm_quiz .qsm-quiz-wrapper .qmn_btn,
body.single-qsm_quiz .mlw_qmn_quiz .qmn_btn,
body.single-qsm_quiz .mlw_qmn_quiz input[type="button"].qmn_btn,
body.single-qsm_quiz .mlw_qmn_quiz input[type="submit"].qmn_btn{
  background: var(--wh-purple) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 10px 22px !important;
  font-weight: 900 !important;
  box-shadow: 0 8px 22px rgba(140,58,118,.22);
}

body.single-qsm_quiz .qsm-quiz-container .qsm-btn:hover,
body.single-qsm_quiz .qsm-quiz-container .qmn_btn:hover,
body.single-qsm_quiz .qsm-quiz-wrapper .qsm-btn:hover,
body.single-qsm_quiz .qsm-quiz-wrapper .qmn_btn:hover,
body.single-qsm_quiz .mlw_qmn_quiz .qmn_btn:hover{
  background: var(--wh-purple-dark) !important;
}

/* Progressbar */
body.single-qsm_quiz .qsm-progress-bar,
body.single-qsm_quiz .qmn_progress_bar,
body.single-qsm_quiz .qmn_progress_bar_container,
body.single-qsm_quiz .qsm-progress-bar-container{
  background: var(--wh-purple-soft) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

body.single-qsm_quiz .qsm-progress-bar-fill,
body.single-qsm_quiz .qmn_progress_bar .qmn_progress_bar_fill,
body.single-qsm_quiz .qmn_progress_bar_fill{
  background: linear-gradient(90deg, var(--wh-purple), #b56a9a) !important;
}

/* Progress Text */
body.single-qsm_quiz .qmn_progress_bar_percentage,
body.single-qsm_quiz .qsm-progress-percent,
body.single-qsm_quiz .qmn_pagination,
body.single-qsm_quiz .qmn_page_counter{
  color: var(--wh-purple) !important;
  font-weight: 900;
}

/* Kommentarbox weg */
body.single-qsm_quiz .qsm-comment-box,
body.single-qsm_quiz .qsm-comment-section,
body.single-qsm_quiz .qmn_comment_section,
body.single-qsm_quiz .qmn_comment_form,
body.single-qsm_quiz .qsm-comment-area,
body.single-qsm_quiz #qsm-comment-area{
  display: none !important;
}
/* =========================================================
   WH LIGHTBOX – FIX (rote Kästchen weg + Counter + Pfeile + Mobile Swipe Support)
   ========================================================= */

/* A) Fokus- / Default-UI Artefakte ("rote Kästchen") killen */
.wh-lightbox *:focus,
.wh-lightbox *:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* Versteckte Inputs (Radio/Checkbox), die oft als "UI-Kästchen" auftauchen */
.wh-lightbox input[type="radio"],
.wh-lightbox input[type="checkbox"]{
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Falls irgendein "Pager/UI"-Container oben rendert -> ausblenden (safe)
   WICHTIG: NICHT unsere eigene .wh-lightbox__dots ausblenden! */
.wh-lightbox .pager,
.wh-lightbox .pageindicator,
.wh-lightbox .page-indicator,
.wh-lightbox .indicator,
.wh-lightbox .bullets,
.wh-lightbox .bullet,
.wh-lightbox .wh-lightbox__bullets,
.wh-lightbox .wh-lightbox__indicator{
  display: none !important;
}

/* B) Counter oben mittig (passt zu deinem Markup: .wh-lightbox__count) */
.wh-lightbox__count{
  position: absolute !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 1003 !important;
  color: rgba(255,255,255,.92) !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  letter-spacing: .02em !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(0,0,0,.30) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* C) Pfeile/Navigation in Vollbild (Desktop) */
.wh-lightbox__prev,
.wh-lightbox__next,
.wh-lightbox__nav{
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 1003 !important;

  width: 56px !important;
  height: 56px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(140,58,118,.55) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  color: transparent !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent;
}

/* links/rechts positionieren */
.wh-lightbox__prev{ left: 22px !important; }
.wh-lightbox__next{ right: 22px !important; }

/* Pfeil-Icons */
.wh-lightbox__prev::before{
  content: "‹";
  color: rgba(255,255,255,.95);
  font-size: 44px;
  line-height: 1;
  margin-left: -2px;
}
.wh-lightbox__next::before{
  content: "›";
  color: rgba(255,255,255,.95);
  font-size: 44px;
  line-height: 1;
  margin-right: -2px;
}

.wh-lightbox__prev:hover,
.wh-lightbox__next:hover{
  background: rgba(111,45,93,.65) !important;
  border-color: rgba(255,255,255,.28) !important;
}

/* D) Responsive: Pfeile nur Desktop */
@media (max-width: 1024px){
  .wh-lightbox__prev,
  .wh-lightbox__next,
  .wh-lightbox__nav{
    display: none !important;
  }
}

/* E) Dots unten als Hinweis (Lightbox-eigene Anzeige) */
.wh-lightbox__dots{
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 1003;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.30);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.wh-lightbox__dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.35);
}
.wh-lightbox__dot.is-active{
  background: rgba(255,255,255,.92);
}

/* F) Touch-/Swipe-Handling unterstützen (CSS-Teil) */
.wh-lightbox__dialog,
.wh-lightbox__img{
  touch-action: pan-y; /* erlaubt vertikales Scrollen, horizontales Wischen nutzen wir per JS */
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* =========================
   Gästebuch (Seite 1708)
   Layout + Zentrierung + Logo
   ========================= */

/* Seitentitel aus Theme ausblenden */
body.page-id-1708 h1.entry-title,
body.page-id-1708 .entry-title,
body.page-id-1708 h1.page-title,
body.page-id-1708 header.entry-header {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Gesamten Gästebuch-Bereich sauber zentrieren + Mobile-Padding */
body.page-id-1708 .wh-container{
  width: 100%;
  max-width: 860px;           /* Gesamtrahmen */
  margin: 0 auto;
  padding: 0 16px 24px;       /* wichtig für Mobile (damit nix “klebt”) */
  box-sizing: border-box;
}

/* Jede Card zentriert, nicht angeschnitten, mit konsistentem Abstand */
body.page-id-1708 .wh-container > .wh-card{
  width: 100%;
  max-width: 760px;           /* Card-Breite */
  margin: 0 auto 18px;
  box-sizing: border-box;
}

/* Card-Body: saubere Innenabstände */
body.page-id-1708 .wh-card-body{
  padding: 18px 18px 16px;
  box-sizing: border-box;
}

/* Mobile: etwas kompakter, aber mit Luft */
@media (max-width: 560px){
  body.page-id-1708 .wh-container{
    padding-left: 14px;
    padding-right: 14px;
  }
  body.page-id-1708 .wh-card-body{
    padding: 16px 14px 14px;
  }
}

/* Logo-Header: als “Badge”, nicht eckig, zentriert */
body.page-id-1708 .wh-gb-hero{
  display: flex;
  justify-content: center;
  margin: 14px auto 22px;
  padding: 0 16px;
  box-sizing: border-box;
}

/* WICHTIG: Bild wirkt nur dann “rund”, wenn wir es wie ein Badge einbetten */
body.page-id-1708 .wh-gb-hero img{
  width: min(420px, 92vw);
  height: auto;

  /* “nicht eckig” */
  border-radius: 28px;
  overflow: hidden;

  /* Badge-Optik */
  background: rgba(255,255,255,.92);
  padding: 14px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 45px rgba(0,0,0,.10), 0 3px 10px rgba(0,0,0,.06);

  display: block;
}

/* Formular: innen linksbündig (lesbar), aber gesamtes Formular bleibt zentriert */
body.page-id-1708 .wh-form-card .wh-card-body{
  text-align: left;
}

/* Inputs/Textarea: volle Breite der Card, ohne “max-width:720px”-Sideeffects */
body.page-id-1708 .wh-form-card input[type="text"],
body.page-id-1708 .wh-form-card textarea{
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}

/* Button: auf Mobile/Tablet schöner platziert (nicht links “kleben”) */
body.page-id-1708 .wh-form-card form p:last-child{
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

body.page-id-1708 .wh-form-card .wh-paten-btn{
  min-width: 220px;
}

@media (max-width: 560px){
  body.page-id-1708 .wh-form-card .wh-paten-btn{
    width: 100%;
    min-width: 0;
  }
}

/* Hinweis-Zeile (intern) etwas ruhiger/sauberer (optional, aber sieht sofort besser aus) */
body.page-id-1708 .wh-form-card .wh-card-body > p:first-child{
  margin-top: 0;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(0,0,0,.12);
}

/* WH PDF Embed Card */
.wh-pdf-card{
  background:#fff;
  border-radius:22px;
  box-shadow:0 18px 45px rgba(0,0,0,.10), 0 3px 10px rgba(0,0,0,.06);
  border:1px solid rgba(0,0,0,.08);
  padding:18px;
  max-width: 980px;
  margin: 0 auto 22px;
}

.wh-pdf-head{ text-align:center; margin-bottom:14px; }
.wh-pdf-title{ margin:0 0 6px; }
.wh-pdf-sub{ margin:0; opacity:.75; }

.wh-pdf-frame{
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.02);
}

/* Desktop: schön groß, aber nicht unendlich */
.wh-pdf-frame iframe{
  display:block;
  width:100%;
  height: min(78vh, 900px);
  border:0;
}

/* Mobil/Tablet: mehr Höhe & saubere Ränder */
@media (max-width: 900px){
  .wh-pdf-card{ padding:14px; border-radius:18px; }
  .wh-pdf-frame iframe{ height: 78vh; }
}

.wh-pdf-actions{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:14px;
}
/* Header Grundlayout verfeinern */
.wh-header-inner {
  display: flex;
  align-items: center;
  gap: 24px; /* kontrollierter Abstand zwischen Elementen */
}

/* LOGO: nicht mehr ganz links „kleben“ */
.wh-header-logo {
  margin-left: 24px;          /* schiebt es etwas Richtung Mitte */
  margin-right: 16px;         /* näher an die Suche */
  flex-shrink: 0;             /* Logo darf nicht schrumpfen */
}

/* SUCHBLOCK: näher ans Logo, aber flexibel */
.wh-search {
  margin-right: auto;         /* schiebt Navigation nach rechts */
  max-width: 320px;           /* verhindert Überbreite */
}

/* NAVIGATION: bleibt rechts, bekommt klaren Bereich */
.wh-nav-desktop {
  flex-shrink: 0;
}

/* Regenbogenbrücke – Seitenhintergrund (Bild sichtbar & ruhig) */
body.page-id-2103{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.35),
      rgba(255,255,255,0.55)
    ),
    linear-gradient(
      0deg,
      rgba(0,0,0,0.08),
      rgba(0,0,0,0.08)
    ),
    url('/wp-content/uploads/2026/02/Hintergrund-RBB.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Inhaltliche Karten bleiben ruhig & lesbar */
body.page-id-2103 .wh-rbb-card{
  position: relative;
  border-radius: 18px;
  padding: 18px;
  margin: 18px 0;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 10px 28px rgba(0,0,0,0.08);
  overflow: hidden;
}

body.page-id-2103 .wh-rbb-card-inner{
  position: relative;
  z-index: 2;
}

/* Überschriften & Text zentrieren */
body.page-id-2103 .wh-title,
body.page-id-2103 .wh-rbb-heading,
body.page-id-2103 .wh-rbb-card--text,
body.page-id-2103 .wh-rbb-card--text p{
  text-align: center;
}

/* Hundecard: Name + Badge mittig */
body.page-id-2103 .wh-rbb-hund-card .wh-hund-name{
  margin: 0;
  text-align: center;
}

body.page-id-2103 .wh-rbb-hund-card .wh-status-badges{
  display: flex;
  justify-content: center;
  margin-top: 6px;
}

/* Badge-Stil */
body.page-id-2103 .wh-badge-rbb{
  background: rgba(120, 90, 200, 0.14);
  color: rgba(40, 25, 90, 0.9);
}