/* PFR Ghost Theme — Design-Tokens 1:1 aus pfr.works/assets/site.css */
@font-face{font-family:Figtree;font-weight:400 700;font-display:swap;src:url(../fonts/figtree-400.woff2) format("woff2")}
@font-face{font-family:Sora;font-weight:600 700;font-display:swap;src:url(../fonts/sora-600.woff2) format("woff2")}

:root{
  --ink:#0A2638; --body:#3E5767; --muted:#647A88;
  --primary:#005F8C; --deep:#003F68; --blue:#0084B5; --teal:#23C0CC;
  --tint:#E7F6F8; --surface:#F3F7F9; --line:#DCE6EB;
  --grad:linear-gradient(90deg,#004F7E,#0084B5,#23C0CC);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;padding-top:69px;background:#fff;color:var(--body);font:400 16px/1.6 var(--gh-font-body, Figtree, system-ui, sans-serif);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{list-style:none;padding:0}
img{max-width:100%;height:auto;display:block}
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--deep)}
hr{border:0;border-top:1px solid var(--line);margin:40px 0}

.skip{position:absolute;left:-999px}
.skip:focus{left:16px;top:16px;z-index:99;background:#fff;padding:8px 12px}
.wrap{max-width:1200px;margin:0 auto;padding-left:clamp(20px,4vw,40px);padding-right:clamp(20px,4vw,40px)}
.narrow{max-width:760px}
.sec{padding-top:clamp(56px,7vw,88px);padding-bottom:clamp(56px,7vw,88px)}
.bg-s{background:var(--surface)}
.bg-d{background:var(--ink);color:#CFE0E8}

.eyebrow{font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.bg-d .eyebrow{color:#7FD6DE}
.h2{font:600 clamp(30px,3.6vw,44px)/1.15 var(--gh-font-heading, Sora, sans-serif);letter-spacing:-.02em;color:var(--ink);margin:14px 0 18px;text-wrap:balance}
.bg-d .h2{color:#fff}
.lead{font-size:18px;max-width:720px;text-wrap:pretty}
.bar{height:4px;width:120px;border-radius:2px;background:var(--grad);margin:28px 0}
.muted{color:var(--muted);font-size:15px}
.small{font-size:15px}
.mt14{margin-top:14px}.mt24{margin-top:24px}.mt40{margin-top:40px}

.btn{display:inline-block;background:var(--primary);color:#fff;font-weight:600;padding:14px 24px;border-radius:10px;border:0;font-size:16px;cursor:pointer;font-family:inherit;white-space:nowrap}
.btn:hover{background:var(--deep);color:#fff}
.btn-o{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-o:hover{background:transparent;color:var(--primary);border-color:var(--primary)}

/* ---------- Header ---------- */
header.site{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
header.site nav{display:flex;align-items:center;justify-content:space-between;gap:24px;height:68px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font:700 22px var(--gh-font-heading, Sora, sans-serif);letter-spacing:.02em}
.brand:hover{color:var(--ink)}
.brand-sub{font:600 14px var(--gh-font-heading, Sora, sans-serif);color:var(--blue);letter-spacing:0;align-self:center}
.links{display:flex;gap:22px;white-space:nowrap;flex:1;justify-content:center;font-size:15px;font-weight:600}
.links a{color:var(--body)}
.links a:hover,.links a.active{color:var(--primary)}
.actions{display:flex;gap:12px;align-items:center}
.actions .btn{padding:12px 18px;font-size:15px}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0}
.burger span{display:block;width:20px;height:2px;border-radius:1px;background:var(--ink);transition:transform .2s,opacity .2s}
.menu{display:none;flex-direction:column;border-top:1px solid var(--line);background:#fff;padding:8px clamp(16px,4vw,40px) 20px;max-height:calc(100vh - 68px);overflow-y:auto;box-shadow:0 20px 40px -20px rgba(10,38,56,.3)}
.menu a{color:var(--ink);font-size:18px;font-weight:600;padding:14px 0;border-bottom:1px solid #EEF3F5}
.menu .btn{margin-top:20px;text-align:center;border:0;padding:14px;color:#fff}
header.site.open .menu{display:flex}
header.site.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
header.site.open .burger span:nth-child(2){opacity:0}
header.site.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:1079px){.links,.actions .btn{display:none}.burger{display:flex}}

/* ---------- Blog-Hero ---------- */
.bhero{padding-top:clamp(40px,6vw,72px);padding-bottom:clamp(40px,6vw,72px);border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fff,#F3F7F9)}
.bhero h1{font:600 clamp(36px,5vw,56px)/1.08 var(--gh-font-heading, Sora, sans-serif);letter-spacing:-.025em;color:var(--ink);margin-top:16px;max-width:900px;text-wrap:balance}
.bhero .lead{margin-top:24px}

/* ---------- Post-Grid ---------- */
.grid{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--min,320px)),1fr))}
.g-200{--min:200px}.g-240{--min:240px}.g-320{--min:320px}
.pcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:border-color .2s,box-shadow .2s,transform .2s}
.pcard:hover{border-color:var(--primary);box-shadow:0 30px 60px -30px rgba(10,38,56,.25);transform:translateY(-2px)}
.pcard-img{aspect-ratio:16/9;background:var(--tint);overflow:hidden}
.pcard-img img{width:100%;height:100%;object-fit:cover}
.pcard-body{display:flex;flex-direction:column;flex:1;padding:24px}
.pcard h2{font:600 20px/1.3 var(--gh-font-heading, Sora, sans-serif);color:var(--ink);margin:10px 0}
.pcard:hover h2{color:var(--primary)}
.pcard p{font-size:15px;flex:1}
.pcard-meta{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:18px;padding-top:16px;border-top:1px solid #EEF3F5;font-size:13px;color:var(--muted)}
.pcard-meta img{width:28px;height:28px;border-radius:14px;object-fit:cover}
.avatars{display:flex;align-items:center;flex-shrink:0}
.avatars:empty{display:none}
.avatars img+img{margin-left:-9px;box-shadow:0 0 0 2px #fff}
.badge{display:inline-block;align-self:flex-start;font-size:12px;font-weight:700;color:var(--deep);background:var(--tint);border-radius:999px;padding:4px 10px}
.feat{border:1px solid var(--blue)}

/* Featured (erster Post) über volle Breite */
.pcard-wide{grid-column:1/-1;flex-direction:row;flex-wrap:wrap}
.pcard-wide .pcard-img{flex:1 1 380px;aspect-ratio:auto;min-height:260px}
.pcard-wide .pcard-body{flex:1 1 380px;padding:clamp(24px,3vw,40px);justify-content:center}
.pcard-wide h2{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.02em}
.pcard-wide p{flex:0;font-size:17px}
@media(max-width:767px){.pcard-wide{flex-direction:column}.pcard-wide .pcard-img{aspect-ratio:16/9;min-height:0;flex:0 0 auto}.pcard-wide p{font-size:15px}}

/* ---------- Artikel ---------- */
.phead .narrow{max-width:880px}
.phead{padding-top:clamp(40px,6vw,64px);padding-bottom:32px;background:linear-gradient(180deg,#fff,#F3F7F9);border-bottom:1px solid var(--line)}
.crumbs{font-size:14px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--primary)}
.phead h1{font:600 clamp(32px,4.4vw,52px)/1.1 var(--gh-font-heading, Sora, sans-serif);letter-spacing:-.025em;color:var(--ink);margin-top:16px;text-wrap:balance}
.pmeta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:24px;font-size:15px;color:var(--muted)}
.pmeta img.avatar{width:36px;height:36px;border-radius:18px;object-fit:cover}
.pmeta b{color:var(--ink);font-weight:600}
.pfeature{margin:0 auto;max-width:1040px;padding:clamp(28px,4vw,48px) clamp(20px,4vw,40px) 0}
.pfeature img{border-radius:16px;width:100%}
.pfeature figcaption{font-size:14px;color:var(--muted);text-align:center;margin-top:12px}

.prose{max-width:760px;margin:0 auto;padding:clamp(32px,4vw,56px) clamp(20px,4vw,40px) clamp(56px,7vw,88px);font-size:17px;line-height:1.7}
.prose > * + *{margin-top:22px}
.prose h2{font:600 clamp(24px,2.6vw,32px)/1.2 var(--gh-font-heading, Sora, sans-serif);letter-spacing:-.02em;color:var(--ink);margin-top:48px}
.prose h3{font:600 20px/1.3 var(--gh-font-heading, Sora, sans-serif);color:var(--ink);margin-top:36px}
.prose h4{font:600 17px/1.3 var(--gh-font-heading, Sora, sans-serif);color:var(--ink);margin-top:28px}
.prose a{text-decoration:underline;text-underline-offset:3px}
.prose strong{color:var(--ink)}
.prose ul,.prose ol{padding-left:0}
.prose ul li{position:relative;padding-left:20px;margin-top:10px}
.prose ul li:before{content:"";position:absolute;left:0;top:11px;width:6px;height:6px;border-radius:3px;background:var(--teal)}
.prose ol{counter-reset:li}
.prose ol li{position:relative;padding-left:38px;margin-top:10px;counter-increment:li}
.prose ol li:before{content:counter(li);position:absolute;left:0;top:3px;width:24px;height:24px;border-radius:12px;background:var(--tint);color:var(--primary);font:700 12px var(--gh-font-heading, Sora, sans-serif);display:flex;align-items:center;justify-content:center}
.prose blockquote{border-left:3px solid var(--teal);background:var(--surface);border-radius:0 12px 12px 0;padding:20px 24px;font-size:18px;color:var(--ink)}
.prose code{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:2px 6px;font-size:.9em;color:var(--deep)}
.prose pre{background:var(--ink);color:#CFE0E8;border-radius:12px;padding:20px 24px;overflow-x:auto;font-size:14px;line-height:1.6}
.prose pre code{background:0;border:0;padding:0;color:inherit}
.prose table{width:100%;border-collapse:collapse;font-size:15px}
.prose th,.prose td{border:1px solid var(--line);padding:10px 14px;text-align:left}
.prose th{background:var(--surface);color:var(--ink);font-weight:600}
.prose img,.prose video,.prose iframe{border-radius:12px}

/* Ghost Koenig-Cards */
.prose .kg-card{margin-top:32px}
.kg-width-wide{max-width:1040px;margin-left:calc(50% - min(520px,46vw));width:min(1040px,92vw)}
.kg-width-full{width:100vw;margin-left:calc(50% - 50vw);border-radius:0}
.kg-width-full img{border-radius:0}
.kg-image-card figcaption,.kg-embed-card figcaption,.kg-gallery-card figcaption{font-size:14px;color:var(--muted);text-align:center;margin-top:12px}
.kg-bookmark-card a.kg-bookmark-container{display:flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:12px;overflow:hidden;color:var(--body);text-decoration:none}
.kg-bookmark-card a.kg-bookmark-container:hover{border-color:var(--primary)}
.kg-bookmark-content{flex:1 1 300px;padding:20px 24px}
.kg-bookmark-title{font:600 17px var(--gh-font-heading, Sora, sans-serif);color:var(--ink)}
.kg-bookmark-description{font-size:15px;margin-top:8px;color:var(--muted)}
.kg-bookmark-metadata{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted);margin-top:14px}
.kg-bookmark-icon{width:18px;height:18px}
.kg-bookmark-thumbnail{flex:0 0 200px}
.kg-bookmark-thumbnail img{width:100%;height:100%;object-fit:cover}
.kg-callout-card{display:flex;gap:14px;border-radius:12px;padding:20px 24px;background:var(--tint)}
.kg-callout-emoji{flex-shrink:0}
.kg-button-card{display:flex;justify-content:center}
.kg-btn{display:inline-block;background:var(--primary);color:#fff;font-weight:600;padding:14px 24px;border-radius:10px;text-decoration:none}
.kg-btn:hover{background:var(--deep);color:#fff}
.kg-toggle-card{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0}
.kg-toggle-heading{display:flex;justify-content:space-between;gap:16px;cursor:pointer}
.kg-toggle-card-icon{width:16px;flex-shrink:0}
.kg-gallery-row{display:flex;gap:12px}
.kg-gallery-image{flex:1}

/* Tags unter dem Artikel */
.tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}
.prose .tags li{display:block;margin-top:0;padding-left:0}
.prose .tags li:before{content:none;display:none}
.tags a{display:flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:999px;padding:10px 18px;font-size:15px;font-weight:600;color:var(--ink)}
.tags a:hover{border-color:var(--primary);color:var(--primary)}

/* Autoren-Box */
.abox+.abox{margin-top:16px}
.abox{display:flex;gap:20px;flex-wrap:wrap;align-items:center;background:var(--surface);border-radius:16px;padding:28px;margin-top:40px}
.abox img{width:64px;height:64px;border-radius:32px;object-fit:cover}
.abox h3{font:600 18px var(--gh-font-heading, Sora, sans-serif);color:var(--ink)}
.abox p{font-size:15px;margin-top:6px;max-width:560px}

/* CTA + verwandte Beiträge */
.pcta{background:var(--ink);color:#CFE0E8;border-radius:16px;padding:clamp(28px,4vw,48px);display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.pcta .h2{color:#fff;margin:0;font-size:clamp(24px,2.8vw,34px)}
.pcta p{margin-top:10px;max-width:520px}
.rel{margin-top:28px;gap:16px}
.rel a.relc{display:block;border:1px solid var(--line);border-radius:12px;padding:20px;font-weight:600;color:var(--ink)}
.rel a.relc:hover{border-color:var(--primary);color:var(--primary)}
.rel .rel-title:after{content:" →";color:var(--blue)}
.rel .rel-date{display:block;font-size:13px;font-weight:400;color:var(--muted);margin-top:8px}

/* Paginierung */
.pag{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:56px;font-weight:600}
.pag .page{color:var(--muted);font-weight:400;font-size:15px}

/* Newsletter / Abo */
.subs{background:var(--surface);border-radius:16px;padding:clamp(28px,4vw,40px);max-width:760px;margin:0 auto}
.subs form{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.subs input{flex:1 1 240px;font:400 16px var(--gh-font-body, Figtree, sans-serif);padding:12px 14px;border:1px solid #C9D7DE;border-radius:10px;outline:none}
.subs input:focus{border-color:var(--blue);box-shadow:0 0 0 3px #D3EEF3}

/* Leerer Zustand / Fehlerseite */
.empty{text-align:center;padding:clamp(64px,10vw,120px) 0}
.ecode{font:600 clamp(64px,10vw,120px)/1 var(--gh-font-heading, Sora, sans-serif);background:linear-gradient(90deg,#004F7E,#23C0CC);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Footer ---------- */
footer.site .grid{padding:56px 0 32px;gap:40px}
footer.site h2{font-size:14px;font-weight:700;color:#fff;margin-bottom:12px}
footer.site li{margin-bottom:8px;font-size:15px}
footer.site a{color:#CFE0E8}
footer.site a:hover{color:#fff}
.copy{border-top:1px solid rgba(255,255,255,.12);padding:20px 0 32px;font-size:14px;color:#9DB4C0}
.flogo{background:#fff;border-radius:8px;padding:4px}
.brand-f{color:#fff;font-size:20px}
.brand-f:hover{color:#fff}
.fh{font-size:14px;font-weight:700;color:#fff;margin-bottom:12px}

@media(max-width:639px){.wrap{padding-left:16px;padding-right:16px}.pcard-body{padding:20px}.kg-width-wide{width:auto;margin-left:0}}