/* BLOOM YOUR ROOM · Blog (Übersicht + Artikel) · Design Version 3
 * nutzt Farben aus stil.css / stil-v2.css / stil-v3.css / seiten.css */

/* ---------- Übersicht ---------- */
.blogliste { padding: 0 0 clamp(72px, 9vw, 130px); }
.filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 auto clamp(40px, 5vw, 64px); }
.filter__knopf { appearance: none; border: 1px solid var(--linie); background: transparent; color: var(--text); border-radius: 999px;
  padding: 10px 20px; min-height: 42px; font: 700 .7rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
  transition: background .25s, border-color .25s, color .25s; }
.filter__knopf:hover { border-color: var(--salbei-mittel); background: var(--salbei-zart); }
.filter__knopf[aria-pressed="true"] { background: var(--taupe); border-color: var(--taupe); color: var(--creme); }

.beitraege--alle { list-style: none; margin: 0; padding: 0; row-gap: clamp(48px, 5vw, 72px); }
.beitrag { margin: 0; }
.beitrag .karte__marke { margin-bottom: .55rem; }
.beitrag h3 { margin-bottom: .45em; }
.beitrag__teaser { color: var(--text-leise); font-size: .98rem; line-height: 1.6; margin: 0; }
.blogliste__leer { text-align: center; color: var(--text-leise); margin: 2rem 0 0; }

/* ---------- Artikel ---------- */
.artikel { padding-top: clamp(48px, 7vw, 96px); }
.artikel__kopf { max-width: calc(52rem + 2 * var(--rand)); text-align: center; margin-bottom: clamp(32px, 4vw, 52px); }
.artikel__kopf .eyebrow { justify-content: center; }
.artikel__kopf .eyebrow::after { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .7; }
.artikel__kopf .eyebrow a { text-decoration: none; }
.artikel__kopf .eyebrow a:hover { text-decoration: underline; }
.artikel__kopf h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); line-height: 1.12; margin-bottom: .45em; text-wrap: balance; }
.artikel__meta { color: var(--text-leise); font-size: .9rem; letter-spacing: .04em; margin: 0; }

.artikel__bild { max-width: calc(1100px + 2 * var(--rand)); margin-bottom: clamp(40px, 5vw, 72px); }
.artikel__bild img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 40%; }

.artikel__text { max-width: calc(44rem + 2 * var(--rand)); font-size: 18px; line-height: 1.75; color: var(--text); }
.artikel__text > :first-child { margin-top: 0; }
.artikel__text p { margin: 0 0 1.15em; }
.artikel__text h2 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); line-height: 1.22; margin: 2.1em 0 .65em; text-wrap: balance; }
.artikel__text h3 { font-size: clamp(1.25rem, 1.9vw, 1.45rem); line-height: 1.3; margin: 1.8em 0 .5em; }
.artikel__text h2 + h3 { margin-top: .8em; }
.artikel__text h2 em, .artikel__text h3 em { color: inherit; }
.artikel__text strong { font-weight: 700; color: var(--text); }
.artikel__text a:not(.knopf) { color: var(--text); text-decoration-color: var(--salbei-deko); text-underline-offset: 3px; }
.artikel__text a:not(.knopf):hover { color: var(--taupe); text-decoration-color: var(--taupe); }
.artikel__text ul, .artikel__text ol { margin: 0 0 1.3em; padding-left: 1.4em; }
.artikel__text li { margin: 0 0 .45em; padding-left: .3em; }
.artikel__text li::marker { color: var(--salbei-dunkel); }
.artikel__text ol li::marker { font-family: var(--serif); }
.artikel__text figure { margin: 2.2em 0; }
.artikel__text figure img { width: auto; max-width: 100%; height: auto; max-height: 40rem; margin: 0 auto; }
.artikel__text blockquote { margin: 2em 0; padding: .2em 0 .2em 1.4em; border-left: 3px solid var(--salbei-mittel);
  font: italic 400 clamp(1.25rem, 2.2vw, 1.5rem)/1.5 var(--serif); color: var(--text); }
.artikel__text blockquote p:last-child { margin-bottom: 0; }
.artikel__knopf { margin: 1.6em 0 2em; }

/* Ende: Autorin + Stiltest */
.artikel__ende { max-width: calc(64rem + 2 * var(--rand)); display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  margin-top: clamp(56px, 7vw, 96px); }
.artikel__kim, .artikel__cta { padding: clamp(28px, 3.4vw, 44px); }
.artikel__kim { background: var(--beige-hell); display: flex; gap: 24px; align-items: flex-start; }
.artikel__kim img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: none; }
.artikel__kim p:not(.eyebrow) { color: var(--text-leise); font-size: .98rem; }
.artikel__kim .eyebrow, .artikel__cta .eyebrow { margin-bottom: .8rem; }
.artikel__cta { background: var(--salbei-zart); }
.artikel__cta h2 { font-size: clamp(1.6rem, 2.6vw, 2rem); margin-bottom: .4em; }
.artikel__cta p:not(.eyebrow) { color: var(--text-leise); }

/* Weiterlesen */
.mehr-artikel { padding-top: clamp(64px, 8vw, 110px); padding-bottom: clamp(72px, 9vw, 130px); }
.mehr-artikel .beitraege { list-style: none; margin: 0; padding: 0; }

/* ---------- Tablet ---------- */
@media (max-width: 1080px) {
  .beitraege--alle { grid-template-columns: 1fr 1fr; }
  .artikel__ende { grid-template-columns: 1fr; }
}

/* ---------- Handy ---------- */
@media (max-width: 760px) {
  .beitraege--alle { grid-template-columns: 1fr; }
  .filter { justify-content: flex-start; gap: 8px; }
  .filter__knopf { padding: 9px 15px; letter-spacing: .12em; }
  .artikel__kopf { text-align: left; }
  .artikel__kopf .eyebrow { justify-content: flex-start; }
  .artikel__kopf .eyebrow::after { display: none; }
  .artikel__bild { padding: 0; }
  .artikel__bild img { aspect-ratio: 4 / 3; }
  .artikel__text { font-size: 17px; line-height: 1.72; }
  .artikel__text figure { margin: 1.8em calc(-1 * var(--rand)); }
  .artikel__text figure img { max-height: 78vh; }
  .artikel__kim { flex-direction: column; gap: 16px; }
  .artikel__kim img { width: 76px; height: 76px; }
}

/* 13.11.: Hinweis-Kasten, Anmeldung im Artikel, Empfehlungen am Ende */
.artikel__text .hinweis { background: var(--salbei-zart); border-left: 3px solid var(--salbei-mittel); padding: 18px 22px; margin: 1.6em 0; }
.blog-anmeldung { background: var(--beige-hell); padding: clamp(24px, 3.4vw, 40px); margin: 2.6em 0 0; }
.blog-anmeldung h2 { margin-top: 0 !important; }
.blog-anmeldung .formular { margin-top: 18px; }
.ac-fehler { grid-column: 1 / -1; color: #8a3324; margin: 0; font-size: .95rem; }
.ac-fehler:empty { display: none; }
.tipps { margin-top: clamp(48px, 6vw, 80px); }
.tipps h2 { margin-bottom: 1em; }
.tipps__raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 26px); }
.tipp-karte { height: 100%; display: flex; flex-direction: column; gap: 8px; background: var(--creme); border: 1px solid var(--linie); padding: 0 0 22px; text-decoration: none; color: var(--text); transition: transform .4s, box-shadow .4s; }
.tipp-karte:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(75,75,75,.08); }
.tipp-karte > *:not(.tipp-karte__bild) { margin: 0 22px; }
.tipp-karte__bild { display: block; overflow: hidden; margin-bottom: 8px; }
.tipp-karte__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.tipp-karte__bild--mockup { background: var(--salbei-soft); }
.tipp-karte__bild--mockup img { object-fit: contain; padding: 10px 0 0; }
.tipp-karte strong { font: 400 1.35rem/1.25 var(--serif); }
.tipp-karte > span:not(.karte__marke):not(.textlink):not(.tipp-karte__bild) { color: var(--text-leise); flex: 1; }
.tipp-karte .textlink { align-self: flex-start; }
@media (max-width: 760px) { .tipps__raster { grid-template-columns: 1fr; } }