/* ═══════════════════════════════════════════════════════════════════════
   [MA] Music Academy — Blog Stylesheet
   Erweitert das Design der Hauptseite um Artikel-spezifische Layouts.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --cr:#ffffff; --sd:#fafaf9; --sd2:#f0efec;
  --bd:#ebe9e5; --bd2:#d5d2cd;
  --st:#8a8278; --ch:#4a4740;
  --ink:#2d2b27; --nt:#1e1c19;
  --fm:"Montserrat",sans-serif; --fb:"Open Sans",sans-serif;
  --mw:1240px; --rw:760px; --tr:.28s ease; --r:4px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--cr);color:var(--nt);font-family:var(--fb);line-height:1.78;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.w{max-width:var(--mw);margin:0 auto;padding:0 2rem}
.rw{max-width:var(--rw);margin:0 auto;padding:0 1.6rem}

/* ── Typography ─────────────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--fm);font-weight:800;line-height:1.18;letter-spacing:-.02em;color:var(--ink)}
h1{font-size:clamp(1.85rem,4vw,2.85rem);margin-bottom:.95rem}
h2{font-size:clamp(1.35rem,2.6vw,1.85rem);margin:2.7rem 0 .9rem}
h3{font-size:clamp(1.05rem,1.8vw,1.3rem);margin:1.9rem 0 .7rem}
h4{font-size:.95rem;margin:1.4rem 0 .5rem}
.ey{font-family:var(--fm);font-size:.6rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--st);display:block;margin-bottom:.75rem}

/* ── Header / Nav (identisch zur Hauptseite) ──────────────────────── */
#hdr{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid transparent;padding:1.1rem 0;transition:border-color .3s,box-shadow .3s,padding .3s}
#hdr.sc{border-color:var(--bd);box-shadow:0 2px 22px rgba(0,0,0,.05);padding:.72rem 0}
.nv{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.nl img{height:34px;width:auto}
.nls{display:flex;align-items:center;gap:1.5rem}
.nls a{font-family:var(--fm);font-size:.59rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ch);transition:color var(--tr)}
.nls a:hover{color:var(--ink)}
.nct{padding:.46rem 1.1rem;background:var(--ink);color:#fff!important;border-radius:var(--r)}
.nct:hover{background:#3d3b37!important}
.hb{display:none;width:30px;height:22px;background:none;border:none;cursor:pointer;flex-direction:column;justify-content:space-between;padding:0}
.hb span{width:100%;height:2px;background:var(--ink);transition:transform .3s,opacity .3s}
.hb.a span:nth-child(1){transform:translateY(10px) rotate(45deg)}
.hb.a span:nth-child(2){opacity:0}
.hb.a span:nth-child(3){transform:translateY(-10px) rotate(-45deg)}
#mm{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--cr);z-index:999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.8rem;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;padding:5rem 2rem 3rem}
#mm.o{opacity:1;visibility:visible}
#mm a{font-family:var(--fm);font-size:1rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 2rem;font-family:var(--fm);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border:none;cursor:pointer;transition:var(--tr);white-space:nowrap;border-radius:var(--r)}
.bk{background:var(--ink);color:#fff}.bk:hover{background:#3d3b37}
.bw{background:var(--cr);color:var(--ink);border:1.5px solid var(--bd)}.bw:hover{background:var(--sd)}
.blg{padding:1rem 2.4rem;font-size:.76rem}

/* ── Blog-Hero (Article header) ──────────────────────────────────── */
.bhero{padding:9rem 0 3rem;background:var(--sd);border-bottom:1px solid var(--bd)}
.bhero .crumbs{font-family:var(--fm);font-size:.62rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--st);margin-bottom:1rem}
.bhero .crumbs a{color:var(--ink);transition:color var(--tr)}
.bhero .crumbs a:hover{color:var(--st)}
.bhero .crumbs span{margin:0 .5rem;color:var(--bd2)}
.bhero h1{margin-bottom:1rem}
.bhero .meta{display:flex;gap:1.6rem;flex-wrap:wrap;font-family:var(--fm);font-size:.7rem;font-weight:600;color:var(--ch);margin-top:1.3rem;padding-top:1.3rem;border-top:1px solid var(--bd)}
.bhero .meta strong{color:var(--ink);font-weight:700}
.bhero .lead{font-size:1.08rem;color:var(--ch);line-height:1.78;margin-top:.5rem;max-width:680px}

/* ── Featured Image (cinematisch, full-bleed) ───────────────────── */
.fimg{margin:0;padding:0;background:var(--cr);position:relative;overflow:hidden}
.fimg img{width:100%;height:auto;min-height:480px;max-height:78vh;object-fit:cover;display:block;aspect-ratio:21/9}
.fimg figcaption{max-width:var(--rw);margin:1.1rem auto 0;padding:0 1.6rem;font-size:.78rem;color:var(--st);font-style:italic;line-height:1.6}
@media(max-width:900px){
  .fimg img{min-height:320px;max-height:60vh;aspect-ratio:16/10}
}

/* ── Article Body ──────────────────────────────────────────────── */
.article{padding:3rem 0 5rem;background:var(--cr)}
.article p{font-size:1rem;color:var(--ch);margin-bottom:1.2rem;line-height:1.85}
.article p strong{color:var(--ink);font-weight:700}
.article ul, .article ol{margin:1.1rem 0 1.4rem 1.4rem;color:var(--ch)}
.article ul li, .article ol li{margin-bottom:.55rem;line-height:1.78;padding-left:.3rem}
.article ul{list-style:disc}
.article ol{list-style:decimal}
.article a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--bd2);text-underline-offset:3px;transition:text-decoration-color var(--tr)}
.article a:hover{text-decoration-color:var(--ink)}
.article img{border-radius:var(--r);margin:2rem 0;width:100%}
.article figure{margin:2rem 0}
.article figure img{margin:0}
.article figure figcaption{font-size:.74rem;color:var(--st);font-style:italic;margin-top:.6rem;line-height:1.55;text-align:center}
.article blockquote{margin:2.2rem 0;padding:1.4rem 1.6rem;background:var(--sd);border-left:4px solid var(--ink);border-radius:0 var(--r) var(--r) 0;font-family:var(--fm);font-size:1.02rem;font-weight:500;color:var(--ink);line-height:1.65;font-style:italic}
.article blockquote strong{font-weight:700}
.article hr{border:none;border-top:1px solid var(--bd);margin:3rem 0}

/* TL;DR Box (Schlüssel für AI-Suche) */
.tldr{margin:2rem 0;padding:1.5rem 1.8rem;background:var(--sd);border:1.5px solid var(--bd);border-left:4px solid var(--ink);border-radius:var(--r)}
.tldr .tlabel{font-family:var(--fm);font-size:.62rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);margin-bottom:.5rem;display:block}
.tldr p{font-size:1.02rem;color:var(--ink);line-height:1.75;margin-bottom:0;font-weight:500}

/* Info Box */
.box{margin:2rem 0;padding:1.4rem 1.7rem;background:var(--cr);border:1.5px solid var(--bd);border-radius:var(--r)}
.box h4{margin-top:0;margin-bottom:.6rem;font-size:.88rem}
.box p{font-size:.92rem;margin-bottom:.7rem}
.box p:last-child{margin-bottom:0}

/* Tabellen */
.article table{width:100%;border-collapse:collapse;margin:1.8rem 0;font-size:.88rem;background:var(--cr);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden}
.article thead{background:var(--ink);color:#fff}
.article th{padding:.85rem 1rem;text-align:left;font-family:var(--fm);font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.article td{padding:.78rem 1rem;border-bottom:1px solid var(--bd);color:var(--ch)}
.article tbody tr:last-child td{border-bottom:none}
.article tbody tr:nth-child(even){background:var(--sd)}

/* ── Article TOC ───────────────────────────────────────────────── */
.toc{margin:0 0 2.5rem;padding:1.4rem 1.7rem;background:var(--sd);border-radius:var(--r);border:1px solid var(--bd)}
.toc .tlabel{font-family:var(--fm);font-size:.6rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--st);margin-bottom:.7rem;display:block}
.toc ol{margin:0;padding-left:1.4rem;list-style:decimal}
.toc ol li{margin-bottom:.42rem;font-size:.88rem;color:var(--ch);line-height:1.5}
.toc ol li a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent;transition:border-color var(--tr)}
.toc ol li a:hover{border-bottom-color:var(--ink)}

/* ── Author-Box (E-E-A-T) ─────────────────────────────────────── */
.author{display:flex;gap:1.4rem;align-items:flex-start;padding:1.7rem;background:var(--sd);border-radius:var(--r);border:1px solid var(--bd);margin:3rem 0 2rem}
.author .ava{width:78px;height:78px;border-radius:50%;flex-shrink:0;border:2px solid var(--cr);box-shadow:0 2px 8px rgba(0,0,0,.08);background:var(--ink);overflow:hidden}
.author img.ava{display:block;width:78px;height:78px;object-fit:cover;object-position:center 25%}
.author div.ava{display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--fm);font-weight:800;font-size:1.5rem;letter-spacing:-.04em}
.author .abody h4{font-size:.95rem;margin-top:.1rem;margin-bottom:.2rem}
.author .arole{font-family:var(--fm);font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--st);margin-bottom:.7rem}
.author p{font-size:.85rem;color:var(--ch);line-height:1.65;margin:0}

/* ── CTA-Box am Artikel-Ende ─────────────────────────────────── */
.endcta{margin:3.5rem 0 1rem;padding:2.4rem;background:var(--ink);color:#fff;border-radius:var(--r);text-align:center}
.endcta h3{color:#fff;margin-bottom:.7rem;font-size:1.3rem}
.endcta p{color:rgba(255,255,255,.78);font-size:.95rem;line-height:1.7;margin-bottom:1.5rem}
.endcta .btn{background:#fff;color:var(--ink)}
.endcta .btn:hover{background:var(--sd)}

/* ── Related Articles ─────────────────────────────────────────── */
.related{padding:5rem 0 6rem;background:var(--sd)}
.related h2{text-align:center;margin-bottom:2.5rem;margin-top:0}
.relgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.relcard{background:var(--cr);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;transition:transform var(--tr),box-shadow var(--tr)}
.relcard:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,.08)}
.relcard .ri{width:100%;height:180px;object-fit:cover}
.relcard .rb{padding:1.2rem 1.4rem 1.5rem}
.relcard .rcat{font-family:var(--fm);font-size:.56rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--st);margin-bottom:.55rem}
.relcard h3{font-size:1.02rem;margin:0 0 .55rem;line-height:1.32}
.relcard p{font-size:.82rem;color:var(--ch);line-height:1.55;margin:0}

/* ── Blog-Übersicht (index.html im /blog/) ────────────────────── */
.bidx-hero{padding:9rem 0 4rem;background:var(--ink);color:#fff;text-align:center}
.bidx-hero h1{color:#fff;margin-bottom:.9rem}
.bidx-hero p{color:rgba(255,255,255,.72);font-size:1.06rem;max-width:620px;margin:0 auto;line-height:1.75}
.bidx{padding:5rem 0 7rem}
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem}
.bcard{background:var(--cr);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;transition:transform var(--tr),box-shadow var(--tr);display:flex;flex-direction:column}
.bcard:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.09);border-color:var(--bd2)}
.bcard .bi{width:100%;height:210px;object-fit:cover}
.bcard .bb{padding:1.4rem 1.6rem 1.8rem;display:flex;flex-direction:column;flex:1}
.bcard .bcat{font-family:var(--fm);font-size:.58rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--st);margin-bottom:.65rem}
.bcard h2{font-size:1.18rem;margin:0 0 .65rem;line-height:1.32}
.bcard p{font-size:.87rem;color:var(--ch);line-height:1.62;margin:0 0 1.1rem}
.bcard .bmeta{font-family:var(--fm);font-size:.66rem;font-weight:600;color:var(--st);margin-top:auto;display:flex;justify-content:space-between;align-items:center;padding-top:.95rem;border-top:1px solid var(--bd)}
.bcard .blink{font-family:var(--fm);font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}

/* Featured Card (erste, große Kachel) */
.bfeat{grid-column:1/-1;display:grid;grid-template-columns:1.1fr 1fr;gap:0;background:var(--sd);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden}
.bfeat .bi{height:100%;min-height:340px}
.bfeat .bb{padding:2.3rem 2.5rem}
.bfeat .bcat{margin-bottom:1rem}
.bfeat h2{font-size:1.65rem;margin-bottom:.95rem;line-height:1.22}
.bfeat p{font-size:.96rem;margin-bottom:1.5rem}

/* ═══════════════════════════════════════════════════════════════
   MAGAZINE BLOG INDEX — modernes Layout
   ═══════════════════════════════════════════════════════════════ */

/* Hero-Bereich */
.mag-hero{padding:9rem 0 3.5rem;background:var(--cr);border-bottom:1px solid var(--bd)}
.mag-hero .mh-inner{max-width:920px}
.mag-hero .mh-eyebrow{font-family:var(--fm);font-size:.62rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--st);margin-bottom:1.3rem;display:inline-flex;align-items:center;gap:.6rem}
.mag-hero .mh-eyebrow::before,.mag-hero .mh-eyebrow::after{content:"";width:32px;height:1px;background:var(--bd2)}
.mag-hero h1{font-size:clamp(2.2rem,5vw,3.8rem);line-height:1.05;letter-spacing:-.025em;margin:0 0 1.25rem;color:var(--ink)}
.mag-hero h1 em{font-style:italic;color:var(--st);font-weight:400}
.mag-hero .mh-lead{font-size:1.15rem;line-height:1.75;color:var(--ch);max-width:680px;margin-bottom:2.2rem}
.mag-hero .mh-chip{display:inline-flex;align-items:center;gap:.85rem;padding:.55rem 1.1rem .55rem .55rem;background:var(--sd);border:1px solid var(--bd);border-radius:999px}
.mag-hero .mh-chip img{width:42px;height:42px;border-radius:50%;object-fit:cover;object-position:center 25%;flex-shrink:0;display:block;background:var(--bd2)}
.mag-hero .mh-chip .mh-chip-txt{font-family:var(--fm);font-size:.74rem;color:var(--ch);letter-spacing:.01em;line-height:1.4}
.mag-hero .mh-chip .mh-chip-txt strong{display:block;color:var(--ink);font-weight:700;margin-bottom:.04rem}

/* Featured-Slot — Hero-Artikel (Editorial-Split) */
.mag-feat{padding:3.5rem 0 1.5rem;background:var(--cr)}
.mag-feat .mf-eyebrow{font-family:var(--fm);font-size:.6rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--st);margin-bottom:1.3rem;display:flex;align-items:center;gap:.7rem}
.mag-feat .mf-eyebrow::before{content:"";width:32px;height:1px;background:var(--bd2)}
.mag-feat .mf-card{display:grid;grid-template-columns:1.35fr 1fr;gap:0;background:var(--cr);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;transition:transform var(--tr),box-shadow var(--tr),border-color var(--tr);text-decoration:none;color:inherit}
.mag-feat .mf-card:hover{transform:translateY(-4px);box-shadow:0 18px 50px rgba(0,0,0,.1);border-color:var(--bd2)}
.mag-feat .mf-img{position:relative;overflow:hidden;background:var(--sd2);min-height:440px}
.mag-feat .mf-img img{width:100%;height:100%;object-fit:cover;transition:transform .65s ease}
.mag-feat .mf-card:hover .mf-img img{transform:scale(1.03)}
.mag-feat .mf-img .mf-badge{position:absolute;top:1.2rem;left:1.2rem;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);padding:.5rem 1rem;border-radius:999px;font-family:var(--fm);font-size:.62rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:.5rem;box-shadow:0 4px 14px rgba(0,0,0,.08)}
.mag-feat .mf-img .mf-badge.mf-badge-new{background:#fff7e0;color:#7a5c00}
.mag-feat .mf-img .mf-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7}
.mag-feat .mf-body{padding:3rem 3rem;display:flex;flex-direction:column;justify-content:center}
.mag-feat .mf-cat{font-family:var(--fm);font-size:.62rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--st);margin-bottom:1rem}
.mag-feat .mf-body h2{font-size:clamp(1.55rem,2.6vw,2.1rem);line-height:1.16;letter-spacing:-.025em;margin:0 0 1.1rem;color:var(--ink)}
.mag-feat .mf-body p{font-size:1.02rem;line-height:1.75;color:var(--ch);margin:0 0 1.7rem}
.mag-feat .mf-meta{display:flex;align-items:center;gap:.95rem;padding-top:1.3rem;border-top:1px solid var(--bd)}
.mag-feat .mf-meta img{width:38px;height:38px;border-radius:50%;object-fit:cover;object-position:center 25%;flex-shrink:0;display:block}
.mag-feat .mf-meta-txt{font-family:var(--fm);font-size:.72rem;color:var(--st);line-height:1.45;flex:1}
.mag-feat .mf-meta-txt strong{display:block;color:var(--ink);font-weight:700;font-size:.78rem;margin-bottom:.06rem;letter-spacing:.01em}
.mag-feat .mf-meta-dot{margin:0 .35rem;color:var(--bd2)}
.mag-feat .mf-meta-cta{font-family:var(--fm);font-size:.62rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin-left:auto;white-space:nowrap}
@media(max-width:900px){
  .mag-feat .mf-card{grid-template-columns:1fr}
  .mag-feat .mf-img{min-height:240px;aspect-ratio:16/10}
  .mag-feat .mf-body{padding:2rem 1.7rem}
}

/* Section-Header („Weitere Artikel") */
.mag-secthead{padding:3.5rem 0 1.2rem;background:var(--cr)}
.mag-secthead .msh-row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--bd);padding-bottom:1rem}
.mag-secthead h2{font-size:1.2rem;margin:0;letter-spacing:-.015em;font-weight:800}
.mag-secthead .msh-meta{font-family:var(--fm);font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--st)}

/* Magazine-Grid (kompakter im Hybrid-Layout) */
.mag-grid{padding:2rem 0 5rem;background:var(--cr)}
.mag-gx{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem 1.5rem}
.mag-card{background:var(--cr);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform var(--tr)}
.mag-card:hover{transform:translateY(-3px)}
.mag-card .mc-img{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;border-radius:var(--r);background:var(--sd2);margin-bottom:.95rem}
.mag-card .mc-img img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
.mag-card:hover .mc-img img{transform:scale(1.04)}
.mag-card .mc-cat{font-family:var(--fm);font-size:.55rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--st);margin-bottom:.45rem}
.mag-card h3{font-size:.95rem;line-height:1.32;letter-spacing:-.005em;margin:0 0 .5rem;color:var(--ink);font-weight:800}
.mag-card:hover h3{color:var(--nt)}
.mag-card p{font-size:.78rem;color:var(--ch);line-height:1.58;margin:0 0 .85rem}
.mag-card .mc-meta{display:flex;align-items:center;gap:.55rem;margin-top:auto}
.mag-card .mc-meta img{width:24px;height:24px;border-radius:50%;object-fit:cover;object-position:center 25%;flex-shrink:0;display:block}
.mag-card .mc-meta-txt{font-family:var(--fm);font-size:.6rem;color:var(--st);line-height:1.4}
.mag-card .mc-meta-txt strong{color:var(--ink);font-weight:700}

.mag-card.mc-soon{opacity:.55;pointer-events:none}
.mag-card.mc-soon .mc-img::after{content:"In Vorbereitung";position:absolute;top:1rem;left:1rem;background:rgba(0,0,0,.7);color:#fff;padding:.35rem .75rem;font-family:var(--fm);font-size:.55rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;border-radius:999px}

/* Kategorien-Filter (statisch, ohne JS) */
.mag-cats{padding:1.5rem 0 2.5rem;background:var(--cr)}
.mag-cats-row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.mag-cats-row .mc-label{font-family:var(--fm);font-size:.6rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--st);margin-right:.7rem}
.mag-cat-chip{display:inline-flex;align-items:center;padding:.42rem .9rem;background:var(--sd);border:1px solid var(--bd);border-radius:999px;font-family:var(--fm);font-size:.66rem;font-weight:600;color:var(--ch);transition:all var(--tr);cursor:pointer}
.mag-cat-chip:hover,.mag-cat-chip.act{background:var(--ink);color:#fff;border-color:var(--ink)}

/* Newsletter / CTA-Strip */
.mag-cta{padding:5rem 0;background:var(--ink);color:#fff;text-align:center}
.mag-cta .mca-inner{max-width:560px;margin:0 auto}
.mag-cta .ey{color:rgba(255,255,255,.5);margin-bottom:1rem}
.mag-cta h2{color:#fff;font-size:clamp(1.45rem,3vw,2.1rem);margin:0 0 .85rem;line-height:1.22}
.mag-cta p{color:rgba(255,255,255,.7);font-size:.98rem;line-height:1.72;margin-bottom:1.7rem}
.mag-cta .btn{background:#fff;color:var(--ink)}
.mag-cta .btn:hover{background:var(--sd)}

/* ── Footer (identisch zur Hauptseite) ────────────────────────── */
#ftr{background:var(--nt);color:#fff;padding:4.5rem 0 2rem}
.fgrd{display:grid;grid-template-columns:1.6fr 1fr 1.2fr 1fr;gap:2.4rem;margin-bottom:2.8rem}
.flog img{height:32px;width:auto;filter:invert(1);margin-bottom:1.3rem;opacity:.78}
.fbd p{color:rgba(255,255,255,.7);font-size:.86rem;line-height:1.78;margin-bottom:1rem}
.fa{font-style:normal;color:rgba(255,255,255,.62);font-size:.78rem;line-height:1.78}
.fa a{color:rgba(255,255,255,.88)}
.fc3 h4{color:#fff;font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1.1rem}
.fc3 ul li{margin-bottom:.5rem}
.fc3 ul li a{color:rgba(255,255,255,.78);font-size:.84rem;transition:color var(--tr)}
.fc3 ul li a:hover{color:#fff}
.fbt{padding-top:1.8rem;border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.76rem;color:rgba(255,255,255,.7)}
.fleg{display:flex;gap:1.4rem}
.fleg a{color:rgba(255,255,255,.78);transition:color var(--tr)}
.fleg a:hover{color:#fff}

/* ── Responsive ───────────────────────────────────────────────── */
@media(max-width:920px){
  .mag-hero{padding:7rem 0 2.5rem}
  .mag-feat .mf-card{grid-template-columns:1fr}
  .mag-feat .mf-img{min-height:260px}
  .mag-feat .mf-body{padding:2rem 1.8rem}
  .mag-gx{grid-template-columns:1fr 1fr;gap:2rem 1.4rem}
  .mag-secthead .msh-row{flex-direction:column;align-items:flex-start;gap:.5rem}
  .nls{display:none}
  .hb{display:flex}
  .relgrid{grid-template-columns:1fr}
  .bgrid{grid-template-columns:1fr}
  .bfeat{grid-template-columns:1fr}
  .bfeat .bi{min-height:240px}
  .bfeat .bb{padding:1.8rem}
  .fgrd{grid-template-columns:1fr;gap:2rem}
  .bhero{padding:7rem 0 2.5rem}
  .bidx-hero{padding:7rem 0 3rem}
  .article{padding:2.2rem 0 4rem}
  .article table{font-size:.78rem}
  .article th, .article td{padding:.6rem .7rem}
}
@media(max-width:600px){
  .mag-gx{grid-template-columns:1fr}
  .mag-hero h1{font-size:2rem}
  .mag-hero .mh-lead{font-size:1rem}
  .mag-feat .mf-body{padding:1.7rem 1.4rem}
  .mag-feat .mf-body h2{font-size:1.35rem}
  .mag-cats-row{gap:.4rem}
}

/* ── Smooth fade-in ───────────────────────────────────────────── */
.fi{transition:opacity .55s ease, transform .55s ease}
body.anim .fi{opacity:0;transform:translateY(18px)}
body.anim .fi.v{opacity:1;transform:translateY(0)}