@import url("../assets/phosphor/duotone.css");
/* ════════════════════════════════════════════════════════════
   KAPFIXIT — BLOG / RATGEBER STYLESHEET
   Übernimmt die Chrome der HAUPTSEITE (index.html): kf-nav, kf-btn,
   kf-eyebrow, kf-ticker, kf-footer, Körnung — damit der Ratgeber
   exakt wie die Startseite wirkt.
════════════════════════════════════════════════════════════ */

/* Phosphor-Icons (ersetzen Emojis) */
.ic .ph-duotone { line-height:1; color:var(--accent-light); }
.post-note .ph-duotone { color:var(--accent-light); }
.kf-btn .ph-duotone, .kf-nav-cta .ph-duotone { font-size:1.05em; }
.ic .ph-duotone, .post-note .ph-duotone, .kf-btn .ph-duotone, .kf-nav-cta .ph-duotone, a .ph-duotone { vertical-align:-0.12em; margin-right:0.4em; }

:root {
  --page-bg:#1c2844; --page-mid:#263a68;
  --surface:rgba(255,255,255,0.06); --surface-2:rgba(255,255,255,0.1);
  --border:rgba(255,255,255,0.1);
  --text:#eef1fa; --text-soft:rgba(238,241,250,0.85); --text-dim:rgba(238,241,250,0.5);
  --font-display:'Bebas Neue',sans-serif; --font-head:'Syne',sans-serif; --font-body:'DM Sans',sans-serif;
  /* default = blue / security (wie Hauptseite) */
  --accent:#3b82f6; --accent-light:#60a5fa; --accent-soft:#93c5fd;
  --accent-glow:rgba(59,130,246,0.5); --accent-shadow:rgba(59,130,246,0.35);
  --accent-bg:rgba(59,130,246,0.1); --accent-bg-2:rgba(59,130,246,0.18); --accent-border:rgba(59,130,246,0.28);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--font-body);
  background:
    radial-gradient(ellipse at 50% -10%, rgba(59,130,246,0.16) 0%, transparent 55%),
    linear-gradient(180deg, var(--page-bg) 0%, var(--page-mid) 100%), var(--page-bg);
  background-repeat:no-repeat;
  color:var(--text); line-height:1.65; min-height:100vh; overflow-x:hidden;
}
/* Noise grain — identisch zur Hauptseite */
body::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:9990; opacity:0.4;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }

.kf-wrap { max-width:1380px; margin:0 auto; padding:0 56px; }

/* ── NAV (wie Hauptseite) ── */
.kf-nav {
  position:fixed; top:0; left:0; right:0; z-index:500;
  padding:18px 56px; display:flex; justify-content:space-between; align-items:center;
  backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
  background:rgba(11,18,37,0.6); border-bottom:1px solid rgba(255,255,255,0.06);
}
.kf-brand { display:flex; align-items:center; gap:12px; }
.kf-brand-logo { height:36px; width:auto; filter:brightness(1.1); }
.kf-nav-links { display:flex; gap:28px; list-style:none; align-items:center; }
.kf-nav-links a { font-family:var(--font-head); font-size:0.72rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-soft); transition:color 0.3s; }
.kf-nav-links a:hover { color:#fff; }
.kf-nav-cta { background:var(--accent); color:#fff; padding:9px 22px; border-radius:5px; transition:opacity 0.3s; }
.kf-nav-cta:hover { opacity:0.88; }

/* ── BUTTONS (wie Hauptseite) ── */
.kf-btn {
  display:inline-block; font-family:var(--font-head); font-weight:700; font-size:0.82rem;
  letter-spacing:0.1em; text-transform:uppercase; padding:14px 38px; border-radius:5px;
  border:none; cursor:pointer; transition:transform 0.3s ease, box-shadow 0.3s ease, background 0.4s ease, border-color 0.4s ease;
}
.kf-btn-primary { background:var(--accent); color:#fff; position:relative; overflow:hidden; }
.kf-btn-primary:hover { transform:translateY(-3px); box-shadow:0 14px 44px var(--accent-glow); }
.kf-btn-ghost { background:transparent; color:var(--text); border:1px solid rgba(255,255,255,0.15); }
.kf-btn-ghost:hover { border-color:rgba(255,255,255,0.38); background:rgba(255,255,255,0.05); transform:translateY(-2px); }

/* ── TYPO HELPERS ── */
.kf-section { padding:88px 0; position:relative; z-index:2; }
.kf-h2 { font-family:var(--font-head); font-size:clamp(2rem,4.5vw,3.4rem); font-weight:800; line-height:1.05; color:#fff; }
.kf-body { font-size:1.02rem; line-height:1.85; color:var(--text-soft); max-width:560px; }
.kf-label { display:flex; align-items:center; gap:10px; font-family:var(--font-head); font-size:0.67rem; font-weight:700; letter-spacing:0.32em; text-transform:uppercase; color:var(--accent-light); margin-bottom:14px; }
.kf-label::before { content:''; width:22px; height:1px; background:var(--accent-light); flex-shrink:0; }
.kf-eyebrow { font-family:var(--font-head); font-size:0.7rem; font-weight:700; letter-spacing:0.32em; text-transform:uppercase; color:var(--accent-light); margin-bottom:22px; display:flex; align-items:center; gap:10px; }
.kf-live-dot { width:7px; height:7px; background:#22c55e; border-radius:50%; display:inline-block; box-shadow:0 0 8px rgba(34,197,94,0.8); animation:kfBlink 2.5s infinite; flex-shrink:0; }
@keyframes kfBlink { 0%,100%{opacity:1} 50%{opacity:0.2} }

/* ── BLOG HERO (Gitter wie Hauptseiten-Hero, statt Canvas) ── */
.blog-hero { position:relative; padding:150px 0 56px; overflow:hidden; }
.blog-hero::before {
  content:''; position:absolute; left:0; right:0; top:0; height:560px; z-index:0; pointer-events:none; opacity:0.5;
  background-image:linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(180deg, transparent 55%, var(--page-bg) 100%);
  background-size:54px 54px, 54px 54px, 100% 100%;
}
.blog-hero > * { position:relative; z-index:1; }
.blog-hero .hl { color:var(--accent); }
.blog-display { font-family:var(--font-display); font-size:clamp(2.6rem,7vw,5.6rem); line-height:0.92; letter-spacing:0.01em; color:#fff; margin:6px 0 0; }
.blog-display .hl { color:var(--accent); }

/* ── TICKER (wie Hauptseite) ── */
.kf-ticker-wrap { position:relative; z-index:2; background:rgba(11,18,37,0.95); border-top:1px solid rgba(255,255,255,0.06); border-bottom:1px solid rgba(255,255,255,0.06); padding:14px 0; overflow:hidden; }
.kf-ticker-track { display:flex; width:max-content; animation:kfTicker 32s linear infinite; }
@keyframes kfTicker { from{transform:translateX(0);} to{transform:translateX(-50%);} }
.kf-ticker-item { display:flex; align-items:center; gap:10px; padding:0 48px; white-space:nowrap; font-family:var(--font-head); font-size:0.72rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-soft); }
.kf-ticker-dot { width:4px; height:4px; background:var(--accent); border-radius:50%; flex-shrink:0; }
.kf-ticker-item strong { color:rgba(232,237,248,0.85); }

/* ── BLOG GRID (Übersicht) ── */
.blog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1.4rem; }
.blog-card { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:26px; transition:transform .2s, border-color .2s; }
.blog-card:hover { transform:translateY(-4px); border-color:var(--accent-border); }
.blog-card .cat { font-family:var(--font-head); font-size:0.66rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent-light); margin-bottom:12px; }
.blog-card h2 { font-family:var(--font-head); font-weight:800; color:var(--text); font-size:1.25rem; line-height:1.25; margin-bottom:10px; }
.blog-card p { color:var(--text-soft); font-size:0.92rem; line-height:1.6; flex:1; }
.blog-card .meta { color:var(--text-dim); font-size:0.76rem; margin-top:16px; display:flex; gap:9px; align-items:center; flex-wrap:wrap; }
.blog-card .more { color:var(--accent-light); font-weight:700; font-size:0.86rem; margin-top:14px; font-family:var(--font-head); letter-spacing:0.04em; }
.blog-soon { border-style:dashed; opacity:0.65; }
.blog-soon h2 { color:var(--text-soft); }

/* ── ARTICLE PROSE ── */
.post-wrap { max-width:820px; }
.post-meta { display:flex; flex-wrap:wrap; gap:14px; align-items:center; font-size:0.82rem; color:var(--text-dim); margin-top:20px; }
.post-meta .dot { opacity:0.4; }
.post-author { display:inline-flex; align-items:center; gap:8px; }
.post-author img { width:30px; height:30px; border-radius:50%; object-fit:cover; }
.post-body { font-size:1.05rem; color:var(--text-soft); line-height:1.8; }
.post-body h2 { font-family:var(--font-head); font-weight:800; color:var(--text); font-size:1.55rem; line-height:1.25; margin:2.6rem 0 .9rem; }
.post-body h3 { font-family:var(--font-head); font-weight:700; color:var(--text); font-size:1.18rem; margin:1.9rem 0 .6rem; }
.post-body p { margin:0 0 1.1rem; }
.post-body ul, .post-body ol { margin:0 0 1.2rem 1.2rem; }
.post-body li { margin:.45rem 0; }
.post-body strong { color:var(--text); }
.post-body a { color:var(--accent-light); text-decoration:underline; text-underline-offset:3px; }
.post-answer { background:var(--accent-bg-2); border:1px solid var(--accent-border); border-left:4px solid var(--accent); border-radius:14px; padding:20px 22px; margin:0 0 1.6rem; color:var(--text); font-size:1.05rem; line-height:1.7; }
.post-answer strong { color:var(--accent-light); }
.post-table { width:100%; border-collapse:collapse; margin:1rem 0 1.6rem; font-size:0.95rem; }
.post-table th, .post-table td { text-align:left; padding:12px 14px; border-bottom:1px solid var(--border); }
.post-table th { font-family:var(--font-head); color:var(--text); font-weight:700; background:var(--surface); }
.post-table td:last-child { font-weight:700; color:var(--accent-light); white-space:nowrap; }
.post-note { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px 18px; font-size:0.92rem; color:var(--text-soft); margin:1.4rem 0; }
.post-toc { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:18px 22px; margin:0 0 2rem; }
.post-toc strong { font-family:var(--font-head); color:var(--text); display:block; margin-bottom:8px; font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; }
.post-toc a { color:var(--accent-light); display:block; padding:3px 0; font-size:0.95rem; }
.post-cta-inline { background:linear-gradient(135deg, var(--accent-bg-2), var(--surface)); border:1px solid var(--accent-border); border-radius:16px; padding:24px; margin:2.2rem 0; text-align:center; }
.post-cta-inline h3 { font-family:var(--font-head); color:var(--text); margin:0 0 .4rem; font-size:1.2rem; }
.post-cta-inline p { color:var(--text-soft); font-size:0.95rem; margin:0 0 16px; }
.post-cta-inline .kf-hero-btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.breadcrumb { font-size:0.8rem; color:var(--text-dim); margin-bottom:10px; }
.breadcrumb a { color:var(--text-dim); }
.breadcrumb a:hover { color:var(--accent-light); }

/* ── FAQ ACCORDION ── */
.kf-faq { display:flex; flex-direction:column; gap:10px; margin-top:.6rem; }
.kf-faq-item { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:0 20px; }
.kf-faq-q { font-family:var(--font-head); font-weight:700; color:var(--text); font-size:0.98rem; padding:16px 0; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:14px; }
.kf-faq-q::-webkit-details-marker { display:none; }
.kf-faq-q::after { content:'+'; color:var(--accent-light); font-size:1.3rem; line-height:1; }
.kf-faq-item[open] .kf-faq-q::after { content:'−'; }
.kf-faq-a { color:var(--text-soft); font-size:0.92rem; line-height:1.7; padding:0 0 18px; }

/* ── RELATED CARDS ── */
.kf-related-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; margin-top:1.4rem; }
.kf-related-card { display:block; padding:20px; border:1px solid var(--border); border-radius:14px; background:var(--surface); transition:transform .2s, border-color .2s; }
.kf-related-card:hover { transform:translateY(-3px); border-color:var(--accent-border); }
.kf-related-card .ic { font-size:1.7rem; }
.kf-related-card strong { display:block; color:var(--text); font-family:var(--font-head); margin:8px 0 2px; }
.kf-related-card span { color:var(--text-dim); font-size:0.85rem; }

/* ── BIG CTA ── */
.kf-cta { text-align:center; background:linear-gradient(135deg, var(--accent-bg-2), var(--surface)); border:1px solid var(--accent-border); border-radius:24px; padding:56px 32px; margin:0 auto; }
.kf-cta h2 { font-family:var(--font-head); font-weight:800; color:#fff; font-size:clamp(1.6rem,3.5vw,2.4rem); margin-bottom:12px; }
.kf-cta p { color:var(--text-soft); max-width:520px; margin:0 auto 24px; }
.kf-cta .kf-hero-btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ── FOOTER (wie Hauptseite) ── */
.kf-footer { background:#15223a; border-top:1px solid rgba(255,255,255,0.06); padding:80px 56px 44px; position:relative; z-index:2; }
.kf-footer-grid { max-width:1380px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:64px; margin-bottom:56px; }
.kf-footer-logo-row { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.kf-footer-logo-row img { height:36px; width:auto; }
.kf-footer-tagline { font-size:0.86rem; color:var(--text-soft); line-height:1.82; max-width:280px; }
.kf-footer-col-head { font-family:var(--font-head); font-size:0.65rem; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:var(--text-dim); margin-bottom:20px; }
.kf-footer-col ul { list-style:none; display:flex; flex-direction:column; gap:11px; }
.kf-footer-col a { font-size:0.86rem; color:var(--text-soft); transition:color .25s; }
.kf-footer-col a:hover { color:#fff; }
.kf-footer-bottom { max-width:1380px; margin:0 auto; padding-top:30px; border-top:1px solid rgba(255,255,255,0.06); display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.kf-footer-bottom span { font-size:0.78rem; color:rgba(255,255,255,0.3); }

/* ── STICKY MOBILE CALL BAR ── */
.kf-callbar { position:fixed; bottom:0; left:0; right:0; z-index:600; display:none; gap:1px; background:rgba(255,255,255,0.08); }
.kf-callbar a { flex:1; text-align:center; padding:14px; background:rgba(11,18,37,0.96); color:#fff; font-family:var(--font-head); font-weight:700; font-size:0.82rem; }
.kf-callbar a:first-child { color:var(--accent-light); }

/* ── RESPONSIVE ── */
@media (max-width:880px) {
  .kf-wrap { padding:0 22px; }
  .kf-nav { padding:14px 22px; }
  .kf-nav-links { display:none; }
  .kf-footer { padding:56px 22px 90px; }
  .kf-footer-grid { grid-template-columns:1fr 1fr; gap:34px; }
  .kf-callbar { display:flex; }
  body { padding-bottom:54px; }
}
@media (max-width:520px) {
  .kf-footer-grid { grid-template-columns:1fr; }
}