/* ==========================================================================
   SENSADORA STYLES v17 (inkl. Fixes 2025-11-02)
   Ergänzt:
   - Mobile Scrollbarkeit Wissen-Slider
   - Pagination-Fix für Spiele-Slider
   - Kachel-Fix Kompatibilitätstest
   - Alignment-Fix Sex-Wissen-Quiz
   - Globaler Header-/Content-Abstand
   ========================================================================== */


/* ==========================================================
   SLIDER STYLES (BLOG & PAGE)
   ========================================================== */
.sd-blog-slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 3rem;
}
.sd-slider-track {
  display: flex;
  transition: transform .6s ease;
}

/* --- Kartenlayout --- */
.sd-blog-slider .sd-card {
  background: #2a2929;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.35s ease;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  flex: 0 0 50%;
  max-width: 50%;
  margin: 0 0.5rem;
}
@media (min-width:768px){
  .sd-blog-slider .sd-card {
    flex: 0 0 33.333%;
    max-width: 33.333%;
    margin: 0 0.75rem;
  }
}
.sd-blog-slider .sd-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 24px rgba(182,0,219,0.3);
  outline: 2px solid #b600db;
}

/* --- Bild --- */
.sd-blog-slider .sd-image img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
}

@media (max-width:767px){
  .sd-blog-slider .sd-card {
    flex: 0 0 48% !important;
    max-width: 48% !important;
    margin: 0 1% !important;
  }
  .sd-blog-slider .sd-image img { height: 170px !important; }
}
@media (max-width:480px){
  .sd-blog-slider .sd-card {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin: 0 0 1rem !important;
  }
  .sd-blog-slider .sd-image img { height: 150px !important; }
}

/* --- Inhalt & Meta --- */
.sd-blog-slider .sd-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 18px 20px 20px;
}
.sd-blog-slider .sd-title { margin: 0 0 8px; font-weight: 700; }
.sd-blog-slider .sd-title a {
  color: #fff;
  text-decoration: none;
  transition: color .3s ease;
}
.sd-blog-slider .sd-title a:hover { color: #b600db; }

.sd-blog-slider .sd-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 0.95rem;
  color: #bdbdbd;
}
.sd-blog-slider .sd-author { color: #b600db; font-weight: 600; }

.sd-blog-slider .sd-excerpt {
  color: #ddd;
  line-height: 1.6;
  margin-bottom: 14px;
  flex-grow: 1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.sd-blog-slider .sd-actions { margin-top: auto; }
.sd-blog-slider .sd-btn {
  display: block;
  width: 100%;
  text-align: center;
  background: #b600db;
  color: #fff;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  padding: 12px 0;
  transition: all 0.3s ease;
}
.sd-blog-slider .sd-btn:hover {
  background: #bc58a5;
  transform: translateY(-2px);
}

/* --- Chevrons --- */
.sd-slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.45);
  border: none;
  color: #fff;
  font-size: 2rem;
  width: 44px; height: 44px;
  border-radius: 50%;
  cursor: pointer;
  transition: background .25s ease;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sd-slider-nav:hover { background: #b600db; }
.sd-slider-nav.prev { left: 10px; }
.sd-slider-nav.next { right: 10px; }
@media (max-width:767px){ .sd-slider-nav { display:none!important; } }

/* --- Dots --- */
.sd-slider-dots {
  text-align: center;
  margin-top: 16px;
}
.sd-slider-dots button {
  background: #666;
  border: none;
  width: 10px; height: 10px;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
  transition: background .3s ease;
}
.sd-slider-dots button.active,
.sd-slider-dots button:hover { background: #b600db; }



/* ==========================================================
   FIXES: Slider "Wissen" (mobile scrollbar / swipe sichtbar)
   ========================================================== */
.sensadora-page-slider {
  overflow-x: auto !important;
  scroll-snap-type: x mandatory;
  display: flex !important;
  -webkit-overflow-scrolling: touch;
}
.sensadora-page-slider::-webkit-scrollbar { display: none; }
.sensadora-page-slider > * {
  flex: 0 0 100%;
  scroll-snap-align: start;
}


/* ==========================================================
   FIX: Pagination springt bei mobilen Slidern
   ========================================================== */
.swiper-container {
  scroll-behavior: smooth !important;
}


/* ==========================================================
   SUCHERGEBNISSE (Ivory Search + Blocksy)
   ========================================================== */
body.search {
  background-color: #1A1A1A !important;
}
body.search main#main {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  gap: 1.5rem !important;
  align-items: stretch !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  background-color: #1A1A1A !important;
}

/* Karten */
body.search article.post {
  background: #2a2929;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.35s ease;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
body.search article.post:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 24px rgba(182,0,219,0.3);
  outline: 2px solid #b600db;
}

/* Bilder */
body.search article.post a.ct-media-container.boundless-image {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}
body.search article.post a.ct-media-container.boundless-image img {
  display: block !important;
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.search article.post a.ct-media-container.boundless-image { margin-bottom: 14px !important; }

/* Inhalt */
body.search .entry-header,
body.search .entry-summary {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 0 20px 20px !important;
}
body.search .entry-title a {
  color: #fff !important;
  text-decoration: none;
  font-weight: 700;
  transition: color .3s ease;
}
body.search .entry-title a:hover { color: #b600db !important; }

body.search .cat-links a {
  color: #b600db !important;
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
}
body.search .byline,
body.search .posted-on { color: #bdbdbd !important; font-size: 0.95rem; }
body.search .byline a {
  color: #b600db !important;
  font-weight: 600;
  pointer-events: none;
}
body.search .posted-on time { color: #fff !important; font-weight: 700; }

body.search .entry-summary p {
  color: #ddd !important;
  line-height: 1.6;
  margin-bottom: 14px;
  flex-grow: 1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* CTA */
body.search .more-link {
  display: block;
  width: 100%;
  text-align: center;
  background: #b600db;
  color: #fff !important;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  padding: 12px 0;
  transition: all .3s ease;
  margin-top: auto;
}
body.search .more-link:hover {
  background: #bc58a5;
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width:1024px){
  body.search main#main {
    grid-template-columns: repeat(2, 1fr) !important;
    max-width: 100% !important;
  }
}
@media (max-width:700px){
  body.search main#main {
    grid-template-columns: 1fr !important;
    padding: 0 10px !important;
  }
}


/* ==========================================================
   HEADER MENÜ – FARBLOGIK
   ========================================================== */

/* Standardfarbe aller Menülinks */
.ct-header a.ct-menu-link {
  color: #ffffff !important;
  --theme-link-initial-color: #ffffff !important;
  --theme-link-hover-color: #b600db !important;
}

/* Hoverfarbe */
.ct-header a.ct-menu-link:hover,
.ct-header a.ct-menu-link:focus {
  color: #b600db !important;
}

/* Aktive/aktuelle Zustände neutralisieren */
.ct-header li.current-menu-item > a.ct-menu-link,
.ct-header li.current_page_item > a.ct-menu-link,
.ct-header li.current-menu-ancestor > a.ct-menu-link,
.ct-header li.current_page_ancestor > a.ct-menu-link,
.ct-header li.current-menu-parent > a.ct-menu-link,
.ct-header li.current_page_parent > a.ct-menu-link,
.ct-header a.ct-menu-link[aria-current],
.ct-header a.ct-menu-link[aria-current="page"] {
  color: #ffffff !important;
  --theme-link-initial-color: #ffffff !important;
  --theme-link-hover-color: #b600db !important;
}

/* Hover bleibt aktiv */
.ct-header a.ct-menu-link:hover,
.ct-header a.ct-menu-link:focus {
  color: #b600db !important;
}

/* Individuelle Ausnahme: Rate die Abkürzung */
#menu-item-3194 > a.ct-menu-link {
  color: #ffffff !important;
  --theme-link-initial-color: #ffffff !important;
}
#menu-item-3194 > a.ct-menu-link:hover,
#menu-item-3194 > a.ct-menu-link:focus {
  color: #b600db !important;
  --theme-link-hover-color: #b600db !important;
}



/* ==========================================================
   QUIZ & SPIELE FIXES
   ========================================================== */

/* Kompatibilitätstest: Antwort-Kacheln bündig in Container */
#kompatibilitaetstest .card-front {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #3a3a3a;
  padding: 20px;
  border-radius: 10px;
  height: 100%;
  box-sizing: border-box;
}
#kompatibilitaetstest .answer-group {
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* Sex-Wissen-Quiz: mobile Textausrichtung */
@media (max-width: 600px) {
  .quiz-container .question-title { padding-left: 5px; }
  .quiz-container .answers-list { margin-left: 0; padding-left: 0; }
  .quiz-container .toggle-button { padding-left: 18px; }
}

/* Abstand Header zu erstem Inhalt verringern */
body.page .entry-content > *:first-child {
  margin-top: 0 !important;
}
.header-clone,
.ct-header,
header.site-header {
  margin-bottom: 10px !important;
}

/* Wissen: echter, scrollbar/wischbarer Pageslider + volle Klickbarkeit */
.sensadora-page-slider {
  display: flex !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory;
  gap: 16px;
  padding: 0 12px;
  -webkit-overflow-scrolling: touch;
}
.sensadora-page-slider > * { flex: 0 0 92%; scroll-snap-align: center; }
@media (min-width:480px){ .sensadora-page-slider > * { flex-basis: 88%; } }

/* Verhindere, dass Cover/Overlays Klicks schlucken */
.sensadora-page-slider .sd-image,
.sensadora-page-slider .sd-image::before,
.sensadora-page-slider .sd-image::after { pointer-events: none; }
.sensadora-page-slider a { pointer-events: auto; position: relative; z-index: 1; }

/* Menü-Hover auch für Elternpunkte (Megamenu/Dropdown) */
.ct-header li.menu-item-has-children:hover > a.ct-menu-link {
  color: #b600db !important;
}

/* ===== Pagination-Dots für .sensadora-page-slider (Wissen) ===== */
.sd-page-slider-dots {
  display:flex; justify-content:center; gap:8px; margin:10px 0 0;
}
.sd-page-slider-dots button{
  width:10px; height:10px; border-radius:50%;
  border:none; background:#666; cursor:pointer; transition:background .2s ease;
}
.sd-page-slider-dots button.active,
.sd-page-slider-dots button:hover{ background:#b600db; }

/* ===============================================
   SLIDER CARD SPACING – Feintuning 2025-11-02
   =============================================== */

/* Standard-Layout (Desktop & Tablet) */
.sd-blog-slider .sd-card {
  margin: 0 0.75rem !important; /* bisher 0.5rem */
}

/* Mobile (zwei Kacheln oder 1) */
@media (max-width: 767px) {
  .sd-blog-slider .sd-card {
    margin: 0 0.6rem !important;
  }
}

/* Kleinste Geräte (1 Kachel pro Slide) */
@media (max-width: 480px) {
  .sd-blog-slider .sd-card {
    margin: 0 0 1rem 0 !important; /* vertikal etwas mehr Abstand */
  }
}

/* Option: gleichmäßiges Padding im Track für Randabstand */
.sd-slider-track {
  padding: 0 0.5rem; /* sorgt für Abstand zum Rand */
  box-sizing: border-box;
}

/* ===============================================
   MOBILE SLIDER EDGE SPACING FIX
   =============================================== */

/* sorgt für linken/rechten Innenabstand bei mobilen Slidern */
@media (max-width: 767px) {
  .sd-slider-track {
    padding: 0 12px !important; /* Abstand zum Rand */
    box-sizing: border-box;
  }

  /* und etwas mehr Abstand zwischen den Karten */
  .sd-blog-slider .sd-card {
    margin: 0 6px !important;
  }
}

/* === Eigene Breadcrumbs Styling ======================================== */
.sensadora-breadcrumbs {
    display: block;
    margin: 0 0 24px 0;
    padding: 12px 0;
    font-size: 0.9rem;
    color: #bdbdbd;
    line-height: 1.6;
}

/* Blocksy Container Alignment - richtet Breadcrumbs mit dem Content aus */
.entry-content .sensadora-breadcrumbs,
article .sensadora-breadcrumbs {
    padding-left: 0;
    padding-right: 0;
}

/* Falls Breadcrumbs außerhalb von entry-content sind */
.site-main .sensadora-breadcrumbs {
    max-width: var(--theme-normal-container-max-width, 1200px);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--theme-content-spacing, 40px);
    padding-right: var(--theme-content-spacing, 40px);
}

.sensadora-breadcrumbs a {
    color: #b600db;
    text-decoration: none;
    transition: color 0.3s ease;
    font-weight: 500;
}

.sensadora-breadcrumbs a:hover {
    color: #bc58a5;
    text-decoration: underline;
}

.sensadora-breadcrumbs .breadcrumb-sep {
    margin: 0 8px;
    color: #666;
    font-weight: 300;
}

.sensadora-breadcrumbs .breadcrumb-current {
    color: #fff;
    font-weight: 600;
}

/* Responsive: Mobile Anpassung */
@media (max-width: 767px) {
    .sensadora-breadcrumbs {
        font-size: 0.85rem;
        margin-bottom: 16px;
    }
    
    .site-main .sensadora-breadcrumbs {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .sensadora-breadcrumbs .breadcrumb-sep {
        margin: 0 6px;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
    .site-main .sensadora-breadcrumbs {
        padding-left: 30px;
        padding-right: 30px;
    }
}