/* ============================================================
   MAHO Blogpost-Design — orientiert am Boese-Blog
   Wird NACH mh.css geladen. Rein optisch, additiv.
   Zuordnung der Webflow-Klassen zu den Boese-Bausteinen:
     .ct--blog      -> .article-wrap   (Raster mit Inhaltsverzeichnis links)
     .cmp--inhalt   -> .toc           (mitlaufend, aktive Position markiert)
     .cmp--blog     -> .article
     .h--xl.blog    -> .article h1
     .h2--blog      -> .article h2
     .txt--blog     -> .article p
     .cmp--bloglist -> .article ul
     .mh-faq-item   -> .article-faq__item
     .mh-post-cta   -> .article-cta   (neu, gab es bei MAHO nicht)
     .cmp--relevant -> .related-card
   ============================================================ */

/* ---------- 1. Artikel-Raster ---------- */
.sc--blog .ct--blog{
  display:grid !important;
  grid-template-columns:220px minmax(0,1fr);
  gap:clamp(40px,5vw,72px);
  width:100% !important;
  max-width:1020px !important;
  margin:0 auto !important;
  padding:clamp(40px,5vw,80px) 32px !important;
  flex-direction:row !important;
  align-items:start;
}
.sc--blog .cmp--blog{
  width:100% !important;
  max-width:none !important;
  min-width:0;
}
/* Unter 980px faellt das Raster auf eine Spalte zurueck. Ohne diese Regel behaelt
   die erste Spalte ihre 250px und der Artikel wird auf wenige Pixel gequetscht. */
@media (max-width:980px){
  .sc--blog .ct--blog{
    grid-template-columns:minmax(0,1fr) !important;
    gap:28px;
    padding:32px 20px !important;
    max-width:none !important;
  }
}

/* ---------- 2. Inhaltsverzeichnis ---------- */
@media (min-width:981px){
  .sc--blog .cmp--inhalt{
    position:sticky;
    top:100px;
    align-self:start;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    max-height:none !important;
    background:transparent !important;
    border:0 !important;
    padding:0 !important;
    box-shadow:none !important;
  }
  .sc--blog .mnu--content{
    display:flex !important;
    flex-direction:column;
    gap:4px;
    position:static !important;
    background:transparent !important;
    border-left:2px solid var(--mh-line);
    padding:0 !important;
    overflow:visible !important;
  }
}
.sc--blog .h--t{
  font-size:12px !important;
  font-weight:700 !important;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mh-pink) !important;
  line-height:1.4 !important;
  margin:0 0 18px !important;
}
.sc--blog .lk--inhalt{
  padding:8px 12px !important;
  font-size:14px !important;
  line-height:1.45 !important;
  color:var(--mh-ink-2) !important;
  border-left:2px solid transparent;
  margin-left:-2px;
  transition:color 180ms ease, border-color 180ms ease;
}
.sc--blog .lk--inhalt:hover{
  color:var(--mh-pink) !important;
  text-shadow:none !important;
}
.sc--blog .lk--inhalt.is-active{
  color:var(--mh-pink) !important;
  font-weight:600;
  border-left-color:var(--mh-pink);
}

/* ---------- 3. Typografie ---------- */
.sc--blog .h--xl.blog{
  font-size:clamp(32px,4vw,48px) !important;
  line-height:1.1 !important;
  font-weight:800 !important;
  letter-spacing:-.02em;
  color:var(--mh-ink) !important;
  margin:0 0 24px !important;
}
.sc--blog .h2--blog{
  font-size:clamp(24px,2.6vw,32px) !important;
  line-height:1.2 !important;
  font-weight:800 !important;
  letter-spacing:-.01em;
  color:var(--mh-ink) !important;
  margin:48px 0 18px !important;
  scroll-margin-top:96px;
}
.sc--blog .h2--blog._1{margin-top:0 !important}
.sc--blog h3{
  font-size:clamp(18px,1.6vw,21px);
  font-weight:700;
  color:var(--mh-ink);
  margin:28px 0 12px;
}
.sc--blog .txt--blog{
  font-size:17px !important;
  line-height:1.75 !important;
  color:var(--mh-ink-2) !important;
  letter-spacing:0 !important;
  margin:0 0 16px !important;
}
.sc--blog .txt--blog strong{color:var(--mh-ink); font-weight:600}
.sc--blog .txt--blog a,
.sc--blog .cmp--bloglist a{
  color:var(--mh-pink);
  text-decoration:underline;
  text-decoration-color:rgba(255,0,195,.3);
  text-underline-offset:3px;
  transition:color 180ms ease, text-decoration-color 180ms ease;
}
.sc--blog .txt--blog a:hover,
.sc--blog .cmp--bloglist a:hover{
  color:var(--mh-pink-2);
  text-decoration-color:var(--mh-pink-2);
}

/* ---------- 4. Aufzählungen ---------- */
.sc--blog .cmp--bloglist{
  padding-left:24px !important;
  margin:0 0 20px !important;
  font-size:17px;
  line-height:1.7;
  color:var(--mh-ink-2);
}
.sc--blog .cmp--bloglist > li{
  margin:0 0 10px !important;
  font-size:17px !important;
  line-height:1.7 !important;
  color:var(--mh-ink-2) !important;
}
.sc--blog .cmp--bloglist > li::marker{color:var(--mh-pink)}
.sc--blog ol.cmp--bloglist > li::marker{color:var(--mh-pink); font-weight:600}
.sc--blog .cmp--bloglist > li strong{color:var(--mh-ink); font-weight:600}

/* ---------- 5. FAQ ---------- */
.sc--blog .mh-blog-faq{margin-top:56px}
.sc--blog .mh-blog-faq .mh-faq-item{
  background:#fff;
  border:1px solid var(--mh-line);
  border-radius:14px;
  margin:0 0 12px;
  padding:0;
  overflow:hidden;
  transition:border-color 180ms ease, box-shadow 180ms ease;
}
.sc--blog .mh-blog-faq .mh-faq-item[open]{
  border-color:var(--mh-pink);
  box-shadow:0 2px 8px rgba(15,27,45,.06);
}
.sc--blog .mh-blog-faq .mh-faq-item summary{
  padding:20px 24px !important;
  list-style:none;
  cursor:pointer;
  display:grid;
  grid-template-columns:1fr 22px;
  align-items:center;
  gap:16px;
  font-size:17px !important;
  font-weight:600 !important;
  line-height:1.5 !important;
  color:var(--mh-ink);
}
.sc--blog .mh-blog-faq .mh-faq-item summary::-webkit-details-marker{display:none}
.sc--blog .mh-blog-faq .mh-faq-item summary::after{
  content:"";
  width:22px; height:22px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff00c3' stroke-width='2.4' stroke-linecap='round'><line x1='12' y1='5' x2='12' y2='19'/><line x1='5' y1='12' x2='19' y2='12'/></svg>");
  background-size:contain;
  background-repeat:no-repeat;
  transition:transform 200ms ease;
}
.sc--blog .mh-blog-faq .mh-faq-item[open] summary::after{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff00c3' stroke-width='2.4' stroke-linecap='round'><line x1='5' y1='12' x2='19' y2='12'/></svg>");
}
.sc--blog .mh-blog-faq .mh-faq-item > p{
  padding:0 24px 20px !important;
  margin:0 !important;
  color:var(--mh-ink-2);
  font-size:15px !important;
  line-height:1.7 !important;
}

/* ---------- 6. Abschluss-CTA ---------- */
/* Farbschema wie das Kopfband des Blogposts (.sc--bloghead .cmp--bread):
   Navy-Verlauf, Pink-Schimmer oben rechts, Teal unten links.
   Die Radien sind kleiner und die Schimmer etwas kraeftiger als im Band,
   damit die Farbe auf der kleineren Flaeche noch traegt. */
.mh-post-cta{
  margin:56px 0 0;
  padding:36px;
  border-radius:22px;
  text-align:center;
  color:#fff;
  background:
    radial-gradient(620px 280px at 85% 12%, rgba(255,0,195,0.38) 0%, transparent 70%),
    radial-gradient(480px 240px at 8% 92%, rgba(3,214,174,0.26) 0%, transparent 70%),
    linear-gradient(180deg, var(--mh-navy) 0%, var(--mh-navy-2,#011627) 100%);
  box-shadow:0 24px 50px rgba(2,28,60,.28);
}
.mh-post-cta h2{
  color:#fff !important;
  font-size:clamp(22px,2.4vw,28px) !important;
  line-height:1.25 !important;
  font-weight:800 !important;
  letter-spacing:-.01em;
  margin:0 0 12px !important;
}
.mh-post-cta p{
  color:rgba(255,255,255,.82) !important;
  font-size:16px !important;
  line-height:1.6 !important;
  margin:0 auto 24px !important;
  max-width:52ch;
}
/* Knopf bleibt der Marken-Knopf wie in der Kopfnavigation — Pink auf Navy */
.mh-post-cta .mh-btn{font-weight:700}
.mh-post-cta .mh-btn:hover{transform:translateY(-2px)}
@media (max-width:640px){.mh-post-cta{padding:30px 22px}}

/* ---------- 7. „Weitere Beiträge" ---------- */
.sc--main:has(.lyt--relevant),
.sc--main.mh-related{
  background:var(--mh-bg-2);
  padding:clamp(64px,7vw,96px) 0 !important;
}
.mh-related .h--relevant,
.sc--main:has(.lyt--relevant) .h--relevant{
  text-align:center;
  font-size:clamp(24px,2.8vw,36px) !important;
  line-height:1.2 !important;
  font-weight:800 !important;
  color:var(--mh-ink) !important;
  letter-spacing:-.015em;
  text-indent:0 !important;
  margin:0 auto 48px !important;
  max-width:720px;
}
.lyt--relevant{
  max-width:1240px;
  margin:0 auto !important;
  padding:0 32px;
  background:transparent !important;
  /* Webflow gibt dem Slider height:300px. Als Raster braucht er die Hoehe des Inhalts,
     sonst laeuft er auf Mobil (3 Reihen, 919px) unter den Footer. */
  height:auto !important;
  min-height:0 !important;
}
.lyt--relevant .cmp--slidermask{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
  max-width:none !important;
  margin:0 !important;
  transform:none !important;
  overflow:visible !important;
  height:auto !important;
}
.lyt--relevant .lyt--slide{
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
  transform:none !important;
  position:static !important;
  left:auto !important;
  right:auto !important;
  float:none !important;
}
.lyt--relevant .cmp--relevant{
  display:flex !important;
  flex-direction:column;
  height:100%;
  gap:0 !important;
  max-width:none !important;
  margin:0 !important;
  background:#fff;
  border:1px solid var(--mh-line);
  border-radius:14px;
  overflow:hidden;
  text-decoration:none;
  transition:transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease !important;
}
.lyt--relevant .cmp--relevant:hover{
  transform:translateY(-3px) scale(1.02) !important;
  box-shadow:0 8px 28px rgba(15,27,45,.10);
  border-color:var(--mh-pink);
}
.lyt--relevant .img--relevant{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  object-position:50% 50%;
  display:block;
  margin:0 !important;
  border-radius:0 !important;
}
/* Nur die Titelbilder im neuen Stil (Schrift und Logo unten) werden unten ausgerichtet.
   Bei den aelteren Bildern sitzt die Schrift oben — die wuerde sonst abgeschnitten. */
.lyt--relevant .img--relevant.mh-crop-bottom{object-position:50% 100%}
.lyt--relevant .txt--relevant{
  padding:20px 22px 24px !important;
  margin:0 !important;
  font-size:17px !important;
  font-weight:700 !important;
  line-height:1.35 !important;
  color:var(--mh-ink) !important;
  transition:color 180ms ease;
}
.lyt--relevant .cmp--relevant:hover .txt--relevant{color:var(--mh-pink) !important}
.cmp--slidenav,.cmp--slidericons{display:none !important}
@media (max-width:980px){
  .lyt--relevant .cmp--slidermask{grid-template-columns:1fr}
  .lyt--relevant{padding:0 20px}
}

/* ---------- 8. Hinweisboxen exakt auf Boeses .callout ----------
   mh.css setzt Label 13px und Zeilenhoehe 26px; Boese hat 12px und 1.65 (=26,4px). */
.sc--blog .mh-info .mh-info-label{font-size:12px !important}
.sc--blog .mh-info p,
.sc--blog .mh-info .mh-info-body{font-size:16px !important; line-height:1.65 !important}

/* ---------- 9. Inhaltsverzeichnis auf Mobil ----------
   Webflows Slide-in-Panel (data-animation="over-right") oeffnet auf Mobil nicht:
   das Skript setzt transform:translateX(280px) — die geschlossene Position — und
   schaltet nur display um, ohne je auf translateX(0) zu gehen. Zusaetzlich bekommt
   das Panel height:19418px, also die gesamte Artikellaenge. Der Fehler steckt schon
   im Bestand von April 2026, ist also nicht neu.
   Statt die Animation zu reparieren steht das Inhaltsverzeichnis auf Mobil als feste
   Box im Fluss — genau wie .toc bei Boese unter 980px. Der schwebende Knopf entfaellt.
   Die !important sind noetig, weil Webflow height/transform inline setzt. */
@media (max-width:980px){
  .sc--blog .cmp--inhalt{
    position:static !important;
    width:auto !important; min-width:0 !important; max-width:none !important;
    max-height:none !important; height:auto !important;
    background:var(--mh-bg-2) !important;
    border:1px solid var(--mh-line) !important;
    border-radius:14px !important;
    padding:20px 24px !important;
    margin:0 0 24px !important;
    box-shadow:none !important;
    transform:none !important;
  }
  .sc--blog .mnu--content{
    display:flex !important; flex-direction:column; gap:0;
    position:static !important;
    width:auto !important; min-width:0 !important; max-width:none !important;
    height:auto !important; max-height:none !important;
    background:transparent !important; background-image:none !important;
    border-radius:0 !important; padding:0 !important;
    transform:none !important; transition:none !important;
    overflow:visible !important; box-shadow:none !important;
  }
  .sc--blog .mnu--content .lk--inhalt{
    color:var(--mh-ink-2) !important;
    font-size:15px !important;
    line-height:1.45 !important;
    padding:9px 0 !important;
    border-bottom:1px solid var(--mh-line) !important;
    border-left:0 !important;
    margin-left:0 !important;
  }
  .sc--blog .mnu--content .lk--inhalt:last-child{border-bottom:0 !important}
  .sc--blog .mnu--content .lk--inhalt:hover,
  .sc--blog .mnu--content .lk--inhalt.is-active{
    color:var(--mh-pink) !important; font-weight:600; padding-left:0 !important;
  }
  /* Webflow blendet die Ueberschrift auf Mobil aus — bei Boese steht sie in der Box */
  .sc--blog .cmp--inhalt .h--t{display:block !important; margin:0 0 14px !important}
  .sc--blog .btn--content{display:none !important}
}