/* rmd-kadence-child/assets/css/magazin-single.css
   Einzelartikel (single.php) nach Design-Handoff "Beitrags-Hero + Sidebar":
   Zurueck-Link -> Titelbild (21:9) -> 2-Spalten [Artikel | sticky Sidebar: Inhalts-Rail + Beratungs-
   Karte]. Farben ueber Theme-Tokens, Masse aus dem Handoff. Verwandte Beitraege = newsroom-Block. */

.rmd-post{padding:var(--space-10) 0 var(--space-section);color:var(--color-text)}
.rmd-post a{text-decoration:none;color:inherit}

/* Zurueck-Link */
.rmd-post__back{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:var(--fw-semibold);font-size:14px;line-height:1;color:var(--color-headline)}
.rmd-post__back:hover{text-decoration:underline;text-decoration-color:var(--color-signal);text-decoration-thickness:2px;text-underline-offset:5px}
.rmd-post__back svg{width:16px;height:16px}

/* Titelbild */
/* Container passt sich dem Bild an (kein fixes Verhaeltnis) -> Bild fuellt exakt, kein Zuschnitt,
   keine leeren Raender. Nur der Platzhalter (ohne Bild) bekommt eine 16:9-Form. */
.rmd-post__hero{margin-top:var(--space-6);border-radius:28px;overflow:hidden;background:var(--color-surface)}
.rmd-post__hero img{width:100%;height:auto;display:block}
.rmd-post__ph{width:100%;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;padding:var(--space-6);text-align:center;font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-xl);color:var(--color-text-muted)}

/* Layout */
.rmd-post__grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:80px;margin-top:var(--space-12);align-items:start}
.rmd-post__main{min-width:0}

/* Kopf */
.rmd-post__badge{display:inline-flex;background:var(--color-signal);color:var(--color-on-signal);font-family:var(--font-head);font-weight:var(--fw-bold);font-size:12px;line-height:1;letter-spacing:.08em;text-transform:uppercase;padding:8px 14px;border-radius:var(--radius-pill)}
.rmd-post__title{margin:20px 0 0;font-family:var(--font-head);font-size:56px;font-weight:var(--fw-bold);letter-spacing:-.03em;line-height:1.05;color:var(--color-headline)}
.rmd-post__lead{margin:20px 0 0;font-family:var(--font-body);font-size:20px;line-height:1.35;color:var(--color-text-muted)}
.rmd-post__meta{display:flex;align-items:center;gap:14px;margin-top:28px}
.rmd-post__avatar{width:44px;height:44px;border-radius:var(--radius-pill);overflow:hidden;background:var(--color-surface);flex:none;display:flex;align-items:center;justify-content:center}
.rmd-post__avatar img{width:100%;height:100%;object-fit:cover;display:block}
.rmd-post__ini{font-family:var(--font-head);font-weight:var(--fw-bold);font-size:13px;color:var(--color-headline)}
.rmd-post__author{font-family:var(--font-head);font-weight:var(--fw-semibold);font-size:14px;line-height:1.2;color:var(--color-headline)}
.rmd-post__date{margin-top:3px;font-family:var(--font-body);font-size:14px;color:var(--color-text-muted)}

/* Prose */
.rmd-post__prose{border-top:1px solid var(--color-hairline);margin-top:32px;padding-top:32px;font-family:var(--font-body);font-size:18px;line-height:1.55;color:var(--color-text)}
.rmd-post__prose > *:first-child{margin-top:0}
.rmd-post__prose p{margin:16px 0 0;text-wrap:pretty}
.rmd-post__prose h2{margin:48px 0 0;font-family:var(--font-head);font-size:29px;font-weight:var(--fw-bold);letter-spacing:-.01em;line-height:1.15;color:var(--color-headline);scroll-margin-top:calc(var(--rmd-header-h,80px) + var(--space-6))}
.rmd-post__prose h3{margin:32px 0 0;font-family:var(--font-head);font-size:22px;font-weight:var(--fw-semibold);line-height:1.2;color:var(--color-headline);scroll-margin-top:calc(var(--rmd-header-h,80px) + var(--space-6))}
.rmd-post__prose ul,.rmd-post__prose ol{margin:16px 0 0;padding-left:24px;display:flex;flex-direction:column;gap:10px}
.rmd-post__prose li{line-height:1.5}
/* Feature-/Icon-Listen (ul) einheitlich mit dezentem Haken statt Standard-Punkt (wie .rmd-c-usps).
   Nur ul (ol behaelt Nummern). Haken = Maske in Headline-Farbe, tokengesteuert. */
.rmd-post__prose ul{list-style:none;padding-left:0}
.rmd-post__prose ul>li{position:relative;padding-left:30px}
.rmd-post__prose ul>li::before{content:"";position:absolute;left:1px;top:.28em;width:18px;height:18px;background-color:var(--color-headline);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
/* Inline-Textlinks in unserem Stil (Buttons ausgenommen - sie tragen .rmd-c-btn). */
.rmd-post__prose a:not(.rmd-c-btn){color:var(--color-headline);text-decoration:underline;text-decoration-color:var(--color-signal);text-decoration-thickness:2px;text-underline-offset:3px}
.rmd-post__prose a:not(.rmd-c-btn):hover{color:var(--color-signal-hover)}
/* Standalone-Links = fruehere Elementor-Buttons -> unsere Buttons (rmd_article_buttonize). */
.rmd-post__prose .rmd-c-btn{text-decoration:none}
.rmd-post__prose .rmd-prose__btnp{margin:24px 0 0}
.rmd-post__prose .rmd-prose__btnrow{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 0}
.rmd-post__prose strong{font-weight:var(--fw-bold);color:var(--color-headline)}
/* Nummerierte Tipps: Signal-Badge mit Nummer vor der Tipp-Ueberschrift. Die Ueberschrift wird zum Flex-
   Container, damit bei Umbruch die Folgezeilen sauber neben dem Badge haengen (kein Ruecksprung unter den
   Badge). :has() zielt nur auf nummerierte H2. margin-top zentriert den Badge optisch auf der 1. Zeile. */
.rmd-post__prose h2:has(> .rmd-prose__tipnum){display:flex;align-items:flex-start;gap:14px}
.rmd-post__prose h2 .rmd-prose__tipnum{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;margin-top:calc((1.15em - 38px) / 2);border-radius:var(--radius-pill);background:var(--color-signal);color:var(--color-on-signal);font-family:var(--font-head);font-size:19px;font-weight:var(--fw-bold);line-height:1;flex:0 0 auto}
/* Tipp-Callout (rmd_article_wrap_tips): hervorgehobene Box mit Gluehbirne + Signal-Akzent links. */
.rmd-prose__tip{margin:32px 0 0;background:var(--color-surface);border:1px solid var(--color-hairline);border-left:3px solid var(--color-signal);border-radius:var(--radius);padding:var(--space-6)}
.rmd-prose__tip-label{display:flex;align-items:center;gap:10px;margin:0;font-family:var(--font-head);font-weight:var(--fw-bold);font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-headline)}
.rmd-prose__tip-label .rmd-icon{width:20px;height:20px;color:var(--color-signal);flex:0 0 auto}
.rmd-prose__tip-body{margin-top:var(--space-3);font-size:17px;line-height:1.55}
.rmd-prose__tip-body>*:first-child{margin-top:0}
.rmd-prose__tip-body p{margin:12px 0 0}
.rmd-prose__tip-body ul{margin-top:12px}
/* Fazit-Abschluss (rmd_article_tips C): ruhige Zusammenfassungs-Box mit dunklem Haken-Medaillon -
   bewusst OHNE Gelb, damit sie sich vom Tipp-Callout (Signal) klar als "Abschluss" absetzt. */
.rmd-post__prose .rmd-prose__fazit{margin:var(--space-10) 0 0;background:var(--color-surface);border:1px solid var(--color-hairline);border-radius:var(--radius-lg);padding:var(--space-6)}
.rmd-post__prose .rmd-prose__fazit>h2{display:flex;align-items:center;gap:16px;margin:0 0 6px}
.rmd-prose__fazit-badge{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--radius-pill);background:var(--color-text);color:#fff}
.rmd-prose__fazit-badge .rmd-icon{width:24px;height:24px;stroke-width:2.4}
.rmd-post__prose .rmd-prose__fazit>*:last-child{margin-bottom:0}
/* "Unsere X-leuchten"-Block am Beitragsende als Reihe unserer cat-tile-Karten (Foto-Variante).
   rmd_article_arealinks_replace ersetzt die frueheren nackten Ueberschriften + Ghost-Buttons. */
.rmd-article-arealinks{margin-top:var(--space-12)}
.rmd-article-arealinks__head h2{margin-top:0}
.rmd-article-arealinks__head p{margin-top:var(--space-3);color:var(--color-text-muted)}
.rmd-article-arealinks__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--space-5);margin-top:var(--space-6)}
/* Foto-Kacheln (statt Freisteller auf Grau): Bild fuellt das Feld; Prose-Bildstil zuruecksetzen. */
.rmd-article-arealinks .rmd-c-cat-tile__m{aspect-ratio:16/11}
.rmd-article-arealinks .rmd-c-cat-tile__m img{object-fit:cover;padding:0;margin:0;border-radius:0;width:100%;height:100%}
/* Karte ist ein <a> im Prose -> Prose-Linkstil (Unterstrich/Signalfarbe) hier ausschalten. */
.rmd-post__prose .rmd-article-arealinks a,
.rmd-post__prose .rmd-article-arealinks a:hover{text-decoration:none;color:inherit}
/* Produkt-Promo ("Zur <Linie>") -> echte Produktkarte (tile), auf Kartenbreite begrenzt (wie Kategorie). */
.rmd-article-product{margin:var(--space-6) 0 0;max-width:360px}
.rmd-post__prose .rmd-article-product a,
.rmd-post__prose .rmd-article-product a:hover{text-decoration:none;color:inherit}
.rmd-post__prose .rmd-article-product img{margin:0;border-radius:0}
.rmd-post__prose img{max-width:100%;height:auto;border-radius:var(--radius);display:block;margin:28px 0 0}
.rmd-post__prose figure{margin:28px 0 0}
.rmd-post__prose figcaption{font-size:14px;color:var(--color-text-muted);margin-top:8px}
.rmd-post__prose blockquote{margin:28px 0 0;padding:16px 24px;border-left:3px solid var(--color-signal);background:var(--color-surface);border-radius:0 var(--radius) var(--radius) 0;font-size:20px;color:var(--color-headline)}
.rmd-post__prose blockquote p{margin:0}
/* Tabellen: Wrapper (rmd_article_processed) macht sie mobil scrollbar + gibt runde Ecken/Rahmen;
   Kopfzeile abgesetzt. Rohe <table> koennen sonst die Seite sprengen. */
.rmd-prose__tablewrap{margin:28px 0 0;overflow-x:auto;border:1px solid var(--color-hairline);border-radius:var(--radius)}
.rmd-post__prose table{width:100%;border-collapse:collapse;font-size:16px}
.rmd-prose__tablewrap>table{margin:0}
.rmd-post__prose th,.rmd-post__prose td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--color-hairline)}
.rmd-post__prose tr:last-child td{border-bottom:0}
.rmd-post__prose th{font-family:var(--font-head);font-weight:var(--fw-bold);color:var(--color-headline);background:var(--color-surface)}

/* Sidebar - sticky UNTER dem klebrigen Header (sonst rutscht das "Inhalt"-Label darunter). */
.rmd-post__aside{position:sticky;top:calc(var(--rmd-header-h,80px) + var(--space-8))}
.rmd-post__toclabel{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-weight:var(--fw-bold);font-size:12px;line-height:1;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted)}
.rmd-post__toclabel::before{content:"";width:18px;height:3px;background:var(--color-signal);flex:none}
.rmd-post__toc{display:flex;flex-direction:column;margin-top:18px}
.rmd-post__toc a{display:block;padding:9px 0 9px 16px;border-left:2px solid var(--color-hairline);font-family:var(--font-body);font-weight:var(--fw-regular);font-size:14px;line-height:1.4;color:var(--color-text-muted);transition:color .15s ease,border-color .15s ease}
.rmd-post__toc a:hover{color:var(--color-headline)}
.rmd-post__toc a.is-active{border-left-color:var(--color-signal);color:var(--color-headline);font-weight:var(--fw-semibold)}

/* Beratungs-Karte */
.rmd-post__card{margin-top:36px;background:var(--color-surface);border-radius:20px;padding:26px}
.rmd-post__card h4{margin:0;font-family:var(--font-head);font-size:18px;font-weight:var(--fw-semibold);line-height:1.3;color:var(--color-headline)}
.rmd-post__card p{margin:10px 0 0;font-family:var(--font-body);font-size:14px;line-height:1.55;color:var(--color-text-muted)}
.rmd-post__cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;box-sizing:border-box;margin-top:18px;height:44px;border-radius:var(--radius-pill);background:var(--btn-dark-bg);color:#fff!important;font-family:var(--font-head);font-weight:var(--fw-semibold);font-size:14px;line-height:1;transition:background .15s ease}
.rmd-post__cta:hover{background:var(--btn-dark-bg-hover)}
.rmd-post__cta svg{width:16px;height:16px;transition:transform .18s ease}
.rmd-post__cta:hover svg{transform:translateX(3px)}

/* Empfohlene Produkte: Slider (>=2) bzw. Einzel-Kachel (=1) - gleiche Kacheln wie "Leuchten fuer". */
.rmd-article-products{margin-top:var(--space-16)}
.rmd-article-products__head{margin-bottom:var(--space-8)}
.rmd-article-products__title{font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-2xl);line-height:1.2;letter-spacing:-.01em;color:var(--color-headline);margin:var(--space-2) 0 0;text-wrap:balance}
.rmd-article-products__one{max-width:380px}

/* Abschluss-CTA-Band (v. a. fuer Mobil, wo die Sidebar-Karte entfaellt) + verwandte Beitraege */
.rmd-article-cta{margin-top:var(--space-16)}
.rmd-article-cta__inner{background:var(--color-surface);border-radius:var(--radius-card);padding:var(--space-10);display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);flex-wrap:wrap}
.rmd-article-cta__txt{flex:1 1 380px;min-width:0}
.rmd-article-cta__h{font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-2xl);line-height:1.2;letter-spacing:-.01em;color:var(--color-headline);margin:var(--space-2) 0 0;text-wrap:balance}
.rmd-article-cta__lead{font-family:var(--font-body);font-size:var(--fs-md);color:var(--color-text-muted);margin:var(--space-3) 0 0;max-width:52ch}
.rmd-article-cta__actions{display:flex;gap:var(--space-3);flex-wrap:wrap}

/* Bilderreihen im Prose (rmd_article_group_images): Basis .rmd-c-slider* kommt aus blocks.css
   (Desktop 2-up-Grid via --mobile bzw. Slider ab 4 Bildern; Handy immer Slider mit Pfeilen).
   Hier nur die Bild-Optik im Prose + Abstand. */
.rmd-post__prose .rmd-prose__imgslider{margin-top:32px}
.rmd-prose__imgslider .rmd-c-slider__slide figure{margin:0}
.rmd-prose__imgslider .rmd-c-slider__slide img{width:100%;height:auto;display:block;margin:0;border-radius:var(--radius)}

@media(max-width:1024px){
  .rmd-post{padding:var(--space-8) 0 var(--space-16)}
  .rmd-post__grid{grid-template-columns:1fr;gap:0;margin-top:var(--space-8)}
  .rmd-post__aside{display:none}
  .rmd-post__title{font-size:36px;font-weight:var(--fw-semibold)}
  .rmd-post__hero{border-radius:20px}
  .rmd-post__prose{font-size:16px}
  .rmd-post__prose h2{font-size:21px;font-weight:var(--fw-semibold)}
  /* Badge proportional zur kleineren Ueberschrift. */
  .rmd-post__prose h2:has(> .rmd-prose__tipnum){gap:11px}
  .rmd-post__prose h2 .rmd-prose__tipnum{width:30px;height:30px;font-size:16px;margin-top:calc((1.15em - 30px) / 2)}
}
/* Slider-Pfeile gehoeren nur zum Handy-Slider: ab Tablet ist die Sektion wieder ein Grid -> Pfeile weg.
   (Steht VOR der 600px-Query, damit die Anzeige-Regel dort bei gleicher Spezifitaet gewinnt.) */
.rmd-article-related .rmd-c-slider__nav{display:none}

@media(max-width:600px){
  .rmd-post__title{font-size:28px;line-height:1.12}
  .rmd-post__lead{font-size:16px}
  .rmd-article-cta__inner{padding:var(--space-6)}
  .rmd-article-cta__actions{width:100%}
  .rmd-article-cta__actions .rmd-c-btn{flex:1 1 auto;justify-content:center}

  /* "Das koennte Sie auch interessieren" wird am Handy zum wischbaren Slider (statt gestapeltem Grid).
     Gleiche Karten, gleiche Notch/Signal-Optik - nur horizontal mit Snap + angeschnittener Nachbarkarte.
     Full-Bleed: Container-Padding (var(--space-6)) aufheben und als Scroll-Padding zurueckgeben. */
  .rmd-article-related .rmd-c-newsroom__grid{
    display:flex;
    grid-template-columns:none;
    gap:var(--space-4);
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    margin-left:calc(-1 * var(--space-6));
    margin-right:calc(-1 * var(--space-6));
    padding:0 var(--space-6) 2px;
    scroll-padding-left:var(--space-6);
    scrollbar-width:none;
  }
  .rmd-article-related .rmd-c-newsroom__grid::-webkit-scrollbar{display:none}
  .rmd-article-related .rmd-c-newsroom__card{
    flex:0 0 82%;
    scroll-snap-align:start;
  }
  /* Hover-Lift auf Touch weglassen (bleibt sonst nach dem Wischen "haengen"). */
  .rmd-article-related .rmd-c-newsroom__card:hover{transform:none;box-shadow:var(--shadow-md)}
  /* Unsere Slider-Pfeile mittig unter den Slider (Nav-Verdrahtung via blocks.js). */
  .rmd-article-related .rmd-c-slider__nav{display:flex;margin-top:var(--space-5)}

  /* Fazit-Box am Handy etwas kompakter, kleineres Medaillon. */
  .rmd-post__prose .rmd-prose__fazit{padding:var(--space-5)}
  .rmd-post__prose .rmd-prose__fazit>h2{gap:12px}
  .rmd-prose__fazit-badge{width:38px;height:38px}
  .rmd-prose__fazit-badge .rmd-icon{width:21px;height:21px}
}
@media(prefers-reduced-motion:reduce){
  .rmd-post__toc a,.rmd-post__cta,.rmd-post__cta svg{transition:none}
}