:root{--vk-a:#1b6e5c;--vk-a-dark:#124a3d;--vk-ink:#17221f;--vk-sub:#5b6b66;--vk-line:#e2e8e4;--vk-bg:#f7f9f7;--vk-card:#fff}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--vk-ink);background:var(--vk-bg)}
h1,h2,h3{font-family:Georgia,'Times New Roman',serif;line-height:1.2;margin:0 0 .5em}
a{color:var(--vk-a-dark)}
.vk-wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* Nav */
.vk-nav{background:var(--vk-card);border-bottom:1px solid var(--vk-line);position:sticky;top:0;z-index:10}
.vk-nav-in{display:flex;align-items:center;justify-content:space-between;height:64px}
.vk-brand{display:flex;align-items:center;gap:.5rem;font-weight:700;text-decoration:none;color:var(--vk-ink)}
.vk-nav-links a{margin-left:1.5rem;text-decoration:none;color:var(--vk-ink);font-size:.95rem}
.vk-nav-links a:hover{color:var(--vk-a-dark)}

/* Hero */
.vk-hero{padding:3.5rem 0 2rem;text-align:center}
.vk-hero h1{font-size:2.3rem;max-width:760px;margin:0 auto .6em}
.vk-sub{color:var(--vk-sub);max-width:600px;margin:0 auto;font-size:1.1rem}

/* Generator */
.vk-generator{padding:1rem 0 3rem}
.vk-gen-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start}
.vk-form{background:var(--vk-card);border:1px solid var(--vk-line);border-radius:14px;padding:1.5rem}
.vk-feld{margin-bottom:1rem}
.vk-feld label{display:block;font-size:.85rem;font-weight:600;margin-bottom:.3rem;color:var(--vk-sub)}
.vk-feld input,.vk-feld select,.vk-feld textarea{width:100%;padding:.6rem .7rem;border:1px solid var(--vk-line);border-radius:8px;font:inherit;background:#fff}
.vk-feld input[type=color]{padding:.2rem;height:2.6rem}
.vk-zeile2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.vk-check{display:flex;align-items:center;gap:.5rem;font-size:.92rem;margin:.5rem 0 1.2rem}
.vk-export{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:.5rem}
.vk-hinweis{font-size:.82rem;color:var(--vk-sub);margin-top:.8rem}

.vk-btn{display:inline-block;padding:.7rem 1.3rem;border-radius:999px;border:1px solid var(--vk-a);background:#fff;color:var(--vk-a-dark);font-weight:600;cursor:pointer;text-decoration:none;font-size:.95rem}
.vk-btn-primary{background:var(--vk-a);color:#fff;border-color:var(--vk-a)}
.vk-btn-primary:hover{background:var(--vk-a-dark)}
.vk-btn-outline{background:transparent}
.vk-btn[disabled]{opacity:.55;cursor:not-allowed}

.vk-preview{display:flex;align-items:center;justify-content:center}
.vk-karten{display:flex;flex-direction:column;gap:1.5rem;width:100%;max-width:380px}
.vk-karte-wrap{position:relative}
.vk-karte-label{position:absolute;top:-1.4rem;left:0;font-size:.78rem;color:var(--vk-sub);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.vk-karten canvas{width:100%;height:auto;border-radius:10px;box-shadow:0 8px 28px rgba(20,40,32,.18);background:#fff}

/* Drei-Spalten */
.vk-dreispalt{padding:1rem 0 3rem}
.vk-dreispalt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.vk-karte-info{background:var(--vk-card);border:1px solid var(--vk-line);border-radius:14px;padding:1.4rem}
.vk-karte-info h2{font-size:1.15rem}
.vk-karte-info p{color:var(--vk-sub);font-size:.95rem}
.vk-mailform{display:flex;gap:.5rem;margin-top:.8rem;flex-wrap:wrap}
.vk-mailform input{flex:1 1 140px;padding:.55rem .7rem;border:1px solid var(--vk-line);border-radius:8px;font:inherit}
.vk-klein{font-size:.82rem;color:var(--vk-sub);margin-top:.6rem}
.vk-ok{color:var(--vk-a-dark);font-weight:600}

/* Ratgeber-Übersicht */
.vk-ratgeber{padding:1rem 0 4rem}
.vk-ratgeber h2{font-size:1.7rem;text-align:center;margin-bottom:1.5rem}
.vk-ratgeber-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
.vk-ratgeber-karte{display:block;background:var(--vk-card);border:1px solid var(--vk-line);border-radius:14px;padding:1.3rem;text-decoration:none;color:var(--vk-ink)}
.vk-ratgeber-karte:hover{border-color:var(--vk-a)}
.vk-ratgeber-karte h3{font-size:1.05rem;margin-bottom:.4rem}
.vk-ratgeber-karte p{color:var(--vk-sub);font-size:.9rem;margin:0}

/* Artikel */
.vk-artikel{padding:2.5rem 0 4rem}
.vk-artikel-wrap{max-width:720px}
.vk-breadcrumb{font-size:.85rem;color:var(--vk-sub)}
.vk-artikel h1{font-size:1.9rem}
.vk-artikel h2{font-size:1.3rem;margin-top:2rem}
.vk-faq details{border-bottom:1px solid var(--vk-line);padding:.7rem 0}
.vk-faq summary{cursor:pointer;font-weight:600}
.vk-faq p{color:var(--vk-sub);margin:.5rem 0 0}
.vk-cta{margin:2rem 0}
.vk-weitere{padding-left:1.1rem}
.vk-rechtsbild{max-width:100%;height:auto;border:1px solid var(--vk-line);border-radius:8px;padding:1rem;background:#fff}

.vk-fuss{border-top:1px solid var(--vk-line);padding:2rem 0;margin-top:2rem}
.vk-fuss-in{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.85rem;color:var(--vk-sub)}
.vk-fuss-links a{margin-left:1rem;color:var(--vk-sub)}

@media (max-width:860px){
  .vk-gen-grid{grid-template-columns:1fr}
  .vk-dreispalt-grid{grid-template-columns:1fr}
  .vk-ratgeber-grid{grid-template-columns:1fr}
  .vk-zeile2{grid-template-columns:1fr}
  .vk-hero h1{font-size:1.7rem}
  .vk-preview{order:-1}
}