/* =============================================================================
   Burk R — Theme „reader"  ·  Quelle: eigenes Reader-Template
   (demos.burkhardrosemann.de/blog). Minimal, typografie-fokussiert, lesbar.
   Schriften lokal (DSGVO). Inline-Styles → Klassen.
   ============================================================================= */

/* ── Fonts (lokal, relativ → Theme portabel) ─────────────────────────────── */
@font-face{font-family:'Inter';src:url('fonts/inter-variable.woff2') format('woff2');font-weight:300 800;font-style:normal;font-display:swap}
@font-face{font-family:'Merriweather';src:url('fonts/merriweather-variable.woff2') format('woff2');font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:'Merriweather';src:url('fonts/merriweather-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('fonts/playfairdisplay-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}

:root{
    --bg-color:#fdfdfd;
    --text-color:#2c2c2c;
    --text-light:#666;
    --accent-color:#1E7A55;          /* Emerald (von burkhardrosemann) — WCAG-tauglich auf Creme */
    --border-color:#eee;
    --font-heading:'Merriweather',Georgia,serif;
    --font-body:'Merriweather',Georgia,serif;
    --font-ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --container-width:1100px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg-color);color:var(--text-color);font-family:var(--font-body);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{text-decoration:none;color:inherit;transition:color .2s}
img{max-width:100%;display:block}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:900;line-height:1.2;margin-bottom:.5em;color:#111}
.container{max-width:var(--container-width);margin:0 auto;padding:0 30px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header{padding:24px 0;border-bottom:1px solid var(--border-color);background:#fff;position:sticky;top:0;z-index:100}
.header-container{display:flex;justify-content:space-between;align-items:center}
/* Wortmarke: „Burk" + R als Marken-Kreis (®, SVG superscript) */
.logo{font-family:var(--font-heading);font-size:1.7rem;font-weight:900;letter-spacing:-1px;line-height:1;color:#111;display:inline-block;white-space:nowrap}
.logo-tm{width:.8em;height:.8em;margin-left:.06em;vertical-align:.5em;color:var(--accent-color)}
.site-header nav{display:flex;gap:30px;align-items:center;font-family:var(--font-ui);font-size:.95rem;font-weight:500}
.site-header nav a{color:var(--text-light)}
.site-header nav a:hover,.site-header nav a.active{color:#000}
.btn-subscribe{background:#111;color:#fff!important;padding:10px 20px;border-radius:4px;font-weight:600;transition:transform .2s,box-shadow .2s}
.btn-subscribe:hover{transform:translateY(-2px);box-shadow:0 5px 15px rgba(0,0,0,.1)}

.mobile-menu-toggle{display:none;position:relative;width:40px;height:40px;background:transparent;border:none;cursor:pointer;z-index:1001}
.mobile-menu-toggle span{position:absolute;left:8px;right:8px;top:50%;height:2px;margin-top:-1px;background:var(--text-color);border-radius:2px;transition:transform .3s ease,opacity .2s ease}
.mobile-menu-toggle span:nth-child(1){transform:translateY(-7px)}
.mobile-menu-toggle span:nth-child(3){transform:translateY(7px)}
.mobile-menu-toggle.active span:nth-child(1){transform:rotate(45deg)}
.mobile-menu-toggle.active span:nth-child(2){opacity:0}
.mobile-menu-toggle.active span:nth-child(3){transform:rotate(-45deg)}
body.menu-open{overflow:hidden}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero-section{padding:60px 0 80px;background:linear-gradient(to bottom,#fff 0%,#fcfbf9 100%);border-bottom:1px solid var(--border-color)}
.hero-container{max-width:var(--container-width);margin:0 auto;padding:0 30px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.hero-content{min-width:0}
.hero-content .tag{display:inline-block;font-family:var(--font-ui);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--accent-color);margin-bottom:15px}
.hero-content h1{font-size:clamp(2.4rem,4.5vw,3.5rem);margin-bottom:20px}
.hero-content h1 a{color:inherit}
.hero-content h1 em{font-style:normal;position:relative;z-index:1}
.hero-content h1 em::after{content:"";position:absolute;bottom:5px;left:0;width:100%;height:14px;background:rgba(30,122,85,.18);z-index:-1}
.hero-excerpt{font-family:var(--font-body);font-size:1.2rem;color:#555;margin-bottom:30px;max-width:90%}
.read-more{font-family:var(--font-ui);font-weight:600;border-bottom:2px solid #000;padding-bottom:2px}
.hero-image{height:500px;width:100%;object-fit:cover;background:#eee;border-radius:8px;box-shadow:20px 20px 0 rgba(0,0,0,.05)}

/* ── Section title ───────────────────────────────────────────────────────── */
.section-title{display:flex;align-items:center;gap:20px;margin:60px 0 40px}
.section-title h2{font-family:var(--font-ui);font-size:1.2rem;font-weight:700;margin:0;white-space:nowrap;color:#111}
.section-title .line{width:100%;height:1px;background:var(--border-color)}

/* ── Feed / Cards ────────────────────────────────────────────────────────── */
.grid-feed{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:40px;padding-bottom:0}
.grid-feed:last-child{padding-bottom:72px}
.post-card{display:flex;flex-direction:column;gap:20px;min-width:0}
.card-image{height:280px;overflow:hidden;border-radius:6px;background:#f0f0f0}
.card-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.post-card:hover .card-image img{transform:scale(1.05)}
.card-content{padding-right:10px}
.post-meta{font-family:var(--font-ui);font-size:.8rem;color:var(--text-light);margin-bottom:10px;display:flex;justify-content:space-between;gap:14px}
.category{font-weight:700;color:#000;text-transform:uppercase;letter-spacing:.5px}
a.category{transition:color .2s}
a.category:hover{color:var(--accent-color)}
/* Themen-Seiten: Intro + Themen-Leiste (Archiv + /thema) */
.archive-intro{font-family:var(--font-ui);font-size:1rem;color:var(--text-light);max-width:640px;margin:0 0 28px}
.topic-strip{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 44px}
.topic-chip{font-family:var(--font-ui);font-size:.8rem;font-weight:600;color:var(--text-light);border:1px solid var(--border-color);border-radius:999px;padding:6px 15px}
.topic-chip:hover{color:var(--accent-color);border-color:var(--accent-color)}
.topic-chip.is-current{background:var(--accent-color);color:#fff;border-color:var(--accent-color)}
.post-card h2{font-family:var(--font-heading);font-size:1.6rem;margin-bottom:10px;line-height:1.3}
.post-card h2 a{background-image:linear-gradient(to right,#000 0%,#000 100%);background-size:0 2px;background-repeat:no-repeat;background-position:left bottom;transition:background-size .3s;padding-bottom:2px}
.post-card:hover h2 a{background-size:100% 2px}
.excerpt{font-family:var(--font-body);font-size:1rem;color:#666;line-height:1.6}

/* ── Newsletter ──────────────────────────────────────────────────────────── */
.newsletter-section{background:#f4f4f4;padding:72px 24px;text-align:center;margin:64px 0 60px;border-radius:8px}
.newsletter-box{max-width:520px;margin:0 auto}
.newsletter-box h2{font-size:clamp(2rem,4vw,2.5rem)}
.newsletter-box h2 em{font-family:'Playfair Display',Georgia,serif;font-style:italic;color:var(--accent-color)}
.newsletter-box p{font-family:var(--font-ui);color:var(--text-light);margin-top:8px}
.newsletter-form{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.newsletter-form input[type=email]{flex:1;min-width:0;padding:15px;border:1px solid #ddd;border-radius:4px;font-family:var(--font-ui);background:#fff}
.newsletter-form input[type=email]:focus{outline:2px solid var(--accent-color);outline-offset:1px}
.newsletter-form button{padding:0 30px;background:#111;color:#fff;border:none;border-radius:4px;font-family:var(--font-ui);font-weight:600;cursor:pointer}
.nl-hp{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
.nl-note{font-family:var(--font-ui);font-size:.8rem;color:var(--text-light);margin-top:14px}
.nl-note a{color:#000;text-decoration:underline}
.nl-note code{font-family:ui-monospace,Menlo,monospace;font-size:.85em}
.nl-hp{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
.nl-consent{flex:1 1 100%;display:flex;gap:9px;align-items:flex-start;max-width:480px;margin:14px auto 0;text-align:left;font-family:var(--font-ui);font-size:.82rem;line-height:1.5;color:var(--text-light)}
.nl-consent input{margin-top:3px;flex:0 0 auto}
.nl-consent a{color:#000;text-decoration:underline}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer{border-top:1px solid var(--border-color);padding:56px 0 30px;font-family:var(--font-ui);color:var(--text-light);margin-top:20px}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:40px}
.footer-brand .logo{font-size:1.45rem}
.footer-tagline{font-size:.9rem;line-height:1.6;color:var(--text-light);margin-top:14px;max-width:26ch}
.footer-col{display:flex;flex-direction:column;gap:11px;align-items:flex-start}
.footer-col-title{font-size:.76rem;text-transform:uppercase;letter-spacing:1px;font-weight:700;color:#111;margin-bottom:5px}
.footer-col a{font-size:.92rem;color:var(--text-light);display:inline-flex;align-items:center;gap:9px}
.ico{width:18px;height:18px;display:inline-block;flex:0 0 auto}
.footer-col a:hover{color:#000}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:48px;padding-top:24px;border-top:1px solid var(--border-color);font-size:.82rem;color:#5e5e5e}
@media (max-width:768px){
    .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
    .footer-brand{grid-column:1 / -1}
    .footer-bottom{flex-direction:column;align-items:flex-start;gap:8px}
}

/* ── Artikel ─────────────────────────────────────────────────────────────── */
.article-container{max-width:760px;margin:0 auto;padding:56px 20px 0}
.article-header{text-align:center;margin-bottom:50px}
.article-meta{font-family:var(--font-ui);font-size:.9rem;color:var(--text-light);margin-bottom:22px;text-transform:uppercase;letter-spacing:1px}
.article-meta .category{font-weight:700;color:#111}
.article-meta .dot{color:var(--text-light)}
.author{display:inline-flex;align-items:center;justify-content:center;gap:14px;margin-top:26px}
.avatar{width:60px;height:60px;border-radius:50%;object-fit:cover;background:#eee;flex:0 0 60px}
.author span{font-family:var(--font-ui);font-weight:400;font-size:1rem;color:var(--text-color)}
.author strong{font-weight:700;color:#111}
.author:hover span{color:#000}
.article-header h1{font-size:clamp(2.1rem,5vw,3rem);line-height:1.2;margin-bottom:20px}
.article-header h1 em{font-style:italic;color:var(--text-color)}
.article-origin{font-family:var(--font-ui);font-size:.85rem;color:var(--text-light);text-transform:none;letter-spacing:0;margin-top:6px}
.article-origin a{color:#000;border-bottom:1px solid var(--accent-color)}
.article-cover{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:8px;margin-bottom:56px;background:#f0f0f0}
.article-content{font-family:var(--font-body);font-size:1.2rem;line-height:1.85;color:#333}
.article-content p{margin-bottom:28px}
.article-content h2{font-family:var(--font-heading);font-size:1.8rem;margin-top:52px;margin-bottom:18px}
.article-content h3{font-family:var(--font-heading);font-size:1.4rem;margin-top:36px;margin-bottom:14px}
.article-content a{color:inherit;text-decoration:none;background-image:linear-gradient(transparent 62%,rgba(30,122,85,.22) 62%);transition:background-image .2s}
.article-content a:hover{background-image:linear-gradient(transparent 0,rgba(30,122,85,.20) 0)}
.article-content blockquote{border-left:4px solid var(--accent-color);padding-left:30px;margin:40px 0;font-style:italic;font-size:1.4rem;color:#555}
.article-content ul,.article-content ol{margin:0 0 28px 1.4em}
.article-content li{margin-bottom:10px}
.article-content :not(pre)>code{font-family:ui-monospace,Menlo,monospace;font-size:.86em;background:#f4f4f0;padding:2px 6px;border-radius:3px}
.article-content pre{background:#1c1b19;color:#eee;border-radius:8px;padding:22px 24px;overflow-x:auto;margin:32px 0}
.article-content pre code{font-family:ui-monospace,Menlo,monospace;font-size:.95rem;line-height:1.7;color:inherit}

/* ── Teilen ──────────────────────────────────────────────────────────────── */
.article-share{margin-top:52px;padding-top:26px;border-top:1px solid var(--border-color);display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.article-share-label{font-family:var(--font-ui);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text-light)}
.article-share-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.share-btn{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border-color);border-radius:50%;color:var(--text-light);background:#fff;cursor:pointer;transition:color .2s,background .2s,border-color .2s,transform .2s;position:relative;padding:0}
.share-btn[hidden]{display:none}
.share-btn:hover{color:#fff;background:var(--accent-color);border-color:var(--accent-color);transform:translateY(-2px)}
.share-btn svg{width:18px;height:18px;display:block}
.share-copy.is-copied{color:#fff;background:var(--accent-color);border-color:var(--accent-color)}
.share-copy.is-copied::after{content:"Kopiert";position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:#111;color:#fff;font-family:var(--font-ui);font-size:.7rem;font-weight:600;padding:3px 8px;border-radius:4px;white-space:nowrap;pointer-events:none}
.article-image-credit{font-family:var(--font-ui);font-size:.8rem;color:var(--text-light);margin-top:-40px;margin-bottom:40px;text-align:center}
.article-foot{max-width:760px;margin:0 auto;padding:0 20px}
.next-link{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:28px 0;border-top:1px solid var(--border-color);margin-top:20px}
.next-link .next-label{display:block;font-family:var(--font-ui);font-size:.8rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-light);margin-bottom:6px}
.next-link .next-title{font-family:var(--font-heading);font-size:1.4rem;color:#111}
.next-link:hover .next-title{color:var(--accent-color)}
.article-foot{margin-bottom:24px}
.related{margin-top:44px;padding-top:32px;border-top:1px solid var(--border-color)}
.related-title{font-family:var(--font-ui);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text-light);margin-bottom:22px}
.related-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.related-card{display:flex;flex-direction:column;gap:12px;min-width:0}
.related-img{display:block;aspect-ratio:3/2;border-radius:6px;overflow:hidden;background:#f0f0f0}
.related-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.related-card:hover .related-img img{transform:scale(1.05)}
.related-cat{font-family:var(--font-ui);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#000}
.related-name{font-family:var(--font-heading);font-size:1.25rem;line-height:1.3;color:#111}
.related-card:hover .related-name{color:var(--accent-color)}
@media(max-width:600px){.related-grid{grid-template-columns:1fr;gap:26px}}
.article-back{text-align:center;margin-top:36px}
.back-to-archive{display:inline-flex;align-items:center;gap:10px;padding:13px 26px;border:1px solid var(--text-color);border-radius:4px;font-family:var(--font-ui);font-weight:600;font-size:.95rem;color:var(--text-color);transition:background .2s,color .2s}
.back-to-archive:hover{background:var(--text-color);color:#fff}

/* ── Betreiber-Overlay (HUD, nur eingeloggt) ─────────────────────────────── */
.admin-hud{position:fixed;right:16px;bottom:16px;z-index:1200;display:flex;align-items:center;gap:14px;background:#111;color:#cfcfcf;font-family:var(--font-ui);font-size:.8rem;padding:9px 15px;border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.28);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.admin-hud:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(0,0,0,.34)}
.admin-hud b{font-weight:700;color:#fff}
.admin-hud-row{display:inline-flex;gap:5px;align-items:baseline}
.admin-hud-link{color:#7fd1ac;font-weight:600}
.admin-hud-x{background:transparent;border:none;color:#8a8a8a;font-size:1.15rem;line-height:1;cursor:pointer;padding:0 0 0 2px}
.admin-hud-x:hover{color:#fff}
@media(max-width:600px){.admin-hud{left:16px;right:16px;justify-content:center;bottom:12px}}

/* ── Über ────────────────────────────────────────────────────────────────── */
.about-portrait{width:180px;height:180px;border-radius:50%;object-fit:cover;margin-bottom:30px;box-shadow:10px 10px 0 rgba(30,122,85,.12)}
.about-head{font-size:clamp(2.1rem,5vw,3rem);line-height:1.2;margin-bottom:26px}
.about-lead{font-family:var(--font-body);font-size:1.35rem;line-height:1.7;color:#444;margin-bottom:16px}
.about-bio{font-family:var(--font-body);font-size:1.08rem;line-height:1.75;color:#3a3a3a;margin-bottom:14px}
.about-bio a{color:inherit;text-decoration:none;background-image:linear-gradient(transparent 62%,rgba(30,122,85,.22) 62%);transition:background-image .2s}
.about-bio a:hover{background-image:linear-gradient(transparent 0,rgba(30,122,85,.20) 0)}
.about-note{font-family:var(--font-ui);font-size:.95rem;line-height:1.7;color:var(--text-light);margin-bottom:48px}
.about-label{font-family:var(--font-ui);font-size:.85rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-light);margin:48px 0 18px}
.about-topics{border-top:1px solid var(--border-color)}
.about-topic{padding:22px 0;border-bottom:1px solid var(--border-color)}
.about-topic h3{font-family:var(--font-heading);font-size:1.35rem;margin-bottom:6px}
.about-topic p{font-family:var(--font-ui);font-size:.95rem;color:var(--text-light);margin:0}
.about-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.about-chips a{font-family:var(--font-ui);font-size:.9rem;color:var(--text-color);border:1px solid var(--border-color);padding:8px 14px;border-radius:4px;display:inline-flex;align-items:center;gap:8px}
.about-chips a:hover{border-color:var(--accent-color);color:#000}

/* ── Legal ───────────────────────────────────────────────────────────────── */
.back-link{display:inline-flex;align-items:center;gap:10px;margin-bottom:44px;padding:12px 24px;border:1px solid var(--text-color);border-radius:4px;font-family:var(--font-ui);font-weight:600;font-size:.92rem;color:var(--text-color);transition:background .2s,color .2s}
.back-link:hover{background:var(--text-color);color:#fff}
.legal-hint{font-family:var(--font-ui);font-size:.85rem;color:var(--text-light);margin:14px 0 28px;padding:12px 14px;border:1px solid var(--border-color);background:#faf9f7;border-radius:4px}
.legal-body{font-family:var(--font-body);font-size:1.08rem;line-height:1.8;color:#333}
.legal-body h2{font-family:var(--font-ui);font-size:1.05rem;text-transform:uppercase;letter-spacing:1px;margin:36px 0 12px;color:#111}
.legal-body p{margin-bottom:16px}
.legal-body a{color:#000;border-bottom:1px solid var(--accent-color)}

/* ── Contact-Protection (Impressum) ──────────────────────────────────────── */
.cp-blur{filter:blur(5px);user-select:none;cursor:pointer;transition:filter .25s}
.cp-wrap{display:inline-flex;align-items:center;gap:6px}
.cp-btn{font-size:.75em;padding:1px 7px;border:1px solid currentColor;border-radius:3px;background:transparent;cursor:pointer;white-space:nowrap;opacity:.7}
.cp-btn:hover{opacity:1}

/* ── 404 ─────────────────────────────────────────────────────────────────── */
.notfound{max-width:600px;margin:0 auto;padding:100px 20px;text-align:center}
.notfound h1{font-size:3rem;margin-bottom:16px}
.notfound a{color:#000;border-bottom:1px solid var(--accent-color)}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width:768px){
    .mobile-menu-toggle{display:flex}
    .site-header nav{position:fixed;top:0;right:-100%;width:280px;max-width:80vw;height:100vh;background:#fff;flex-direction:column;padding:80px 32px 32px;gap:24px;align-items:flex-start;transition:right .3s ease;border-left:1px solid var(--border-color);overflow-y:auto;box-shadow:-4px 0 16px rgba(0,0,0,.1)}
    .site-header nav.active{right:0}
    .site-header nav a{font-size:1.1rem;width:100%;padding:12px 0;border-bottom:1px solid var(--border-color)}
    .btn-subscribe{width:100%;text-align:center;border-bottom:none}
    .container{padding:0 20px}
    .hero-container{grid-template-columns:1fr;gap:40px;padding:0 20px}
    .hero-image{height:280px;order:-1}
    .grid-feed{grid-template-columns:1fr}
    .newsletter-form{flex-direction:column}
    .newsletter-form button{padding:15px}
    .article-content{font-size:1.1rem}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}