: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:3rem 0 1.5rem;text-align:center}
.vk-hero h1{font-size:2.2rem;max-width:760px;margin:0 auto .6em}
.vk-sub{color:var(--vk-sub);max-width:600px;margin:0 auto;font-size:1.1rem}

/* Fortschrittsleiste */
.vk-fortschritt{padding:0 0 1.5rem}
.vk-progress-bar{height:6px;background:var(--vk-line);border-radius:999px;overflow:hidden;margin-bottom:.8rem}
.vk-progress-bar>div{height:100%;background:var(--vk-a);transition:width .3s}
.vk-progress-steps{display:flex;justify-content:space-between;font-size:.72rem;color:var(--vk-sub);flex-wrap:wrap;gap:.3rem}
.vk-progress-steps span{flex:1;text-align:center;position:relative}
.vk-progress-steps span.vk-aktiv{color:var(--vk-a-dark);font-weight:700}
.vk-progress-steps span.vk-fertig{color:var(--vk-a)}

/* Generator / Assistent */
.vk-generator{padding:0 0 3rem}
.vk-step{animation:vkIn .25s ease}
@keyframes vkIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.vk-step h2{font-size:1.5rem}
.vk-step-intro{color:var(--vk-sub);margin-bottom:1.3rem}
.vk-step-nav{display:flex;justify-content:space-between;gap:1rem;margin-top:1.6rem}

.vk-assistent-grid{display:grid;grid-template-columns:1fr 380px;gap:2.2rem;align-items:start}
.vk-assistent-links{min-width:0}

/* Schritt 1: Branchen/Stil */
.vk-branchen-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;margin-bottom:1.6rem}
.vk-tile{padding:.9rem .6rem;border:1px solid var(--vk-line);border-radius:10px;background:#fff;cursor:pointer;font:inherit;font-size:.92rem;text-align:center}
.vk-tile:hover{border-color:var(--vk-a)}
.vk-tile.vk-aktiv{background:var(--vk-a);color:#fff;border-color:var(--vk-a)}
.vk-chip-row{display:flex;gap:.6rem;flex-wrap:wrap}
.vk-chip{padding:.5rem 1.1rem;border-radius:999px;border:1px solid var(--vk-line);background:#fff;cursor:pointer;font:inherit;font-size:.9rem}
.vk-chip:hover{border-color:var(--vk-a)}
.vk-chip.vk-aktiv{background:var(--vk-a-dark);color:#fff;border-color:var(--vk-a-dark)}

/* Schritt 2: Galerie */
.vk-s2-stile{margin-bottom:1.2rem}
.vk-gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1rem}
.vk-gal-karte{border:2px solid var(--vk-line);border-radius:12px;padding:.6rem;background:#fff;cursor:pointer;text-align:left}
.vk-gal-karte canvas{width:100%;height:auto;border-radius:6px;display:block}
.vk-gal-label{display:block;font-size:.82rem;margin-top:.5rem;color:var(--vk-sub)}
.vk-gal-label em{color:var(--vk-a-dark);font-style:normal;font-weight:600}
.vk-gal-karte:hover{border-color:var(--vk-a)}
.vk-gal-karte.vk-aktiv{border-color:var(--vk-a-dark)}

/* Schritt 3: Formular + Karte */
.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-feld input[type=range]{padding:0}
.vk-zeile2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.vk-hinweis{font-size:.82rem;color:var(--vk-sub);margin-top:.8rem}
.vk-klein{font-size:.82rem;color:var(--vk-sub)}

.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:.45;cursor:not-allowed}

.vk-preview-aside{position:sticky;top:84px}
.vk-karten{display:flex;flex-direction:column;gap:1.5rem;width:100%}
.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;display:block}

/* Overlay: direkt auf der Karte tippen */
#vk-overlay{position:absolute;inset:0;pointer-events:none}
#vk-overlay [data-feld]{position:absolute;pointer-events:none;outline:none;color:transparent;caret-color:#1b6e5c;background:transparent;white-space:nowrap;overflow:hidden}
#vk-overlay.vk-overlay-aktiv [data-feld]{pointer-events:auto;cursor:text}
#vk-overlay.vk-overlay-aktiv [data-feld]:hover,#vk-overlay.vk-overlay-aktiv [data-feld]:focus{background:rgba(27,110,92,.12);outline:1px dashed rgba(27,110,92,.5)}
.vk-overlay-hinweis{font-size:.8rem;color:var(--vk-sub);text-align:center;margin-top:.6rem}

/* Schritt 4: Rückseite */
.vk-back-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;margin-bottom:1.2rem}
.vk-back-option{display:flex;flex-direction:column;gap:.3rem;text-align:left;padding:1rem;border:1px solid var(--vk-line);border-radius:10px;background:#fff;cursor:pointer;font:inherit}
.vk-back-option strong{font-size:1rem}
.vk-back-option span{color:var(--vk-sub);font-size:.88rem}
.vk-back-option em{color:var(--vk-a-dark);font-style:normal;font-size:.8rem}
.vk-back-option:hover{border-color:var(--vk-a)}
.vk-back-option.vk-aktiv{border-color:var(--vk-a-dark);background:#f2f8f5}

/* Schritt 5: Druck-Prüfung */
.vk-checks{list-style:none;padding:0;margin:0 0 1.2rem;display:flex;flex-direction:column;gap:.5rem}
.vk-checks li{padding:.6rem .8rem;border-radius:8px;font-size:.92rem}
.vk-check-ok{background:#eef7f1;color:#1b6e5c}
.vk-check-warn{background:#fdf0e4;color:#9a4a12}
.vk-check-pflicht{display:flex;align-items:flex-start;gap:.6rem;margin-top:1.2rem;font-size:.95rem}

/* Schritt 6: Berater */
.vk-berater-frage{margin-bottom:1.3rem}
.vk-berater-frage h3{font-size:1rem;margin-bottom:.5rem}
.vk-zettel{background:#fff;border:1px solid var(--vk-line);border-radius:12px;padding:1.3rem;margin-top:1rem}
.vk-zettel ul{list-style:none;padding:0;margin:0 0 1rem;font-size:.95rem}
.vk-zettel li{padding:.35rem 0;border-bottom:1px solid var(--vk-line)}
.vk-zettel li:last-child{border-bottom:none}
#s6-hinweis{color:var(--vk-sub);font-size:.9rem;margin-bottom:1rem}
.vk-zettel-aktionen{display:flex;gap:.7rem;flex-wrap:wrap}

/* Schritt 7: Website-Vorschau (Galario-Hinführung) */
.vk-browser-mock{--sw-akzent:#1b6e5c;border:1px solid var(--vk-line);border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 10px 30px rgba(20,40,32,.1)}
.vk-browser-top{display:flex;align-items:center;gap:.8rem;padding:.7rem 1rem;background:#f1f3f1;border-bottom:1px solid var(--vk-line)}
.vk-browser-dots{display:flex;gap:.3rem}
.vk-browser-dots i{width:9px;height:9px;border-radius:50%;background:#d7dcd9;display:block}
.vk-browser-url{background:#fff;border:1px solid var(--vk-line);border-radius:999px;padding:.25rem .9rem;font-size:.8rem;color:var(--vk-sub)}
.vk-browser-body{padding:2rem 1.8rem}
.vk-sw-hero{display:flex;align-items:center;gap:1.1rem;margin-bottom:1.4rem}
.vk-sw-logo{width:64px;height:64px;border-radius:50%;background:var(--sw-akzent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.5rem;flex:none;overflow:hidden}
.vk-sw-logo img{width:100%;height:100%;object-fit:contain;background:#fff}
.vk-sw-firma{display:block;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--sw-akzent);font-weight:700}
.vk-sw-name{font-size:1.4rem;font-weight:700;font-family:Georgia,serif}
.vk-sw-leistungen{list-style:none;padding:0;margin:0 0 1.2rem;display:flex;gap:.6rem;flex-wrap:wrap}
.vk-sw-leistungen li{background:#f3f7f5;border:1px solid var(--vk-line);border-radius:999px;padding:.35rem .9rem;font-size:.85rem}
.vk-sw-galerie{display:grid;grid-template-columns:repeat(6,1fr);gap:.5rem;margin-bottom:1.2rem}
.vk-sw-galerie div{aspect-ratio:1;border-radius:6px;background:linear-gradient(135deg,var(--sw-akzent),#d8d8d8)}
.vk-sw-kontakt{color:var(--vk-sub);font-size:.9rem;border-top:1px solid var(--vk-line);padding-top:1rem;margin:0}
.vk-sw-cta-row{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.3rem}

/* Galario-Hinweisblock (Startseite / Branchenseiten) */
.vk-galario-block{background:#fff;border:1px solid var(--vk-line);border-radius:14px;padding:1.4rem}
.vk-galario-block h2{font-size:1.15rem}
.vk-galario-block p{color:var(--vk-sub);font-size:.95rem}
.vk-galario-block.vk-galario-prominent{background:linear-gradient(135deg,#eef7f1,#fff);border-color:var(--vk-a);padding:1.8rem}
.vk-galario-block.vk-galario-prominent h2{font-size:1.4rem}
.vk-galario-block.vk-galario-prominent p{font-size:1.02rem;color:var(--vk-ink)}

/* Drei-Spalten (nach dem Assistenten) */
.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-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-assistent-grid{grid-template-columns:1fr}
  .vk-preview-aside{position:static;order:-1}
  .vk-branchen-grid{grid-template-columns:repeat(2,1fr)}
  .vk-back-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.6rem}
  .vk-progress-steps span{display:none}
  .vk-progress-steps span.vk-aktiv{display:block;flex:none;margin:0 auto}
}

.vk-datei::file-selector-button{margin-right:.7rem;padding:.4rem .9rem;border:1px solid var(--vk-line);border-radius:999px;background:#fff;font:inherit;font-weight:600;cursor:pointer}