/* Redaktionelle Übersicht und fortlaufende Artikel im bestehenden Designsystem. */
.blog-index-page,.blog-article-page{--blog-space:clamp(56px,6vw,88px);--blog-berry:#a9531c}
.blog-index-page h1,.blog-article-page h1{font-size:clamp(44px,4.8vw,72px);line-height:1.1;letter-spacing:-.025em}
.blog-index-page .page-hero.no-photo{max-width:1200px;text-align:left;padding:56px 8% 48px;margin-inline:auto}
.blog-index-page .page-hero.no-photo h1{max-width:760px}
.blog-index-page .page-hero.no-photo p{margin:24px 0 0;max-width:640px}
.blog-index-page .story-list{max-width:1200px;padding:0 8% var(--blog-space);display:grid;grid-template-columns:1fr 1fr;gap:40px}
.blog-index-page .story-row{display:flex;flex-direction:column;align-items:stretch;gap:24px;border:0;padding:0;margin:0}
.blog-index-page .story-row figure{width:100%;margin:0}
.blog-index-page .story-row img{width:100%;height:auto;aspect-ratio:3/2;object-fit:contain}
.blog-index-page .story-row h2{font-size:clamp(30px,3vw,44px);line-height:1.15;margin:0 0 16px;letter-spacing:-.02em}
.blog-index-page .story-row p{font-size:16px;line-height:1.75;margin:0}
.blog-index-page .story-row span{color:var(--blog-berry);min-height:44px;display:flex;align-items:center;margin-top:12px}
.blog-index-page .editorial-section{background:#e4e6da;max-width:none;padding:var(--blog-space) max(8%,calc((100% - 1040px)/2));gap:64px;align-items:center}
.blog-index-page .editorial-section h2{font-size:clamp(36px,3.8vw,56px);line-height:1.12;margin-bottom:24px}
.blog-article-page .page-hero{max-width:1320px;margin:auto;padding:56px 8% 40px;gap:6%;grid-template-columns:1.05fr 1fr;align-items:center}
.blog-article-page .page-hero h1{max-width:660px}
.blog-article-page .page-hero p{font-size:17px;line-height:1.75;margin-top:24px}
.blog-article-page .page-hero img{width:100%;height:auto;aspect-ratio:3/2;max-height:none;object-fit:contain}
.blog-article-page .article-byline{max-width:1320px;margin:0 auto;padding:0 8% 40px;font-size:14px}
.blog-reading{padding:24px 0 var(--blog-space);border-top:1px solid #cdd2c6}
.blog-reading .editorial-section{display:block;max-width:800px;padding:28px 48px;margin:auto}
.blog-reading .editorial-section h2{font-size:clamp(30px,3vw,40px);line-height:1.18;letter-spacing:-.02em;margin:0 0 20px}
.blog-reading .editorial-section p{font-size:18px;line-height:1.8;max-width:none}
.blog-reading .editorial-section p+p{margin-top:20px}
.blog-reading .editorial-image-pair{max-width:1100px;margin:24px auto 40px;padding:0 48px;gap:24px;align-items:center}
.blog-reading .editorial-image-pair figure{margin:0;width:100%}
.blog-reading .editorial-image-pair img{width:100%;height:auto;max-height:none;object-fit:contain}
.blog-reading .editorial-section:last-child{margin-top:32px;padding-top:40px;border-top:1px solid #cdd2c6}
.blog-index-page a:focus-visible,.blog-article-page a:focus-visible{outline:3px solid #a9531c;outline-offset:5px}
.blog-index-page .page-cta a:focus-visible,.blog-article-page .page-cta a:focus-visible{outline-color:#efd3a6}
@media(max-width:760px){
 .blog-index-page .page-hero.no-photo,.blog-article-page .page-hero{padding:32px 6%}
 .blog-index-page .page-hero.no-photo h1,.blog-article-page .page-hero h1{font-size:44px}
 .blog-index-page .story-list{grid-template-columns:1fr;padding:8px 6% 56px;gap:48px}
 .blog-index-page .story-row h2{font-size:34px}
 .blog-index-page .editorial-section{display:block;padding:56px 6%}
 .blog-index-page .editorial-section figure{margin:0 0 28px}
 .blog-article-page .page-hero{display:flex;flex-direction:column;gap:28px;align-items:stretch}
 .blog-article-page .page-hero figure{margin:0}
 .blog-article-page .page-hero p{font-size:16px}
 .blog-article-page .article-byline{padding:0 6% 28px;margin:0}
 .blog-reading{padding-top:16px}
 .blog-reading .editorial-section{padding:24px 6%}
 .blog-reading .editorial-section h2{font-size:32px;margin-bottom:16px}
 .blog-reading .editorial-section p{font-size:17px}
 .blog-reading .editorial-image-pair{display:grid;grid-template-columns:1fr;padding:0 6%;gap:20px;margin:20px auto 24px}
 .blog-reading .editorial-image-pair figure+figure{margin:0}
 .blog-reading .editorial-section:last-child{margin-top:24px}
}

/* Janet, 04.10.2026: großzügiger Einstieg, feste Lesebreite, Fotos mit eigenem Platz,
   Tipps in Salbei, Links in Beerenrosa, Sprungnavigation, abwechslungsreiche Übersicht. */
.blog-article-page{--blog-sage:#e4e6da;--blog-read:720px}
.blog-article-page .page-hero{max-width:1600px;padding:64px 8% 56px;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:6%}
.blog-article-page .page-hero h1{max-width:none}
.blog-article-page .page-hero .article-byline{margin:22px 0 0;padding:0;max-width:none;font-size:14px;color:#5b6b5e}
.blog-article-page .page-hero .article-byline a{color:var(--blog-berry)}
.blog-reading{border-top:0}
.blog-reading .editorial-section{max-width:calc(var(--blog-read) + 96px);scroll-margin-top:140px}
.blog-reading .editorial-section a:not(.text-link){color:var(--blog-berry);text-decoration-thickness:1px;text-underline-offset:3px}
.blog-reading .blog-jump{max-width:calc(var(--blog-read) + 96px);margin:8px auto 8px;padding:0 48px}
.blog-reading .blog-jump p{font:400 14px/1.4 'Barlow Condensed',Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#5b6b5e;margin:0 0 10px}
.blog-reading .blog-jump ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 26px}
.blog-reading .blog-jump a{color:var(--blog-berry);display:inline-flex;min-height:44px;align-items:center}
.blog-reading .blog-tip{background:var(--blog-sage);padding:22px 28px 24px;margin:26px 0}
.blog-reading .blog-tip-hand{display:block;font-family:'Beauty Handwriting',Arial,sans-serif;font-size:34px;line-height:1;color:var(--blog-berry);margin-bottom:6px}
.blog-reading .blog-tip p{margin:0}
.blog-reading .blog-tip+p,.blog-reading .blog-media+p{margin-top:20px}
.blog-reading .blog-media{width:min(1200px,calc(100vw - 12%));margin:34px 0 38px 50%;transform:translateX(-50%);display:grid;gap:18px;align-items:start}
.blog-reading .blog-media-single{width:min(980px,calc(100vw - 12%))}
.blog-reading .blog-media-pair{grid-template-columns:1fr 1fr}
.blog-reading .blog-media-trio{grid-template-columns:1fr 1fr 1fr}
.blog-reading .blog-media figure{margin:0}
.blog-reading .blog-media img{display:block;width:100%;height:auto;max-height:none;object-fit:contain}
.blog-reading .blog-media figcaption{margin-top:8px;font-size:13px;line-height:1.45;color:#5b6b5e}
/* Übersicht: ein Beitrag groß, der zweite versetzt daneben */
.blog-index-page .story-list{max-width:1440px;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:56px;align-items:start}
.blog-index-page .story-row:nth-child(2){margin-top:140px}
.blog-index-page .story-row:first-child h2{font-size:clamp(34px,3.6vw,52px)}
@media(max-width:760px){
 .blog-article-page .page-hero{padding:32px 6%}
 .blog-reading .blog-jump{padding:0 6%}
 .blog-reading .blog-media{width:auto;margin:26px 0 30px;transform:none}
 .blog-reading .blog-media-pair,.blog-reading .blog-media-trio{grid-template-columns:1fr}
 .blog-reading .blog-tip{padding:18px 20px 20px}
 .blog-index-page .story-list{grid-template-columns:1fr}
 .blog-index-page .story-row:nth-child(2){margin-top:0}
}
.blog-reading .blog-media-single:has(.is-portrait){width:min(520px,calc(100vw - 12%))}
.blog-index-page .page-hero.no-photo{max-width:1440px}