/* ============================================================
 * Rafuna Wissen Blog – Frontend Styles v1.1
 * Marke: Magenta #d6006c · Blau #0096e0 · Anthrazit #16181d
 * ============================================================ */
.rafuna-wrap{
  --raf-mag:#d6006c; --raf-mag-d:#b00059; --raf-blue:#0096e0; --raf-blue-d:#0079b8;
  --raf-ink:#16181d; --raf-text:#2b2d33; --raf-muted:#6b7280;
  --raf-line:#e8eaee; --raf-bg:#f6f7f9; --raf-card:#fff; --raf-radius:14px;
  --raf-shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.06);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--raf-text); line-height:1.65; max-width:1180px; margin:0 auto;
  padding:24px 20px 60px; -webkit-font-smoothing:antialiased;
}
.rafuna-wrap *{box-sizing:border-box}
.rafuna-grid{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:44px; align-items:start}
.rafuna-main{min-width:0}

/* ── Breadcrumbs ─────────────────────────────────────────── */
.rafuna-crumb{font-size:13px; color:var(--raf-muted); margin:0 0 16px; display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.rafuna-crumb a{color:var(--raf-muted); text-decoration:none}
.rafuna-crumb a:hover{color:var(--raf-mag)}
.rafuna-crumb .sep{opacity:.5}

/* ── Badge ───────────────────────────────────────────────── */
.rafuna-badge{display:inline-block; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:5px 12px; border-radius:999px; text-decoration:none; color:#fff; background:var(--raf-mag)}
.rafuna-badge.blue{background:var(--raf-blue)}
.rafuna-badge:hover{filter:brightness(.94)}

/* ── Titel + Meta ────────────────────────────────────────── */
.rafuna-title{font-size:clamp(28px,4vw,40px); line-height:1.18; font-weight:800; color:var(--raf-ink); margin:14px 0 14px; letter-spacing:-.01em}
.rafuna-postmeta{display:flex; align-items:center; gap:12px; color:var(--raf-muted); font-size:14px; margin:0 0 26px}
.rafuna-postmeta b{color:var(--raf-text); font-weight:600}
.rafuna-avatar{width:40px; height:40px; border-radius:50%; background:var(--raf-mag); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex:0 0 auto}

/* ── Hero ────────────────────────────────────────────────── */
.rafuna-hero{margin:0 0 30px}
.rafuna-hero img{width:100%; height:auto; border-radius:var(--raf-radius); display:block; box-shadow:var(--raf-shadow)}
.rafuna-fallback{position:relative; height:300px; border-radius:var(--raf-radius); margin:0 0 30px; overflow:hidden;
  background:linear-gradient(135deg,var(--raf-mag),var(--raf-blue)); display:flex; align-items:center; justify-content:center}
.rafuna-fallback.blue{background:linear-gradient(135deg,var(--raf-blue),#00b4ff)}
.rafuna-fallback::after{content:""; position:absolute; inset:0; opacity:.10;
  background-image:linear-gradient(45deg,#000 25%,transparent 25%,transparent 75%,#000 75%),linear-gradient(45deg,#000 25%,transparent 25%,transparent 75%,#000 75%);
  background-size:36px 36px; background-position:0 0,18px 18px}
.rafuna-fallback span{position:relative; color:#fff; font-weight:800; font-size:26px; letter-spacing:.04em; text-transform:uppercase}

/* ── Artikel-Inhalt ──────────────────────────────────────── */
.rafuna-content{font-size:17.5px; color:var(--raf-text)}
.rafuna-content > p:first-of-type{font-size:19px; color:#383b42}
.rafuna-content p{margin:0 0 1.15em}
.rafuna-content a{color:var(--raf-mag-d); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px}
.rafuna-content a:hover{color:var(--raf-mag)}
.rafuna-content strong{color:var(--raf-ink); font-weight:700}
.rafuna-content h2{font-size:25px; line-height:1.3; font-weight:800; color:var(--raf-ink);
  margin:2em 0 .7em; padding:0 0 0 16px; border-left:5px solid var(--raf-mag); scroll-margin-top:90px}
.rafuna-content h3{font-size:20px; line-height:1.35; font-weight:700; color:var(--raf-ink); margin:1.6em 0 .5em}
.rafuna-content ul,.rafuna-content ol{margin:0 0 1.2em; padding-left:0; list-style:none}
.rafuna-content ul li,.rafuna-content ol li{position:relative; padding-left:30px; margin:.5em 0}
.rafuna-content ul li::before{content:""; position:absolute; left:6px; top:.62em; width:8px; height:8px;
  border-radius:50%; background:var(--raf-mag)}
.rafuna-content ol{counter-reset:raf}
.rafuna-content ol li{counter-increment:raf}
.rafuna-content ol li::before{content:counter(raf); position:absolute; left:0; top:.05em; width:22px; height:22px;
  background:var(--raf-blue); color:#fff; border-radius:50%; font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center}
.rafuna-content blockquote{margin:1.4em 0; padding:14px 20px; border-left:4px solid var(--raf-blue);
  background:var(--raf-bg); border-radius:0 10px 10px 0; color:#3a3d44; font-style:italic}
.rafuna-content img{max-width:100%; height:auto; border-radius:10px}
.rafuna-content figure{margin:1.6em 0}
.rafuna-content figcaption{font-size:13px; color:var(--raf-muted); margin-top:8px; text-align:center}

/* ── TL;DR-Box ───────────────────────────────────────────── */
.rafuna-tldr{background:linear-gradient(180deg,#fff,#fdf2f8); border:1px solid #f4d4e6;
  border-left:5px solid var(--raf-mag); border-radius:12px; padding:20px 22px 18px; margin:0 0 28px; box-shadow:var(--raf-shadow)}
.rafuna-tldr .label,.rafuna-tldr strong:first-child{display:inline-block; background:var(--raf-mag); color:#fff;
  font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:4px 11px; border-radius:999px; margin:0 0 12px}
.rafuna-tldr ul{margin:0; padding:0; list-style:none}
.rafuna-tldr li{position:relative; padding-left:28px; margin:.45em 0; color:var(--raf-text)}
.rafuna-tldr li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--raf-mag); font-weight:800}

/* ── Info-/Tipp-Callout ──────────────────────────────────── */
.rafuna-info{background:#eef8fd; border:1px solid #cdeafa; border-left:5px solid var(--raf-blue);
  border-radius:12px; padding:16px 20px; margin:1.6em 0; color:#2b2d33}
.rafuna-info strong{color:var(--raf-blue-d)}

/* ── Tabellen ────────────────────────────────────────────── */
.rafuna-tablewrap{overflow-x:auto; margin:1.6em 0; border:1px solid var(--raf-line); border-radius:12px; box-shadow:var(--raf-shadow)}
.rafuna-content table{border-collapse:collapse; width:100%; min-width:460px; font-size:15.5px; background:#fff}
.rafuna-content th,.rafuna-content td{padding:12px 16px; text-align:left; border-bottom:1px solid var(--raf-line); vertical-align:top}
.rafuna-content thead th{background:var(--raf-mag); color:#fff; font-weight:700; border-bottom:none; white-space:nowrap}
.rafuna-content tbody tr:nth-child(even){background:#faf7f9}
.rafuna-content tbody tr:hover{background:#fdeef5}
.rafuna-content table tr:last-child td{border-bottom:none}

/* ── FAQ-Accordion ───────────────────────────────────────── */
.rafuna-faqlist{margin:1.2em 0 0; display:flex; flex-direction:column; gap:12px}
details.rafuna-faq{border:1px solid var(--raf-line); border-radius:12px; background:#fff; overflow:hidden; box-shadow:var(--raf-shadow); transition:border-color .15s}
details.rafuna-faq[open]{border-color:#f4c6df}
.rafuna-faq summary{list-style:none; cursor:pointer; padding:16px 52px 16px 20px; position:relative;
  font-weight:700; font-size:17px; color:var(--raf-ink); user-select:none}
.rafuna-faq summary::-webkit-details-marker{display:none}
.rafuna-faq summary:hover{color:var(--raf-mag)}
.rafuna-faq summary::after{content:""; position:absolute; right:20px; top:50%; width:11px; height:11px; margin-top:-7px;
  border-right:2.5px solid var(--raf-mag); border-bottom:2.5px solid var(--raf-mag); transform:rotate(45deg); transition:transform .2s}
.rafuna-faq[open] summary::after{transform:rotate(-135deg)}
.rafuna-faq .rafuna-faq-a{padding:0 20px 18px; color:var(--raf-text)}
.rafuna-faq .rafuna-faq-a p{margin:0 0 .6em}
.rafuna-faq .rafuna-faq-a :last-child{margin-bottom:0}

/* ── Autoren-Box ─────────────────────────────────────────── */
.rafuna-author{display:flex; gap:16px; align-items:flex-start; background:var(--raf-card); border:1px solid var(--raf-line);
  border-radius:var(--raf-radius); padding:20px 22px; margin:36px 0 0; box-shadow:var(--raf-shadow)}
.rafuna-author .av{width:52px; height:52px; border-radius:50%; background:var(--raf-mag); color:#fff; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px}
.rafuna-author h3{margin:2px 0 4px; font-size:17px; color:var(--raf-ink)}
.rafuna-author p{margin:0; color:var(--raf-muted); font-size:14.5px}

/* ── CTA-Banner ──────────────────────────────────────────── */
.rafuna-banner{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  background:linear-gradient(135deg,var(--raf-ink),#23262e); color:#fff; border-radius:var(--raf-radius);
  padding:26px 28px; margin:26px 0 0}
.rafuna-banner .t{font-size:22px; font-weight:800; margin:0 0 4px}
.rafuna-banner .s{margin:0; color:rgba(255,255,255,.78); font-size:15px}
.rafuna-btn{display:inline-block; background:var(--raf-mag); color:#fff; text-decoration:none; font-weight:700;
  padding:14px 28px; border-radius:10px; white-space:nowrap; transition:background .15s,transform .15s}
.rafuna-btn:hover{background:var(--raf-mag-d); transform:translateY(-1px)}

/* ── Verwandte Beiträge ──────────────────────────────────── */
.rafuna-related{margin:48px 0 0}
.rafuna-related > h2{font-size:22px; font-weight:800; color:var(--raf-ink); margin:0 0 18px}
.rafuna-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:20px}
.rafuna-card{background:var(--raf-card); border:1px solid var(--raf-line); border-radius:var(--raf-radius); overflow:hidden;
  display:flex; flex-direction:column; box-shadow:var(--raf-shadow); transition:transform .15s,box-shadow .15s}
.rafuna-card:hover{transform:translateY(-3px); box-shadow:0 12px 30px rgba(16,24,40,.12)}
.rafuna-card .thumb{display:block; aspect-ratio:16/10; background:linear-gradient(135deg,var(--raf-mag),var(--raf-blue));
  position:relative; overflow:hidden}
.rafuna-card .thumb.blue{background:linear-gradient(135deg,var(--raf-blue),#00b4ff)}
.rafuna-card .thumb img{width:100%; height:100%; object-fit:cover}
.rafuna-card .thumb span{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; letter-spacing:.05em; text-transform:uppercase; font-size:16px}
.rafuna-card .in{padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px; flex:1}
.rafuna-card h3{margin:2px 0 0; font-size:17px; line-height:1.3}
.rafuna-card h3 a{color:var(--raf-ink); text-decoration:none}
.rafuna-card h3 a:hover{color:var(--raf-mag)}
.rafuna-card .ex{margin:0; color:var(--raf-muted); font-size:14px; flex:1}
.rafuna-card .meta{display:flex; justify-content:space-between; color:#9aa0aa; font-size:12.5px; margin-top:4px}

/* ── Sidebar ─────────────────────────────────────────────── */
.rafuna-side .sticky{position:sticky; top:24px; display:flex; flex-direction:column; gap:18px}
.rafuna-side .box{background:var(--raf-card); border:1px solid var(--raf-line); border-radius:var(--raf-radius); padding:18px 20px; box-shadow:var(--raf-shadow)}
.rafuna-side .box h4{margin:0 0 12px; font-size:14px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:var(--raf-ink)}
.rafuna-toc a{display:block; padding:7px 0 7px 14px; border-left:2px solid var(--raf-line); color:var(--raf-muted);
  text-decoration:none; font-size:14.5px; line-height:1.4; transition:.12s}
.rafuna-toc a:hover{color:var(--raf-mag); border-color:var(--raf-mag)}
.rafuna-toc a.active{color:var(--raf-mag); border-color:var(--raf-mag); font-weight:600}
.rafuna-search input{width:100%; padding:11px 14px; border:1px solid var(--raf-line); border-radius:10px; font-size:14px; background:var(--raf-bg)}
.rafuna-search input:focus{outline:none; border-color:var(--raf-blue); background:#fff}
.rafuna-catlist a{display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid var(--raf-line);
  color:var(--raf-text); text-decoration:none; font-size:15px}
.rafuna-catlist a:last-child{border-bottom:none}
.rafuna-catlist a:hover{color:var(--raf-mag)}
.rafuna-catlist .c{background:var(--raf-bg); color:var(--raf-muted); font-size:12px; font-weight:700; min-width:24px; text-align:center; padding:2px 8px; border-radius:999px}
.rafuna-side .box.rafuna-ctabox{background:linear-gradient(135deg,var(--raf-mag),var(--raf-blue)); border:none; color:#fff}
.rafuna-side .box.rafuna-ctabox h4{color:#fff}
.rafuna-side .box.rafuna-ctabox p{margin:0 0 12px; color:rgba(255,255,255,.92); font-size:14px}
.rafuna-side .box.rafuna-ctabox .tel{display:inline-block; background:#fff; color:var(--raf-mag-d); font-weight:800; text-decoration:none;
  padding:10px 18px; border-radius:10px; font-size:16px}
.rafuna-side .box.rafuna-ctabox .tel:hover{background:#fff; color:var(--raf-mag)}
.rafuna-recent a{display:block; padding:8px 0; border-bottom:1px solid var(--raf-line); color:var(--raf-text); text-decoration:none; font-size:14.5px; line-height:1.4}
.rafuna-recent a:last-child{border-bottom:none}
.rafuna-recent a:hover{color:var(--raf-mag)}

/* ── Hub / Kategorie ─────────────────────────────────────── */
.rafuna-hub-head{margin:0 0 26px}
.rafuna-hub-head h1{font-size:clamp(28px,4vw,40px); font-weight:800; color:var(--raf-ink); margin:0 0 8px}
.rafuna-chips{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 28px}
.rafuna-chip,.rafuna-chips a{display:inline-block; padding:8px 16px; border-radius:999px; background:#fff; border:1px solid var(--raf-line);
  color:var(--raf-text); text-decoration:none; font-size:14px; font-weight:600; transition:.12s}
.rafuna-chips a:hover,.rafuna-chip:hover{border-color:var(--raf-mag); color:var(--raf-mag)}
.rafuna-chips a.active{background:var(--raf-mag); color:#fff; border-color:var(--raf-mag)}
.rafuna-loadmore{margin:34px 0 0; display:flex; justify-content:center; gap:8px; flex-wrap:wrap}
.rafuna-loadmore .page-numbers{display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 12px;
  border:1px solid var(--raf-line); border-radius:10px; background:#fff; color:var(--raf-text); text-decoration:none; font-weight:600}
.rafuna-loadmore .page-numbers.current{background:var(--raf-mag); color:#fff; border-color:var(--raf-mag)}
.rafuna-loadmore a.page-numbers:hover{border-color:var(--raf-mag); color:var(--raf-mag)}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width:980px){
  .rafuna-grid{grid-template-columns:1fr; gap:34px}
  .rafuna-side .sticky{position:static}
}
@media (max-width:560px){
  .rafuna-wrap{padding:16px 16px 44px}
  .rafuna-content{font-size:16.5px}
  .rafuna-content h2{font-size:22px}
  .rafuna-banner{padding:22px}
  .rafuna-fallback{height:200px}
}