/* =========================
BLOG
Karten, Übersicht und Beitragsseite. Nutzt die Variablen aus style.css.
========================= */

/* ---------- Kartenraster ---------- */

.blog-grid{
display:grid;
gap:24px;
grid-template-columns:1fr;
}

@media(min-width:700px){
.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media(min-width:960px){
.blog-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}

/* weniger als drei Karten: nicht in die Breite ziehen */
.blog-grid-n1{grid-template-columns:minmax(0,420px);}

@media(min-width:960px){
.blog-grid-n2{grid-template-columns:repeat(2,minmax(0,1fr));}
}


/* ---------- Karte ---------- */

.blog-card{
position:relative;
display:flex;
flex-direction:column;
min-width:0;
background:#fff;
border-radius:var(--radius);
box-shadow:var(--shadow);
overflow:hidden;
transition:transform .25s ease,box-shadow .25s ease;
}

.blog-card:hover{
transform:translateY(-4px);
box-shadow:0 15px 35px rgba(0,0,0,.10);
}

.blog-card:focus-within{
outline:3px solid var(--accent);
outline-offset:3px;
}

.blog-card-media{
position:relative;
aspect-ratio:16/10;
overflow:hidden;
background:#e6f2ec;
}

.blog-card-media img{
width:100%;
height:100%;
object-fit:cover;
transition:transform .6s ease;
}

.blog-card:hover .blog-card-media img{
transform:scale(1.04);
}

/* ohne Titelbild: ruhige Fläche mit dem Blatt-Motiv der Website */
.blog-card-ph{
position:absolute;
inset:0;
background:linear-gradient(135deg,#e3f1ea,#c9e6d7);
}

.blog-card-ph::after{
content:"";
position:absolute;
inset:0;
background:url("../img/accent.png") no-repeat center;
background-size:34%;
opacity:.14;
}

.blog-card-body{
display:flex;
flex-direction:column;
gap:8px;
flex:1;
padding:20px 22px 22px;
}

.blog-meta{
margin:0;
font-size:13px;
color:var(--muted);
}

.blog-card h2,
.blog-card h3{
margin:0;
font-size:1.2rem;
line-height:1.3;
}

.blog-card h2 a,
.blog-card h3 a{
color:var(--ink);
}

/* die ganze Karte ist anklickbar */
.blog-card h2 a::after,
.blog-card h3 a::after{
content:"";
position:absolute;
inset:0;
z-index:1;
}

.blog-card h2 a:focus-visible,
.blog-card h3 a:focus-visible{
outline:none;
}

.blog-card a:hover{
text-decoration:none;
}

.blog-excerpt{
margin:0;
color:#3d4f4b;
display:-webkit-box;
-webkit-line-clamp:4;
-webkit-box-orient:vertical;
overflow:hidden;
}

.blog-more{
position:relative;
z-index:2;
margin-top:auto;
padding-top:8px;
font-weight:700;
color:var(--brand);
}

.blog-more span{
display:inline-block;
transition:transform .2s ease;
}

.blog-card:hover .blog-more span{
transform:translateX(4px);
}

/* neuester Beitrag: breite Karte mit Bild neben dem Text */
.blog-card-featured{
grid-column:1/-1;
}

.blog-card-featured .blog-meta::before{
content:"Neuester Beitrag";
display:inline-block;
margin-right:10px;
padding:2px 10px;
border-radius:999px;
background:var(--brand);
color:#fff;
font-size:12px;
font-weight:700;
}

@media(min-width:800px){

.blog-card-featured{
flex-direction:row;
}

.blog-card-featured .blog-card-media{
flex:0 0 56%;
aspect-ratio:auto;
min-height:340px;
}

.blog-card-featured .blog-card-body{
justify-content:center;
gap:12px;
padding:36px;
}

.blog-card-featured h2,
.blog-card-featured h3{
font-size:1.75rem;
}

.blog-card-featured .blog-excerpt{
font-size:1.05rem;
-webkit-line-clamp:6;
}

}


/* ---------- Überschriftenzeile (Startseite, weitere Beiträge) ---------- */

.blog-home-head{
display:flex;
flex-wrap:wrap;
align-items:baseline;
justify-content:space-between;
gap:8px 20px;
margin-bottom:22px;
}

.section .blog-home-head h2{
margin:0;
}

.blog-all{
font-weight:700;
white-space:nowrap;
}


/* ---------- Übersichtsseite ---------- */

.blog-list-head{
margin-bottom:30px;
}

.blog-list-head h1{
margin-bottom:10px;
}

.blog-intro{
max-width:640px;
font-size:1.1rem;
color:var(--muted);
}

.blog-pager{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:center;
gap:14px 20px;
margin-top:40px;
}

.blog-pager-info{
color:var(--muted);
font-size:14px;
}


/* ---------- Beitragsseite ---------- */

.blog-article{
max-width:880px;
margin:0 auto;
}

.blog-crumbs{
display:flex;
flex-wrap:wrap;
gap:4px 8px;
margin-bottom:22px;
font-size:14px;
color:var(--muted);
}

.blog-crumbs a{
color:var(--muted);
}

.blog-crumbs [aria-current]{
color:var(--ink);
max-width:100%;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

.blog-header{
margin-bottom:26px;
}

.blog-kicker{
margin-bottom:10px;
font-size:13px;
font-weight:700;
letter-spacing:.06em;
text-transform:uppercase;
color:var(--brand);
}

.blog-kicker::before{
content:"";
display:inline-block;
width:28px;
height:3px;
margin-right:10px;
border-radius:2px;
background:var(--accent);
vertical-align:middle;
}

.blog-header h1{
margin-bottom:14px;
font-size:2rem;
line-height:1.2;
}

.blog-byline{
font-size:15px;
color:var(--muted);
}

.blog-hero{
margin:0 0 34px;
overflow:hidden;
border-radius:var(--radius);
box-shadow:var(--shadow);
}

.blog-hero img{
width:100%;
aspect-ratio:16/10;
object-fit:cover;
}

.blog-lead{
max-width:720px;
margin:0 0 32px;
padding:4px 0 4px 20px;
border-left:4px solid var(--accent);
font-size:1.25rem;
line-height:1.6;
}

.blog-prose{
max-width:720px;
font-size:1.075rem;
line-height:1.75;
}

.blog-prose p{
margin:0 0 1.2em;
}

.blog-prose h2{
margin:1.8em 0 .6em;
font-size:1.5rem;
line-height:1.3;
color:var(--brand);
}

.blog-prose h2::after{
content:"";
display:block;
width:44px;
height:3px;
margin-top:10px;
border-radius:2px;
background:var(--accent);
}

.blog-prose h3{
margin:1.5em 0 .5em;
font-size:1.2rem;
color:var(--brand);
}

.blog-prose ul,
.blog-prose ol{
margin:0 0 1.3em;
}

.blog-prose li{
position:relative;
margin-bottom:.55em;
padding-left:32px;
}

.blog-prose ul li::before{
content:"";
position:absolute;
left:4px;
top:.62em;
width:10px;
height:10px;
border-radius:50%;
background:var(--accent);
}

.blog-prose ol{
list-style:none;
counter-reset:blog-n;
}

.blog-prose ol li{
counter-increment:blog-n;
}

.blog-prose ol li::before{
content:counter(blog-n);
position:absolute;
left:0;
top:.2em;
display:flex;
align-items:center;
justify-content:center;
width:24px;
height:24px;
border-radius:50%;
background:var(--brand);
color:#fff;
font-size:13px;
font-weight:700;
line-height:1;
}

.blog-prose blockquote{
margin:1.8em 0;
padding:22px 24px 22px 28px;
border-left:5px solid var(--accent);
border-radius:0 var(--radius) var(--radius) 0;
background:#eef7f2;
}

.blog-prose blockquote p{
margin:0;
font-size:1.12rem;
font-weight:600;
color:var(--brand);
}

.blog-prose a{
text-decoration:underline;
text-underline-offset:3px;
}

.blog-figure{
margin:2em 0;
}

/* Hochformat-Bilder werden in der Höhe begrenzt und zentriert */
.blog-figure img{
width:auto;
max-width:100%;
max-height:min(70vh,620px);
margin:0 auto;
border-radius:var(--radius);
box-shadow:var(--shadow);
}

.blog-figure figcaption{
margin-top:10px;
font-size:14px;
color:var(--muted);
text-align:center;
}

@media(min-width:700px){
.blog-header h1{font-size:2.6rem;}
}


/* ---------- Abschluss: Kontakt ---------- */

.blog-cta{
position:relative;
overflow:hidden;
margin-top:48px;
padding:30px 30px 32px;
border-radius:var(--radius);
background:var(--brand);
color:#fff;
}

.blog-cta::after{
content:"";
position:absolute;
right:-30px;
bottom:-40px;
width:220px;
height:220px;
background:url("../img/accent.png") no-repeat center;
background-size:contain;
opacity:.1;
transform:rotate(-20deg);
pointer-events:none;
}

.blog-cta h2{
margin:0 0 8px;
font-size:1.4rem;
color:#fff;
}

.blog-cta p{
max-width:520px;
margin:0 0 18px;
opacity:.92;
}

.blog-cta .cta{
position:relative;
z-index:1;
display:inline-block;
background:#fff;
color:var(--brand)!important;
}

.blog-cta .cta:hover{
text-decoration:none;
opacity:.92;
}

.blog-related{
margin-top:56px;
}


/* ---------- Vorschau im Adminbereich ---------- */

.blog-preview-bar{
position:sticky;
top:0;
z-index:200;
padding:10px 16px;
background:#fff3c4;
color:#4d3b00;
border-bottom:1px solid #ecd27a;
font-size:14px;
font-weight:600;
text-align:center;
}


/* ---------- Bewegung reduzieren ---------- */

@media(prefers-reduced-motion:reduce){
.blog-card,
.blog-card-media img,
.blog-more span{transition:none;}
.blog-card:hover{transform:none;}
.blog-card:hover .blog-card-media img,
.blog-card:hover .blog-more span{transform:none;}
}