/* semco ONE – digitale Visitenkarte (geteilt von Karte + Studio-Vorschau) */
@font-face{font-family:Poppins;font-weight:300;font-display:swap;src:url(/fonts/poppins-300-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-weight:300;font-display:swap;src:url(/fonts/poppins-300-latin-ext.woff2) format("woff2");unicode-range:U+0100-02AF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;font-weight:400;font-display:swap;src:url(/fonts/poppins-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-weight:400;font-display:swap;src:url(/fonts/poppins-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02AF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;font-weight:500;font-display:swap;src:url(/fonts/poppins-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-weight:500;font-display:swap;src:url(/fonts/poppins-500-latin-ext.woff2) format("woff2");unicode-range:U+0100-02AF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;font-weight:600;font-display:swap;src:url(/fonts/poppins-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-weight:600;font-display:swap;src:url(/fonts/poppins-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-02AF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --navy:#12152D; --ink:#12152D; --muted:#5B6078; --line:#E6E8F0; --bg:#F4F5FA; --card:#fff;
  --orange:#FF6A00; --gelb:#FFD500; --rot:#E90000; --gruen:#01B366; --blau:#0047CA; --violett:#9541DE;
  --akzent:var(--blau);
}

.vc{font-family:Poppins,system-ui,sans-serif;color:var(--ink);background:var(--card);max-width:440px;margin:0 auto;min-height:100%;
  position:relative;overflow:hidden;-webkit-font-smoothing:antialiased}
.vc *{box-sizing:border-box}
.vc[data-bereich=orga]{--akzent:var(--orange)} .vc[data-bereich=team]{--akzent:var(--rot)}
.vc[data-bereich=link]{--akzent:var(--gruen)} .vc[data-bereich=tech]{--akzent:var(--blau)}

/* Kopf: Navy mit den vier Markenfarben als weiche Glows */
.vc-head{position:relative;background:var(--navy);padding:22px 22px 74px;overflow:hidden}
.vc-head::before{content:"";position:absolute;inset:-40% -30% auto auto;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,106,0,.55),rgba(255,213,0,0) 65%);filter:blur(6px)}
.vc-head::after{content:"";position:absolute;left:-90px;bottom:-120px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,71,202,.6),rgba(0,71,202,0) 65%)}
.vc-glow2{position:absolute;right:30%;bottom:-90px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(1,179,102,.38),transparent 65%);pointer-events:none}
.vc-logo{position:relative;z-index:1;height:30px;display:block}
.vc-stripe{position:absolute;left:0;right:0;bottom:0;height:5px;z-index:1;
  background:linear-gradient(90deg,var(--orange),var(--gelb) 22%,var(--rot) 22% 47%,var(--gruen) 47% 72%,var(--blau) 72%)}

/* Foto / Initialen */
.vc-avatar{position:relative;z-index:2;width:116px;height:116px;border-radius:50%;margin:-58px auto 0;background:#fff;padding:4px;
  box-shadow:0 10px 30px rgba(18,21,45,.18)}
.vc-avatar img,.vc-avatar span{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;object-fit:cover}
.vc-avatar span{background:linear-gradient(135deg,var(--navy),#2A2F5C);color:#fff;font-size:38px;font-weight:300;letter-spacing:.02em}

.vc-body{padding:14px 20px 8px;text-align:center}
.vc-name{font-size:25px;font-weight:500;line-height:1.2;margin:4px 0 2px;letter-spacing:-.01em}
.vc-pos{font-size:15px;color:var(--muted);margin:0}
.vc-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:10px}
.vc-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 12px 4px 8px;border-radius:99px;font-size:12px;font-weight:600;
  letter-spacing:.06em;color:#fff;background:var(--akzent)}
.vc-pill::before{content:"";width:8px;height:8px;border-radius:50%;background:#fff}
.vc-pill[data-b=orga]{background:var(--orange)}.vc-pill[data-b=team]{background:var(--rot)}
.vc-pill[data-b=link]{background:var(--gruen)}.vc-pill[data-b=tech]{background:var(--blau)}
.vc-pill[data-b=gl]{background:var(--navy)}
.vc-pill[data-b=gl]::before{background:linear-gradient(135deg,var(--orange) 0 50%,var(--blau) 50%)}
.vc-firma{font-size:13px;color:var(--muted);margin:10px 0 0}

/* Schnellaktionen */
.vc-quick{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;padding:16px 20px 6px}
.vc-quick a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px 10px;border-radius:16px;background:var(--bg);
  color:var(--ink);text-decoration:none;font-size:12px;font-weight:500;transition:transform .15s,background .15s}
.vc-quick a:active{transform:scale(.96)}
.vc-quick svg{width:22px;height:22px;stroke:var(--akzent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vc-quick .wa svg{stroke:var(--gruen)}

.vc-save{display:flex;align-items:center;justify-content:center;gap:10px;margin:12px 20px 0;padding:16px;border:0;border-radius:16px;width:calc(100% - 40px);
  background:var(--navy);color:#fff;font:600 16px Poppins,system-ui,sans-serif;cursor:pointer;box-shadow:0 8px 24px rgba(18,21,45,.25)}
.vc-save svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vc-row2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 20px 0}
.vc-ghost{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:14px;border:1px solid var(--line);background:#fff;
  color:var(--ink);font:500 14px Poppins,system-ui,sans-serif;cursor:pointer;text-decoration:none}
.vc-ghost svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Kontaktliste */
.vc-list{list-style:none;margin:18px 20px 0;padding:0;border-top:1px solid var(--line)}
.vc-list li{border-bottom:1px solid var(--line)}
.vc-list a,.vc-list div{display:flex;align-items:center;gap:14px;padding:13px 2px;color:var(--ink);text-decoration:none;text-align:left}
.vc-ic{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--bg)}
.vc-ic svg{width:18px;height:18px;stroke:var(--akzent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vc-list small{display:block;font-size:11px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.vc-list b{display:block;font-weight:400;font-size:15px;word-break:break-word}

.vc-claim{display:flex;align-items:center;gap:12px;margin:20px 20px 0;padding:16px 18px;border-radius:16px;font-size:14px;line-height:1.5;text-align:left;
  background:linear-gradient(120deg,rgba(255,106,0,.09),rgba(0,71,202,.08));color:var(--ink)}
.vc-claim img{height:28px;flex:none}
.vc-foot{display:flex;justify-content:center;gap:16px;padding:18px 20px 28px;font-size:12px}
.vc-foot a{color:var(--muted)}

/* QR-Overlay */
.vc-qr{position:fixed;inset:0;z-index:50;background:rgba(18,21,45,.92);display:none;align-items:center;justify-content:center;padding:24px}
.vc-qr.on{display:flex}
.vc-qr-box{background:#fff;border-radius:24px;padding:22px 22px 18px;text-align:center;width:min(340px,100%);font-family:Poppins,system-ui,sans-serif}
.vc-qr-box canvas{width:100%;height:auto;display:block}
.vc-qr-box p{margin:12px 0 0;font-size:14px;color:var(--muted)}
.vc-qr-box b{display:block;color:var(--ink);font-weight:500;font-size:17px}
.vc-qr-close{margin-top:14px;border:0;background:var(--bg);border-radius:12px;padding:10px 22px;font:500 14px Poppins,system-ui,sans-serif;cursor:pointer;color:var(--ink)}

.vc-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,40px);opacity:0;background:var(--navy);color:#fff;padding:10px 18px;
  border-radius:99px;font:500 14px Poppins,system-ui,sans-serif;transition:.25s;z-index:60;pointer-events:none}
.vc-toast.on{transform:translate(-50%,0);opacity:1}