/* =========================================================
   BG Rein – Einzelbeitrag „Magazin"
   Native Blöcke + WP-Lightbox, Kategoriefarbe via --cat
   (.cat-<slug>-Regeln werden dynamisch per PHP injiziert)
   ========================================================= */
:root{
  --green:#005959; --ink:#000; --text:#000; --muted:#000; --soft:#000;
  --line:#E6E6E6; --bg-soft:#F8F9FA; --paper:#fff;
  --serif:var(--font-ui); --display:var(--font-display);
  --sans:var(--font-ui); /* 3 Schriften, siehe style.css (1.9.4) */
  --cat:#8B6F47; --maxw:1200px;
}

.beitrag-page img{display:block;max-width:100%}
.beitrag-page a{color:inherit}

/* Wrapper / Spalten */
.mag{max-width:var(--maxw);margin:0 auto;padding:54px 50px 0}
/* Header-Container gleich breit wie Titelbild/Text (1200px) → gleiche linke Kante.
   Nur der Inhalt (Titel, Auszug …) bleibt für die Lesbarkeit auf 860px begrenzt. */
.mag-header{max-width:var(--maxw)}
.mag-header > *{max-width:860px}
.mag-header .article-title{margin:18px 0}
.lead-full{max-width:var(--maxw);margin:40px auto 0;padding:0 50px}
.lead-full .lead-figure img{width:100%;height:auto;max-height:520px;object-fit:cover;border-radius:14px}
.lead-figure{margin:0}
.lead-figure figcaption,.figcaption{font-family:var(--sans);font-size:13px;color:var(--muted);margin-top:10px}
.lead-meta{display:flex;align-items:center;justify-content:flex-start;gap:18px;flex-wrap:wrap;margin-top:16px}
.lead-meta .lm-info{font-family:var(--sans);font-size:14px;color:var(--muted);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lead-meta .lm-info strong{color:var(--soft);font-weight:600}
.lead-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--muted);opacity:.6}
/* Spalte 340px (statt 320px): Instagram-Embeds brauchen min. 326px Breite. */
.mag-body{max-width:var(--maxw);margin:50px auto 0;padding:0 50px;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:60px;align-items:start}
/* Keine „Mehr aus …"-Box → Sidebar-Spalte komplett weglassen (keine Lücke). */
.mag-body--solo{grid-template-columns:minmax(0,1fr)}
.mag-aside{position:sticky;top:90px;display:flex;flex-direction:column;gap:26px}
/* Instagram-Embed in der rechten Spalte: an die Spaltenbreite anpassen, der
   Flex-Gap der Sidebar erledigt den Abstand (Inline-Margins überschreiben). */
.mag-aside .ig-embed{margin:0!important;max-width:100%!important}
.mag-aside .ig-embed .instagram-media{max-width:100%!important}

/* Breadcrumb / Badge / Titel / Meta */
.breadcrumb{font-family:var(--sans);font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.breadcrumb a{text-decoration:none;transition:color .2s}
.breadcrumb a:hover{color:var(--cat-ink,#6f5638)}
.breadcrumb .sep{opacity:.5}
.breadcrumb .current{color:var(--soft)}
.cat-badge{display:inline-block;padding:7px 18px;border-radius:30px;font-family:var(--sans);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;background:var(--cat);color:var(--cat-text,#fff)}
.article-title{font-family:var(--display);font-weight:600;font-size:clamp(2.2rem,4.4vw,3.6rem);line-height:1.08;color:var(--ink);letter-spacing:.3px;text-wrap:balance}

/* Fließtext: native Blöcke in .entry-content erben Magazin-Look */
.prose{font-family:var(--serif);font-size:var(--fs-text);color:#000;line-height:var(--lh-text)} /* Skala style.css (1.9.7) */
.entry-content > p:first-of-type{font-size:var(--fs-lead);color:var(--ink);line-height:1.65}
.entry-content p{margin-bottom:1.3em}
.entry-content h2{font-family:var(--display);font-weight:600;font-size:var(--fs-h2);color:var(--ink);margin:2.4em 0 .6em;line-height:1.2}
.entry-content h3{font-family:var(--display);font-weight:600;font-size:var(--fs-h3);color:var(--ink);margin:1.8em 0 .5em}
.entry-content ul,.entry-content ol{margin:0 0 1.4em 1.2em}
.entry-content li{margin-bottom:.6em}
.entry-content li::marker{color:var(--cat-ink,#6f5638)}
.entry-content strong{color:var(--ink)}
.entry-content a:not(.btn){color:var(--cat-ink,#6f5638);text-underline-offset:3px}

/* Zitat-Block → Pull-Quote */
.entry-content .wp-block-quote{border-left:4px solid var(--cat);padding:6px 0 6px 28px;margin:2.4em 0;font-style:italic}
.entry-content .wp-block-quote p{font-family:var(--display);font-weight:500;font-size:1.7rem;line-height:1.4;color:var(--ink);margin:0}
.entry-content .wp-block-quote cite,.entry-content .wp-block-quote .wp-block-quote__citation{display:block;margin-top:14px;font-family:var(--sans);font-size:14px;font-style:normal;color:var(--muted);font-weight:600}

/* Native Galerie → responsives Auto-Fit-Raster (WP-Lightbox bleibt aktiv).
   Kacheln min. 240px breit, füllen den verfügbaren Platz selbstständig. Die
   feste Spaltenzahl (.columns-2/.columns-3) wird bewusst überschrieben. */
.entry-content .wp-block-gallery.has-nested-images,
.entry-content .wp-block-gallery.columns-3.has-nested-images{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:3em 0}
/* Core setzt figure.wp-block-image per ID-Spezifität (:not(#individual-image))
   auf width:calc(33.33% …) – im Grid würde die Kachel dadurch auf ~1/3 der Zelle
   schrumpfen. Darum hier mit !important auf volle Zellbreite zwingen. */
.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image{margin:0;position:relative;overflow:hidden;border-radius:10px;aspect-ratio:4/3;background:#eee;width:auto!important;max-width:none!important;flex-basis:auto!important}
.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image:hover img{transform:scale(1.06)}
.entry-content .wp-block-gallery figcaption{font-family:var(--sans)}

/* „Breit" ausgerichtete Blöcke (z. B. Galerie) dürfen über die Lesespalte
   hinausragen. Nur auf großen Screens – darunter ist die Spalte eh 1-spaltig. */
@media (min-width:901px){
  /* Mit Sidebar: bis in den linken Seitenrand und den Spalten-Gap (ohne die
     Sidebar zu überlappen). */
  .entry-content .alignwide{
    margin-left:calc(-1 * clamp(0px,5vw,50px));
    margin-right:-60px;
    width:auto;
  }
  /* Ohne Sidebar (solo): volle Magazinbreite bis ~var(--maxw) ausnutzen. */
  .mag-body--solo .entry-content .alignwide{
    margin-left:calc(50% - 50vw + 50px);
    margin-right:calc(50% - 50vw + 50px);
    width:auto;
    max-width:var(--maxw);
  }
}

/* Echtes Instagram-Embed: zentrieren – Instagrams Inline-Margins überschreiben.
   Greift für Custom-HTML-Block, .ig-embed-Wrapper und den [ig]-Shortcode. */
.entry-content .instagram-media,
.entry-content .ig-embed,
.entry-content .wp-block-html .instagram-media{
  float:none !important;
  margin-left:auto !important;
  margin-right:auto !important;
  max-width:540px;
  width:100%;
}
.entry-content .ig-embed,
.entry-content .wp-block-html{display:block;text-align:initial}
.entry-content .ig-embed{margin-top:2.5em;margin-bottom:2.5em}

/* Buttons / Share */
.btn{display:inline-flex;align-items:center;gap:9px;padding:12px 24px;border-radius:30px;text-decoration:none;font-family:var(--sans);font-size:14px;font-weight:600;background:var(--cat);color:#fff;transition:all .25s;border:none;cursor:pointer}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.18)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn.ghost:hover{border-color:var(--cat);color:var(--cat-ink,#6f5638)}

/* Sidebar-Boxen */
.aside-box{border:1px solid var(--line);border-radius:16px;padding:22px}
.aside-box h4,.aside-box .aside-box__title{font-family:var(--sans);font-size:12px;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);margin-bottom:14px}
.mini-list a{display:block;text-decoration:none;padding:12px 0;border-top:1px solid var(--line)}
.mini-list a:first-of-type{border-top:none}
.mini-list .ml-cat{font-family:var(--sans);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--cat-ink,#6f5638)}
.mini-list .ml-title{font-family:var(--display);font-weight:600;font-size:1.15rem;color:var(--ink);line-height:1.2;margin-top:2px}

/* Weitere Beiträge */
.more-section{background:var(--bg-soft);margin-top:90px;padding:70px 50px}
.more-inner{max-width:var(--maxw);margin:0 auto}
.more-head{font-family:var(--display);font-weight:600;font-size:var(--fs-h2);color:var(--ink);margin-bottom:36px;display:flex;align-items:baseline;gap:16px}
.more-head a{margin-left:auto;font-family:var(--sans);font-size:14px;color:var(--cat-ink,#6f5638);text-decoration:none;font-weight:600}
.more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.more-card{background:#fff;border-radius:12px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:0 5px 22px rgba(0,0,0,.06);transition:all .35s;display:block}
.more-card:hover{transform:translateY(-8px);box-shadow:0 16px 40px rgba(0,0,0,.12)}
.more-card .mc-img{height:180px;background-size:cover;background-position:center}
.more-card .mc-body{padding:22px 24px 26px}
.more-card .mc-cat{font-family:var(--sans);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--cat-ink,#6f5638)}
.more-card .mc-title{font-family:var(--display);font-weight:600;font-size:var(--fs-h4);color:var(--ink);margin:6px 0 8px;line-height:1.2}
.more-card .mc-date{font-family:var(--sans);font-size:var(--fs-mini);color:var(--muted)}

/* Responsive */
@media (max-width:900px){
  .mag,.lead-full,.mag-body{padding-left:22px;padding-right:22px}
  .mag-body{grid-template-columns:1fr;gap:40px}
  .mag-aside{position:static}
}
@media (max-width:760px){
  .more-grid{grid-template-columns:1fr}
  .more-section{padding:50px 22px}
}
@media (max-width:440px){
  .entry-content .wp-block-gallery.has-nested-images,
  .entry-content .wp-block-gallery.columns-3.has-nested-images{grid-template-columns:1fr;gap:12px}
}
.aside-box .aside-box__title{margin-top:0;line-height:1.4;font-weight:inherit}