/* Enhanced Blog Single Post - Modern Design */
/* Styles für single-post-enhanced.php */
@import url('wordpress-compatible-base.css');

/* ============================================
   BASE TYPOGRAPHY
============================================ */
body,
.mpa-single {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   READING PROGRESS BAR
============================================ */
.mpa-reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(15, 118, 110, 0.1);
  z-index: 9999;
}

.mpa-reading-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, #0f766e 0%, #0d9488 100%);
  width: 0%;
  transition: width 0.2s ease;
}

/* ============================================
   BREADCRUMB STYLES
============================================ */
.mpa-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  margin: 2rem 0;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(15, 118, 110, 0.1);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
  font-size: 0.9375rem;
  max-width: 1400px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mpa-breadcrumbs:hover {
  box-shadow: 0 8px 24px rgba(15, 118, 110, 0.12), 0 2px 8px rgba(15, 118, 110, 0.06);
  border-color: rgba(15, 118, 110, 0.2);
}

.mpa-breadcrumbs a {
  color: #64748b;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
}

.mpa-breadcrumbs a:hover {
  color: #0f766e;
  background: rgba(15, 118, 110, 0.05);
}

.mpa-breadcrumbs a:first-child::before {
  content: "🏠";
  font-size: 1rem;
  display: inline-block;
  margin-right: 0.25rem;
}

.mpa-breadcrumbs > span {
  color: transparent;
  position: relative;
  width: 1.25rem;
  text-align: center;
}

.mpa-breadcrumbs > span::before {
  content: "›";
  color: #cbd5e1;
  font-size: 1.25rem;
  font-weight: 300;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.mpa-breadcrumbs > span:last-child {
  color: #0f766e;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.1) 0%, rgba(13, 148, 136, 0.08) 100%);
  border-radius: 8px;
  width: auto;
}

.mpa-breadcrumbs > span:last-child::before {
  display: none;
}

/* ============================================
   MAIN LAYOUT
============================================ */
.mpa-single {
  background: #f8fafc;
  padding: 0;
  min-height: 100vh;
}

.mpa-single__wrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.mpa-single__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 3rem;
  align-items: start;
}

/* ============================================
   CONTENT CARD
============================================ */
.mpa-content-card {
  min-width: 0;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mpa-content-card:hover {
  box-shadow: 0 20px 60px rgba(15, 118, 110, 0.12), 0 4px 12px rgba(15, 118, 110, 0.08);
  transform: translateY(-4px);
}
/* ============================================
   FIX: KATEGORIE-BADGE REPARATUR
   Verhindert, dass das Badge abgeschnitten wird oder flackert
============================================ */

/* 1. Die Karte muss einen eigenen "Stapel-Kontext" bilden */
.mpa-content-card {
    position: relative;
    z-index: 10 !important; /* Bringt die Karte vor den unsichtbaren Sticky-Bereich */
    overflow: visible !important; /* Lässt das Badge rausgucken */
    transform: translateZ(0); /* Hardware-Beschleunigung gegen Flackern */
}

/* 2. Das Badge selbst: Höchste Priorität und sicher positioniert */
.mpa-article__header .mpa-article__tax {
    position: absolute !important;
    top: 0 !important;
    left: 4rem; /* Desktop Abstand */
    
    /* Zieht es nach oben raus */
    transform: translateY(-50%) !important; 
    
    margin: 0 !important;
    z-index: 20 !important; /* Muss höher sein als die Karte */
    width: auto !important;
    pointer-events: auto; /* Sicherstellen, dass es klickbar ist */
    
    /* Reset von eventuellen Sticky-Einflüssen */
    float: none !important;
    clear: none !important;
    height: auto !important;
    min-height: 0 !important;
}

/* 3. Mobile Korrektur für das Badge */
@media (max-width: 768px) {
    .mpa-article__header .mpa-article__tax {
        left: 1.5rem !important; /* Handy Abstand */
    }
}
/* ============================================
   ARTICLE STYLES
============================================ */
.mpa-article {
  background: transparent;
}

/* Article Header */
.mpa-article__header {
  padding: 4rem 4rem 2rem;
}

.mpa-article__title {
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  font-size: clamp(2.25rem, 5vw, 3.5rem) !important;
  line-height: 1.15 !important;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 2rem 0 !important;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.mpa-article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  color: #64748b;
  font-size: 0.9375rem;
  margin-bottom: 2rem;
}

.mpa-meta__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.mpa-meta__icon {
  flex-shrink: 0;
  opacity: 0.7;
}

.mpa-article__meta a {
  color: #0f766e;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

.mpa-article__meta a:hover {
  color: #0d9488;
  text-decoration: underline;
}

/* Featured Image */
.mpa-article__figure {
  width: 100%;
  margin: 3rem 0 0 0;
  overflow: hidden;
  border-radius: 20px;
  position: relative;
  max-height: 480px;
}

.mpa-article__figure::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(15, 23, 42, 0.03) 100%);
  pointer-events: none;
}

/* BILD FIX EINZELBEITRAG: Fokus oben (Köpfe sichtbar) */
.mpa-article__figure img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;           /* Füllt den Rahmen komplett aus */
  object-position: top center !important; /* WICHTIG: Richtet das Bild oben aus */
}
.mpa-article__figure:hover img {
  transform: scale(1.05);
}

.mpa-article__figure figcaption {
  padding: 1rem 3rem;
  font-size: 0.9375rem;
  color: #64748b;
  font-style: italic;
  text-align: center;
  background: #f8fafc;
}

/* Article Content */
.mpa-article__content {
  padding: 4rem 4rem 5rem;
  font-size: 1.125rem;
  line-height: 1.8;
  color: #334155;
}

.mpa-article__content > *:first-child {
  margin-top: 0 !important;
}

.mpa-article__content h2 {
  font-size: 2rem;
  font-weight: 700;
  color: #0f172a;
  margin: 3rem 0 1.5rem !important;
  line-height: 1.3;
  scroll-margin-top: 100px; /* Für TOC-Sprungmarken */
}

.mpa-article__content h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1e293b;
  margin: 2.5rem 0 1rem !important;
  line-height: 1.4;
  scroll-margin-top: 100px;
}

.mpa-article__content h4 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #334155;
  margin: 2rem 0 0.75rem !important;
}

.mpa-article__content p {
  margin: 1.5rem 0 !important;
  line-height: 1.8;
}

.mpa-article__content ul,
.mpa-article__content ol {
  margin: 2rem 0;
  padding-left: 2rem;
}

.mpa-article__content li {
  margin-bottom: 0.75rem;
  line-height: 1.8;
}

.mpa-article__content a {
  color: #0f766e;
  text-decoration: underline;
  font-weight: 500;
  transition: color 0.3s ease;
}

.mpa-article__content a:hover {
  color: #0d9488;
}

.mpa-article__content img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 2.5rem 0;
}

.mpa-article__content blockquote {
  margin: 2.5rem 0;
  padding: 2rem 2.5rem;
  border-left: 4px solid #0f766e;
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.05) 0%, rgba(13, 148, 136, 0.05) 100%);
  border-radius: 8px;
  font-style: italic;
  color: #1e293b;
  font-size: 1.15rem;
}

.mpa-article__content pre {
  margin: 2.5rem 0;
  padding: 2rem;
  background: #1e293b;
  border-radius: 12px;
  overflow-x: auto;
  font-size: 0.9375rem;
}

.mpa-article__content code {
  font-family: 'Courier New', Courier, monospace;
}

/* Article Footer */
.mpa-article__footer {
  padding: 3rem;
  border-top: 2px solid #e2e8f0;
  background: #f8fafc;
}

/* Taxonomy */
.mpa-article__tax {
  margin-bottom: 2rem;
}

.mpa-tax__row {
  margin-bottom: 1rem;
  font-size: 0.9375rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.mpa-tax__row strong {
  color: #475569;
  white-space: nowrap;
}

.mpa-tax__row a {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: rgba(15, 118, 110, 0.08);
  color: #0f766e;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
  font-size: 0.875rem;
}

.mpa-tax__row a:hover {
  background: #0f766e;
  color: #ffffff;
  transform: translateY(-2px);
}

/* Social Share Buttons */
.mpa-share {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 2rem 0;
  padding: 2rem 0;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

.mpa-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  background: #ffffff;
  color: #0f766e;
  text-decoration: none;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.9375rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.mpa-share__btn:hover {
  background: #0f766e;
  color: #ffffff;
  border-color: #0f766e;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(15, 118, 110, 0.2);
}

/* Author Box */
.mpa-author {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  margin-top: 2rem;
}

.mpa-author img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 3px solid #e2e8f0;
}

.mpa-author__name {
  font-size: 1.125rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 !important;
}

/* ============================================
   POST NAVIGATION
============================================ */
.mpa-postnav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 3rem;
}

.mpa-postnav__prev,
.mpa-postnav__next {
  padding: 2rem;
  background: #ffffff;
  border-radius: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mpa-postnav__prev:hover,
.mpa-postnav__next:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(15, 118, 110, 0.12);
}

.mpa-postnav__next {
  text-align: right;
}

.mpa-postnav__label {
  display: block;
  font-size: 0.875rem;
  color: #64748b;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.mpa-postnav__title {
  display: block;
  font-size: 1.125rem;
  color: #0f766e;
  font-weight: 700;
  line-height: 1.4;
}

.mpa-postnav a {
  color: inherit;
  text-decoration: none;
}

/* ============================================
   SIDEBAR
============================================ */
.mpa-sidebar {
  position: relative;
}

/* ============================================
   KOMBILÖSUNG: SMART STICKY
   1. Scrollt am Anfang mit (man sieht Arzt & Inhalt)
   2. Klebt am Ende unten fest (man sieht den Button)
============================================ */
/* ============================================
   FIXED CONTAINER MIT INTERNEM SCROLL
   Basis für das Script
============================================ */
.mpa-sidebar--sticky {
  /* Der Kasten klebt fest am Bildschirm */
  position: -webkit-sticky;
  position: sticky;
  top: 2rem;
  
  /* WICHTIG: Feste Höhe definieren, damit gescrollt werden kann */
  /* Wir nehmen die volle Bildschirmhöhe minus etwas Platz oben/unten */
  height: calc(100vh - 4rem);
  
  /* Scrollen erlauben */
  overflow-y: auto;
  overflow-x: hidden;
  
  /* Verhindert, dass das Scrollen der Sidebar die Hauptseite bewegt (wichtig für UX) */
  overscroll-behavior: contain;
  
  /* Design */
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  z-index: 5;
  padding-right: 5px; /* Platz für Scrollbar */
}

/* Scrollbalken-Design */
.mpa-sidebar--sticky::-webkit-scrollbar { width: 6px; }
.mpa-sidebar--sticky::-webkit-scrollbar-track { background: transparent; }
.mpa-sidebar--sticky::-webkit-scrollbar-thumb { 
    background-color: #0f766e; 
    border-radius: 4px; 
}
/* Mobile Reset */
@media (max-width: 1024px) {
  .mpa-sidebar--sticky {
    position: relative;
    bottom: auto;
  }
}

/* Widget Container */
.mpa-widget {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 20px;
  padding: 2.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.8);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mpa-widget:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(15, 118, 110, 0.12), 0 4px 12px rgba(15, 118, 110, 0.08);
  background: rgba(255, 255, 255, 0.95);
}

.mpa-widget__title {
  font-size: 1.375rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 2rem 0 !important;
  letter-spacing: -0.01em;
}

/* Table of Contents */
.mpa-toc__nav {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mpa-toc__nav a {
  display: block;
  padding: 0.75rem 1rem;
  color: #64748b;
  text-decoration: none;
  border-left: 3px solid transparent;
  border-radius: 4px;
  transition: all 0.3s ease;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.mpa-toc__nav a:hover {
  background: rgba(15, 118, 110, 0.05);
  border-left-color: #0f766e;
  color: #0f766e;
}

.mpa-toc__nav a.active {
  background: rgba(15, 118, 110, 0.1);
  border-left-color: #0f766e;
  color: #0f766e;
  font-weight: 600;
}

/* Sidebar List Items */
.mpa-sidebar__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mpa-sidebar__item {
  border-radius: 12px;
  overflow: hidden;
  padding: 0.75rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: transparent;
}

.mpa-sidebar__item:hover {
  transform: translateX(6px);
  background: rgba(15, 118, 110, 0.04);
}

.mpa-sidebar__link {
  display: flex;
  gap: 1rem;
  text-decoration: none;
  color: inherit;
}

.mpa-sidebar__thumb {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.mpa-sidebar__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.mpa-sidebar__item:hover .mpa-sidebar__thumb img {
  transform: scale(1.15);
}

.mpa-sidebar__content {
  flex: 1;
}

.mpa-sidebar__item-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #0f172a;
  margin: 0 0 0.5rem 0 !important;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mpa-sidebar__date {
  font-size: 0.8125rem;
  color: #64748b;
}

/* ============================================
   CTA WIDGET (Termin vereinbaren)
============================================ */

/* 1. Die Box selbst: Auffälliger Hintergrund */
.MPA-WIDGET--CTA {
    BACKGROUND: LINEAR-GRADIENT(135DEG, #0F766E 0%, #115E59 100%) !IMPORTANT; /* PRAXIS-GRÜN */
    COLOR: #FFFFFF !IMPORTANT; /* TEXT WEIß MACHEN */
    BORDER: NONE !IMPORTANT;
    TEXT-ALIGN: CENTER; /* ALLES ZENTRIEREN */
    BOX-SHADOW: 0 10PX 25PX RGBA(15, 118, 110, 0.25) !IMPORTANT; /* SCHÖNER SCHATTEN */
}

/* 2. DIE ÜBERSCHRIFT DARIN */
.MPA-WIDGET--CTA .MPA-WIDGET__TITLE {
    COLOR: #FFFFFF !IMPORTANT;
    BORDER-BOTTOM: 1PX SOLID RGBA(255, 255, 255, 0.2) !IMPORTANT; /* HELLE TRENNLINIE */
    MARGIN-BOTTOM: 1REM;
}

/* 3. DER TEXT DARIN */
.MPA-WIDGET--CTA P {
    COLOR: RGBA(255, 255, 255, 0.9) !IMPORTANT; /* LEICHT TRANSPARENTES WEIß */
    FONT-SIZE: 0.95REM;
    MARGIN-BOTTOM: 1.5REM;
}

/* 4. Der Button darin (Weiß mit grüner Schrift) */
.mpa-cta-button {
    display: inline-block;
    width: 100%;
    
    /* WICHTIG: Verhindert, dass der Button breiter als 100% wird */
    box-sizing: border-box; 
    
    background-color: #ffffff !important;
    color: #0f766e !important;
    font-weight: 700;
    
    /* Kleineres Padding (vorher war es 12px 20px) */
    padding: 10px 15px; 
    font-size: 0.95rem;
    
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    
    /* Text darf nicht umbrechen, wenn es eng wird */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mpa-cta-button:hover {
    background-color: #f0fdfa !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.2);
}
/* ============================================
   RESPONSIVE DESIGN
============================================ */
@media (max-width: 1024px) {
  .mpa-single__grid {
    grid-template-columns: 1fr;
  }

  .mpa-sidebar--sticky {
    position: relative;
    top: 0;
    max-height: none;
  }
}

@media (max-width: 768px) {
  .mpa-single__wrapper {
    padding: 1rem;
  }

  .mpa-article__header {
    padding: 2rem 1.5rem;
  }

  .mpa-article__title {
    font-size: clamp(1.75rem, 3vw, 2.5rem) !important;
  }

  .mpa-article__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .mpa-article__content {
    padding: 2rem 1.5rem;
  }

  .mpa-article__content h2 {
    font-size: 1.75rem;
  }

  .mpa-article__content h3 {
    font-size: 1.375rem;
  }

  .mpa-article__footer {
    padding: 2rem 1.5rem;
  }

  .mpa-article__figure {
    max-height: 360px;
  }

  .mpa-article__figure img {
    height: 360px;
  }

  .mpa-article__figure figcaption {
    padding: 1rem 1.5rem;
  }

  .mpa-postnav {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .mpa-postnav__next {
    text-align: left;
  }

  .mpa-widget {
    padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  .mpa-article__title {
    font-size: 1.6rem !important;
  }

  .mpa-article__content {
    padding: 1.5rem 1rem;
    font-size: 1rem;
  }

  .mpa-article__header,
  .mpa-article__footer {
    padding: 1.5rem 1rem;
  }

  .mpa-sidebar__thumb {
    width: 60px;
    height: 60px;
  }

  .mpa-tax__row {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* ============================================
   BREADCRUMB STYLES
============================================ */
.mpa-breadcrumbs {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* ÄNDERUNG: Text startet LINKS */
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  margin: 2rem auto;       /* Der Balken selbst bleibt horizontal zentriert */
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(15, 118, 110, 0.1);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
  font-size: 0.9375rem;
  max-width: 1400px;
  width: 100%;             /* Volle Breite */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ============================================
   STICKY SIDEBAR FIX
============================================ */

/* ============================================
   STICKY SIDEBAR MIT INTERNEM SCROLLEN
============================================ */

/* 1. Der Container außen muss wachsen können */
.mpa-sidebar {
  height: 100%;
  min-height: 100vh;
  position: relative;
}

/* 2. Das Sticky-Element innen */
.mpa-sidebar--sticky {
  position: -webkit-sticky; /* Für Safari */
  position: sticky;
  
  /* Abstand von oben (Platz für Header lassen) */
  top: 100px;
  
  /* WICHTIG: Die Sidebar darf maximal so hoch sein wie der Bildschirm 
     minus der Abstand von oben (100px) minus etwas Luft unten (20px) */
  max-height: calc(100vh - 120px);
  
  /* Das hier aktiviert das Scrollen INNERHALB der Sidebar, falls sie zu lang ist */
  overflow-y: auto;
  overflow-x: hidden;
  
  /* Verhindert, dass das Scrollen der Sidebar die ganze Seite "festhält" */
  overscroll-behavior: contain; 
  
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  z-index: 5;
  
  /* Etwas Abstand für die Scrollleiste */
  padding-right: 5px;
  padding-bottom: 10px;

  /* Scrollleiste schöner machen (dünn & grau) */
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

/* Scrollleiste für Chrome/Safari */
.mpa-sidebar--sticky::-webkit-scrollbar {
  width: 6px;
}
.mpa-sidebar--sticky::-webkit-scrollbar-track {
  background: transparent;
}
.mpa-sidebar--sticky::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 3px;
}
.mpa-sidebar--sticky::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8;
}

/* Mobile Reset (bleibt wie vorher) */
@media (max-width: 1024px) {
  .mpa-sidebar--sticky {
    position: relative;
    top: 0;
    bottom: auto;
  }
}
/* Scrollbar in Medizin-Grün */
.mpa-sidebar--sticky::-webkit-scrollbar-thumb {
  background-color: #0f766e !important; /* Dein Praxis-Grün */
  border-radius: 3px;
}

.mpa-sidebar--sticky::-webkit-scrollbar-thumb:hover {
  background-color: #0d9488 !important; /* Etwas dunkler beim Drüberfahren */
}
/* ============================================
   NEUER ARZT-PROFIL WIDGET IN SIDEBAR
============================================ */
.mpa-widget--profile {
    border-left: 4px solid #0f766e !important; /* Grüner Akzent links */
    padding: 1.5rem !important;
}

.mpa-profile-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
}

/* Bild rund und mit Rahmen */
.mpa-profile-image img {
    /* WICHTIG: Richtet das Bild oben aus (Kopf sichtbar) */
    object-position: top center !important;
    
    /* Füllt den Kreis komplett aus */
    object-fit: cover !important;
    
    /* Größe erzwingen */
    width: 80px !important;
    height: 80px !important;
    border-radius: 50%;
    
    /* Design */
    border: 3px solid #e2e8f0;
    margin: 0 auto;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.mpa-profile-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.mpa-profile-name {
    font-size: 1.1rem;
    color: #0f172a;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.mpa-profile-titles {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mpa-profile-titles li {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.4;
    margin-bottom: 2px;
}

/* Optional: Kleiner Haken vor den Titeln */
.mpa-profile-titles li::before {
    content: "•"; 
    color: #0f766e;
    margin-right: 4px;
    font-weight: bold;
}
/* ============================================
   DESIGN: GRÜNE SCROLLBALKEN (GLOBAL)
============================================ */

/* Für Chrome, Safari, Edge */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9; /* Helles Grau als Hintergrund */
}

::-webkit-scrollbar-thumb {
    background-color: #0f766e; /* Praxis-Grün */
    border-radius: 5px;
    border: 2px solid #f1f5f9; /* Kleiner weißer Rand für Eleganz */
}

::-webkit-scrollbar-thumb:hover {
    background-color: #0d9488; /* Dunkler beim Drüberfahren */
}

/* Für Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #0f766e #f1f5f9;
}
/* ============================================
   FIX: KATEGORIE-BADGE (HEADER VS. FOOTER)
   Repariert das Layout, damit Footer-Tags nicht fliegen.
============================================ */

/* 1. BASIS-ZUSTAND (z.B. für Tags im Footer) */
/* Hier darf NICHTS schweben, ganz normaler Textfluss */
.mpa-article__tax {
    position: relative; 
    top: auto;
    left: auto;
    transform: none;
    margin-bottom: 2rem;
    z-index: 1;
}

/* 2. NUR IM HEADER: SCHWEBENDES BADGE */
/* Nur das Element oben im Header wird absolut positioniert */
.mpa-article__header .mpa-article__tax {
    position: absolute;          /* Aus dem Fluss nehmen */
    top: 0;                      /* An die obere Kante */
    left: 4rem;                  /* Abstand links (passend zum Padding) */
    transform: translateY(-50%); /* Genau zur Hälfte über den Rand heben */
    margin: 0 !important;
    z-index: 10;                 /* Über dem Inhalt liegen */
    width: auto;
}

/* 3. DESIGN DES "CHIPS" (Der Button selbst) */
.mpa-chip {
    display: inline-block;
    background: #ffffff;
    color: #0f766e;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 10px 20px;
    border-radius: 50px;
    
    /* 3D-Look mit Schatten */
    box-shadow: 0 5px 15px rgba(0,0,0,0.08); 
    border: 1px solid rgba(15, 118, 110, 0.1);
    
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.mpa-chip:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(15, 118, 110, 0.15);
    background: #f0fdfa;
    color: #0d9488;
}

/* 4. MOBILE ANPASSUNG (Nur Header) */
@media (max-width: 768px) {
    .mpa-article__header .mpa-article__tax {
        left: 1.5rem !important; /* Weniger Rand am Handy */
    }
    
    .mpa-chip {
        font-size: 0.75rem;
        padding: 8px 16px;
    }
}
/* ============================================
   STICKY BACK BAR (Floating Pill Design)
============================================ */

.mpa-sticky-back-bar {
    /* 1. Positionierung */
    position: -webkit-sticky;
    position: sticky;
    
    /* Nutzt die JS-Variable für die Header-Höhe (Fallback 80px) */
    top: calc(var(--header-offset, 80px) + 10px);
    z-index: 90;
    
    /* Layout: Nimmt nur Platz ein, den der Button braucht */
    width: fit-content;
    margin: 0 auto 2rem 0; /* Links ausgerichtet */
    padding: 0;
    
    /* 2. START-ZUSTAND (Unsichtbar) */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px); /* Leicht nach oben verschoben */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none; /* Nicht klickbar, wenn unsichtbar */
}

/* 3. SICHTBARER ZUSTAND (Wird per Script .is-scrolled gesetzt) */
.mpa-sticky-back-bar.is-scrolled {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto; /* Wieder klickbar */
}

/* 4. DER BUTTON (Design: Sanftes Medizin-Grün) */
.mpa-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    
    /* Hintergrund: Sehr helles Mint/Türkis */
    background: #f0fdfa; 
    /* Text: Praxis Dunkelgrün */
    color: #0f766e !important; 
    
    /* Kapsel-Form (Pill) */
    padding: 8px 16px 8px 12px;
    border-radius: 50px;
    
    /* Feiner Rahmen & Schatten für 3D-Effekt */
    border: 1px solid rgba(15, 118, 110, 0.2);
    box-shadow: 0 4px 12px rgba(15, 118, 0.2);
	}
	/* ============================================
   FIX: IPAD SIDEBAR (Zwingend rechts halten)
============================================ */

/* Gilt für alle Tablets (iPad Mini, Air, Pro) und kleine Laptops */
@media (min-width: 768px) and (max-width: 1200px) {
    
    .mpa-single__grid {
        display: grid !important;
        
        /* WICHTIG: 2 Spalten erzwingen! */
        /* Links: Text (Rest) | Rechts: Sidebar (Fest 260px - etwas schmaler als Desktop) */
        grid-template-columns: 1fr 260px !important; 
        
        /* Abstand etwas verringern, um Platz zu sparen */
        gap: 1.5rem !important; 
    }

    /* Damit der Inhalt links nicht zu gequetscht aussieht */
    .mpa-single__wrapper {
        padding: 2rem 1rem !important;
    }
    
    /* Die Sidebar selbst muss sichtbar bleiben */
    .mpa-sidebar {
        display: block !important;
        width: 100% !important;
        margin-top: 0 !important;
    }
    
    /* Sticky muss auf dem iPad auch an sein */
    .mpa-sidebar--sticky {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: calc(var(--header-offset, 80px) + 20px) !important;
        height: calc(100vh - var(--header-offset, 80px) - 40px) !important;
        overflow-y: auto !important;
    }
}
/* ============================================
   IPAD / TABLET OPTIMIERUNG (Artikel)
============================================ */

@media (min-width: 768px) and (max-width: 1024px) {
    
    /* 1. Artikel Container anpassen */
    .mpa-article {
        border-radius: 16px !important; /* Etwas weniger rund */
        /* Wichtig: Weniger Innenabstand, damit mehr Platz für Inhalt ist */
    }

    /* 2. Header Bereich (Titel, Meta, Bild) */
    .mpa-article__header {
        padding: 2.5rem 2rem 1.5rem !important; /* Oben, Seite, Unten */
    }

    .mpa-article__title {
        font-size: 2rem !important; /* Titelgröße reduzieren (war oft zu groß) */
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
    }

    /* 3. Inhalt (Text) */
    .mpa-article__content {
        padding: 1.5rem 2rem 3rem !important; /* Seitenabstand reduzieren */
        font-size: 1rem !important; /* Schriftgröße normalisieren */
    }

    /* Überschriften im Text */
    .mpa-article__content h2 {
        font-size: 1.6rem !important;
        margin-top: 2rem !important;
    }
    
    .mpa-article__content h3 {
        font-size: 1.3rem !important;
    }

    /* 4. Footer Bereich (Tags, Share, Autor) */
    .mpa-article__footer {
        padding: 2rem !important;
    }

    /* 5. Bild (Figure) */
    .mpa-article__figure {
        margin-top: 1.5rem !important;
        border-radius: 12px !important;
    }
    
    /* Tags kompakter machen */
    .mpa-tax__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}
/* ============================================
   FIX: BREADCRUMBS (Umbruch erlauben)
   Verhindert, dass lange Titel aus dem Bild ragen.
============================================ */

.mpa-breadcrumbs {
    /* 1. Umbruch erlauben */
    flex-wrap: wrap !important; 
    height: auto !important; /* Höhe passt sich an */
    
    /* 2. Sicherstellen, dass nichts übersteht */
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden; /* Notbremse für Überhänge */
    
    line-height: 1.6; /* Mehr Platz zwischen den Zeilen beim Umbruch */
}

/* 3. Mobile Anpassung (Schrift etwas kleiner) */
@media (max-width: 768px) {
    .mpa-breadcrumbs {
        padding: 0.75rem 1rem; /* Kompakter */
        font-size: 0.85rem;    /* Kleinerer Text */
        gap: 0.5rem;           /* Weniger Abstand zwischen den Teilen */
    }
}
/* Widget Titel: Kompakt & Fein */
.mpa-widget__title {
    font-size: 1.1rem !important;      /* Kleiner (ca. 17-18px) statt riesig */
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 1rem 0 !important;     /* Weniger Abstand nach unten */
    padding-bottom: 0.75rem;           /* Etwas Luft zur Linie */
    border-bottom: 2px solid #e2e8f0;  /* Feine Trennlinie für Struktur */
    line-height: 1.4;
    letter-spacing: 0;
}
/* ============================================
   FIX: ABSTAND ZWISCHEN BREADCRUMBS & ARTIKEL
   Verringert den Weißraum oben drastisch.
============================================ */

/* 1. Breadcrumbs: Kaum noch Abstand nach unten */
.mpa-breadcrumbs {
    margin-bottom: 0.5rem !important; /* War vorher 2rem */
}

/* 2. Sticky-Bar: Weniger Abstand zum Artikel */
/* Da die Bar dazwischen liegt, müssen wir hier straffen */
.mpa-sticky-back-bar {
    margin-bottom: 1rem !important; /* War vorher 2rem */
    
    /* Optional: Falls der Platzhalter zu hoch ist, etwas verkleinern */
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* 3. Mobile/iPad Optimierung: Noch enger zusammen */
@media (max-width: 1024px) {
    .mpa-breadcrumbs {
        margin-top: 1rem !important; /* Weniger Abstand zum Header */
        margin-bottom: 0.25rem !important;
    }
    
    .mpa-sticky-back-bar {
        margin-bottom: 0.5rem !important;
    }
}
/* ============================================
   FIX: ABSTAND ZWISCHEN BREADCRUMBS & ARTIKEL
   Verringert den Weißraum oben drastisch.
============================================ */

/* 1. Breadcrumbs: Kaum noch Abstand nach unten */
.mpa-breadcrumbs {
    margin-bottom: 0.5rem !important; /* War vorher 2rem */
}

/* 2. Sticky-Bar: Weniger Abstand zum Artikel */
/* Da die Bar dazwischen liegt, müssen wir hier straffen */
.mpa-sticky-back-bar {
    margin-bottom: 1rem !important; /* War vorher 2rem */
    
    /* Optional: Falls der Platzhalter zu hoch ist, etwas verkleinern */
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* 3. Mobile/iPad Optimierung: Noch enger zusammen */
@media (max-width: 1024px) {
    .mpa-breadcrumbs {
        margin-top: 1rem !important; /* Weniger Abstand zum Header */
        margin-bottom: 0.25rem !important;
    }
    
    .mpa-sticky-back-bar {
        margin-bottom: 0.5rem !important;
    }
}
/* ============================================
   FIX: MOBILE ANPASSUNG (TEXT-UMBRUCH & STICKY LOGIK)
============================================ */
@media (max-width: 768px) {
    
    /* 1. Haupttitel und alle Zwischenüberschriften zum Umbruch zwingen */
    .mpa-article__title,
    .mpa-article__content h1,
    .mpa-article__content h2,
    .mpa-article__content h3,
    .mpa-article__content h4,
    .mpa-article__content h5,
    .mpa-article__content h6 {
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        word-break: break-word !important;
        -webkit-hyphens: auto !important;
        hyphens: auto !important;
        white-space: normal !important;
        max-width: 100% !important;
    }

    /* 2. Fließtext und Listen umbrechen */
    .mpa-article__content p,
    .mpa-article__content li,
    .mpa-article__content span {
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        -webkit-hyphens: auto;
        hyphens: auto;
    }

    /* 3. Breadcrumbs umbrechen */
    .mpa-breadcrumbs, 
    .mpa-breadcrumbs a, 
    .mpa-breadcrumbs span {
        white-space: normal !important;
        overflow-wrap: break-word !important;
        height: auto !important;
        line-height: 1.5 !important;
    }
    
    /* 4. WRAPPER FIX: Darf NICHT hidden sein, sonst geht sticky nicht */
    .mpa-single__wrapper {
        overflow: visible !important; 
        padding: 0 1rem;
    }

    /* Nur innere Container beschneiden gegen seitliches Ausbrechen */
    .mpa-article__content,
    .mpa-article__header,
    .mpa-article__footer {
        overflow-x: hidden !important; 
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        padding: 1.5rem 1rem !important;
    }

    /* 5. STICKY BUTTON LOGIK (KORRIGIERT) */
    .mpa-sticky-back-bar {
        /* Positionierung */
        z-index: 9999 !important;
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 80px !important;
        display: block !important;
        
        /* STARTZUSTAND: UNSICHTBAR (Fallback, falls Haupt-CSS überschrieben wurde) */
        /* Wichtig: Kein !important für visibility hier, damit JS wirken kann */
        opacity: 0; 
        visibility: hidden;
        transition: all 0.3s ease !important;
    }

    /* 6. ZUSTAND BEIM SCROLLEN (Wird sichtbar durch JS Klasse .is-scrolled) */
    .mpa-sticky-back-bar.is-scrolled {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
    }
    
    /* Meta Daten untereinander */
    .mpa-article__meta {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* ============================================
   FIX: GRID & SIDEBAR MOBILE
   Löst das Grid auf und verhindert seitliches Ausbrechen.
============================================ */
@media (max-width: 768px) {
    
    /* 1. Grid-Container auf Block setzen (untereinander statt nebeneinander) */
    .mpa-single__grid {
        display: block !important;
        grid-template-columns: 1fr !important; /* Sicherheitshalber, falls Grid aktiv bleibt */
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* 2. Artikel-Karte volle Breite */
    .mpa-content-card.mpa-article {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        display: block !important;
    }

    /* 3. Sidebar volle Breite und unter den Artikel schieben */
    .mpa-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 2rem !important;
        padding: 0 !important;
        float: none !important;
        clear: both !important;
    }
    
    /* 4. Sticky-Verhalten der Sidebar auf Mobile deaktivieren (verhindert Überlagerung) */
    .mpa-sidebar--sticky {
        position: relative !important;
        top: auto !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
    }
}

/* Final header-safe sticky back position. */
.mpa-sticky-back-bar {
    top: calc(var(--header-offset, 96px) + 18px) !important;
    z-index: 70 !important;
    max-width: min(100%, 1400px);
}

.mpa-sticky-inner {
    max-width: calc(100vw - 2rem);
}

.mpa-back-link {
    max-width: 100%;
    white-space: normal;
}

@media (max-width: 768px) {
    .mpa-sticky-back-bar {
        top: calc(var(--header-offset, 96px) + 12px) !important;
        margin-left: 0 !important;
        margin-right: auto !important;
    }
}