/* withira.com — „Jetzt selbst verkaufen". Erbt Tokens/Klassen aus styles.css + katalog.css. */

/* ---- Hero ---- */
.vk-hero{max-width:880px;margin:0 auto;text-align:center;padding:128px 24px 24px;}
.vk-hero__title{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,5vw,4rem);line-height:1.08;margin:0 0 16px;}
.vk-hero__sub{font-size:clamp(1rem,1.4vw,1.16rem);color:var(--wi-text-dim);max-width:640px;margin:0 auto;}
.vk-hero__sub strong{color:var(--wi-text);}
.vk-hero__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:30px 0 0;}

/* ---- 3-Schritte ---- */
.vk-steps{list-style:none;padding:0;margin:30px auto 0;max-width:820px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.vk-steps li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;background:var(--wi-bg-2);border:1px solid var(--wi-line);border-radius:16px;padding:18px 14px;}
.vk-steps__n{width:34px;height:34px;border-radius:50%;background:var(--wi-grad-gold);color:#1a1408;font-weight:700;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:17px;}
.vk-steps strong{display:block;font-size:15px;color:var(--wi-text);margin-bottom:2px;}
.vk-steps span{display:block;}
.vk-steps li span:not(.vk-steps__n){font-size:12.5px;color:var(--wi-text-dim);line-height:1.4;}

/* ---- Formular ---- */
.vk-form{max-width:760px;margin:0 auto;background:var(--wi-bg-2);border:1px solid var(--wi-line);border-radius:22px;padding:28px;box-shadow:0 30px 70px -34px #000;}
.vk-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:16px;}
.vk-field{display:flex;flex-direction:column;gap:7px;}
.vk-field--full{grid-column:1 / -1;}
.vk-label{font-size:13px;font-weight:600;color:var(--wi-text);}
.vk-label em{color:var(--wi-gold);font-style:normal;}
.vk-hint{font-size:12.5px;color:var(--wi-text-dim);line-height:1.45;margin:-2px 0 2px;}
.vk-field input,.vk-field select,.vk-field textarea{
  background:var(--wi-bg-1);border:1px solid var(--wi-line);color:var(--wi-text);border-radius:12px;
  padding:12px 14px;font:inherit;font-size:14.5px;width:100%;transition:border-color .2s,box-shadow .2s;}
.vk-field input:focus,.vk-field select:focus,.vk-field textarea:focus{outline:none;border-color:var(--wi-gold);box-shadow:0 0 0 3px var(--wi-gold-glow);}
.vk-field textarea{resize:vertical;min-height:84px;line-height:1.5;}
.vk-field input[aria-invalid="true"],.vk-field select[aria-invalid="true"],.vk-field textarea[aria-invalid="true"]{border-color:#ff5e8a;box-shadow:0 0 0 3px color-mix(in srgb,#ff5e8a 22%,transparent);}

/* ---- Datei-Drop ---- */
.vk-drop{position:relative;border:1.5px dashed color-mix(in srgb,var(--wi-gold) 36%,var(--wi-line));border-radius:14px;background:var(--wi-bg-1);padding:26px 18px;text-align:center;transition:border-color .2s,background .2s;cursor:pointer;}
.vk-drop.is-drag{border-color:var(--wi-gold);background:color-mix(in srgb,var(--wi-gold) 8%,var(--wi-bg-1));}
.vk-drop input[type="file"]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;}
.vk-drop input[type="file"]:focus-visible + .vk-drop__inner{outline:2px solid var(--wi-gold);outline-offset:4px;border-radius:8px;}
.vk-drop__inner{display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;}
.vk-drop__ic{font-size:26px;color:var(--wi-gold);}
.vk-drop__txt{font-size:14px;color:var(--wi-text-dim);}
.vk-files{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:8px;}
.vk-files li{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--wi-bg-1);border:1px solid var(--wi-line);border-radius:10px;padding:9px 13px;font-size:13px;color:var(--wi-text);}
.vk-files li span.vk-files__size{color:var(--wi-text-dim);flex:none;font-variant-numeric:tabular-nums;}
.vk-files li.is-skip span.vk-files__name::after{content:" · nur Name vermerkt";color:var(--wi-text-dim);font-size:11.5px;}

/* ---- Checkbox ---- */
.vk-check{display:flex;align-items:flex-start;gap:11px;margin:18px 0 0;font-size:14px;color:var(--wi-text-dim);line-height:1.5;cursor:pointer;}
.vk-check input{flex:none;width:20px;height:20px;margin-top:1px;accent-color:var(--wi-gold);cursor:pointer;}
.vk-check a{color:var(--wi-gold-hi);text-decoration:underline;}
.vk-check a:hover{color:var(--wi-gold);}

/* ---- Fehler / Submit ---- */
.vk-error{margin:16px 0 0;padding:12px 15px;border-radius:12px;background:color-mix(in srgb,#ff5e8a 12%,var(--wi-bg-1));border:1px solid color-mix(in srgb,#ff5e8a 34%,var(--wi-line));color:#ffd0dd;font-size:14px;line-height:1.5;}
.vk-submit{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:22px 0 0;}
.vk-submit__note{font-size:12.5px;color:var(--wi-text-dim);line-height:1.45;flex:1;min-width:200px;}
.wi-btn[aria-busy="true"]{opacity:.75;pointer-events:none;}

/* ---- Ergebnis-Panel ---- */
.vk-result{max-width:760px;margin:22px auto 0;}
.vk-result__inner{background:var(--wi-bg-2);border:1px solid var(--wi-line);border-radius:20px;padding:26px;}
.vk-res-head{display:flex;align-items:center;gap:14px;margin-bottom:14px;}
.vk-res-badge{flex:none;display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;font-size:13px;font-weight:700;letter-spacing:.04em;}
.vk-res-badge--approve{background:color-mix(in srgb,#4fd6e0 16%,transparent);border:1px solid var(--wi-ai-cyan-soft);color:var(--wi-ai-cyan);}
.vk-res-badge--flag{background:color-mix(in srgb,var(--wi-gold) 16%,transparent);border:1px solid color-mix(in srgb,var(--wi-gold) 40%,transparent);color:var(--wi-gold-hi);}
.vk-res-badge--reject{background:color-mix(in srgb,#ff5e8a 14%,transparent);border:1px solid color-mix(in srgb,#ff5e8a 38%,transparent);color:#ffadc2;}
.vk-res-badge--pending{background:var(--wi-bg-1);border:1px solid var(--wi-line);color:var(--wi-text-dim);}
.vk-res-badge--info{background:var(--wi-ai-cyan-soft);border:1px solid color-mix(in srgb,var(--wi-ai-cyan) 30%,transparent);color:var(--wi-ai-cyan);}
.vk-res-title{font-family:var(--serif);font-weight:400;font-size:22px;margin:0;}
.vk-res-risk{font-size:12.5px;color:var(--wi-text-dim);margin-left:auto;}
.vk-res-summary{font-size:15px;color:var(--wi-text);line-height:1.6;margin:0 0 16px;}
.vk-res-grid{display:grid;gap:12px;}
.vk-res-card{background:var(--wi-bg-1);border:1px solid var(--wi-line);border-radius:14px;padding:14px 16px;}
.vk-res-card h4{margin:0 0 5px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--wi-gold);}
.vk-res-card p{margin:0;font-size:14px;color:var(--wi-text-dim);line-height:1.55;}
.vk-res-foot{margin:16px 0 0;font-size:13px;color:var(--wi-text-dim);line-height:1.5;}
.vk-res-foot strong{color:var(--wi-text);}

/* ---- Spinner (CDN-unabhängig) ---- */
.vk-spin{width:18px;height:18px;border-radius:50%;border:2.5px solid var(--wi-line);border-top-color:var(--wi-gold);animation:vkspin .8s linear infinite;flex:none;}
@keyframes vkspin{to{transform:rotate(360deg);}}

/* ---- Responsive ---- */
@media (max-width:760px){
  .vk-steps{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .vk-hero{padding:108px 16px 20px;}
  .vk-grid{grid-template-columns:1fr;}
  .vk-form{padding:20px;}
  .vk-result__inner{padding:20px;}
  .vk-res-head{flex-wrap:wrap;}
  .vk-res-risk{margin-left:0;}
}
@media (prefers-reduced-motion:reduce){
  .vk-spin{animation:none;border-top-color:var(--wi-gold);}
}