:root{
  --rot:#C53A2B;
  --rot-dunkel:#a82e21;
  --schwarz:#141414;
  --silber:#9CA1A6;
  --tinte:#2a2c2f;
  --linie:#e9e6e4;
  --karte:#ffffff;
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--tinte);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
  min-height:100dvh;
  display:flex; justify-content:center; align-items:flex-start;
  padding:max(20px,env(safe-area-inset-top)) 18px calc(36px + env(safe-area-inset-bottom));
  background:
    radial-gradient(120% 60% at 50% 0%, #2a2c2f 0%, transparent 60%),
    linear-gradient(180deg, #ebe9e7 0%, #e2dfdc 100%);
  background-attachment:fixed;
}

/* ---------- Karte ---------- */
.vc{
  width:100%; max-width:440px;
  background:var(--karte);
  border-radius:26px;
  box-shadow:0 30px 60px -24px rgba(20,20,20,.42), 0 8px 22px -14px rgba(20,20,20,.28);
  overflow:hidden;
  position:relative;
}

/* ---------- Kopf: dunkel, technisch, roter Akzent ---------- */
.vc-hero{
  position:relative; text-align:center;
  padding:38px 28px 30px;
  background:
    radial-gradient(135% 100% at 85% 0%, rgba(197,58,43,.32), transparent 58%),
    linear-gradient(158deg, #2b2b2b 0%, #1a1a1a 52%, #0e0e0e 100%);
  color:#fff;
}
.vc-hero::before{ /* roter Akzentstreifen oben */
  content:""; position:absolute; left:0; right:0; top:0; height:8px; background:var(--rot);
}
.vc-hero::after{ /* feine Diagonal-Schraffur, Ecke unten rechts */
  content:""; position:absolute; right:0; bottom:0; width:230px; height:230px;
  background:repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 4px, transparent 4px 18px);
  -webkit-mask:linear-gradient(315deg,#000,transparent 72%);
          mask:linear-gradient(315deg,#000,transparent 72%);
  pointer-events:none;
}
.badge{
  width:176px; height:176px; margin:10px auto 16px;
  background:#fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 18px 38px -14px rgba(0,0,0,.6), inset 0 0 0 7px rgba(255,255,255,.65);
  position:relative; z-index:1;
}
.badge img{ width:140px; height:140px; object-fit:contain; display:block; }
.vc-hero .name{
  font-weight:800;
  font-size:46px; line-height:.95; margin:0; position:relative; z-index:1;
  letter-spacing:.005em;
}
.vc-hero .rule{ width:54px; height:3px; background:var(--rot); margin:4px auto 15px; position:relative; z-index:1; }
.vc-hero .marke{
  margin:0 0 9px; font-size:12px; font-weight:800;
  letter-spacing:.34em; text-transform:uppercase; color:var(--rot); position:relative; z-index:1;
}
.vc-hero .tag{
  margin:0; font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.78); position:relative; z-index:1;
}
.vc-hero .slogan{
  margin:15px 0 0; font-style:italic; font-weight:800;
  font-size:18px; color:#fff; position:relative; z-index:1;
}

/* ---------- Aktions-Buttons ---------- */
.vc-actions{
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
  padding:22px 20px 6px;
}
.act{
  appearance:none; border:0; cursor:pointer; text-decoration:none;
  font-family:inherit; color:var(--schwarz);
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:13px 4px; border-radius:15px;
  background:#f4f2f1; box-shadow:inset 0 0 0 1px var(--linie);
  transition:transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.act svg{ width:23px; height:23px; stroke:var(--rot); }
.act span{ font-size:11px; font-weight:600; letter-spacing:.01em; }
.act:hover{ background:#efe9e7; transform:translateY(-2px); box-shadow:inset 0 0 0 1px #e0d6d3, 0 8px 18px -12px rgba(197,58,43,.5); }
.act:active{ transform:translateY(0); }
.act.primary{ background:var(--rot); color:#fff; box-shadow:0 12px 22px -12px rgba(197,58,43,.85); }
.act.primary svg{ stroke:#fff; }
.act.primary:hover{ background:var(--rot-dunkel); box-shadow:0 14px 24px -12px rgba(197,58,43,.95); }

/* ---------- Leistungen ---------- */
.vc-leistungen{ padding:20px 22px 4px; }
.vc-leistungen .titel{
  display:flex; align-items:center; gap:12px; margin:0 0 14px;
}
.vc-leistungen .titel span{
  font-size:11px; font-weight:800; letter-spacing:.28em;
  text-transform:uppercase; color:var(--rot); white-space:nowrap;
}
.vc-leistungen .titel .ln{ flex:1; height:1px; background:var(--linie); }
.vc-leistungen ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.vc-leistungen li{
  position:relative; padding-left:20px; font-size:14px; font-weight:500; color:var(--tinte); line-height:1.35;
}
.vc-leistungen li::before{
  content:""; position:absolute; left:0; top:.45em; width:7px; height:7px; background:var(--rot);
}

/* ---------- Kontakt-Liste ---------- */
.vc-list{ padding:14px 22px 6px; }
.row{
  display:flex; align-items:center; gap:16px;
  padding:15px 6px; text-decoration:none; color:inherit;
  border-top:1px solid var(--linie);
}
.row:first-child{ border-top:0; }
.row .ic{
  width:42px; height:42px; flex:none; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:#f6eeec; color:var(--rot);
}
.row .ic svg{ width:20px; height:20px; stroke:currentColor; }
.row .tx{ flex:1 1 auto; min-width:0; }
.row .lbl{ display:block; font-size:10.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--rot); }
.row .val{ display:block; font-size:16px; font-weight:500; color:var(--schwarz); margin-top:2px; line-height:1.25; word-break:break-word; }
.row .go{ margin-left:auto; color:#c6bdb9; flex:none; }
.row .go svg{ width:17px; height:17px; stroke:currentColor; }
.row:hover .ic{ background:var(--rot); color:#fff; }
.row:hover .go{ color:var(--rot); }

/* ---------- Fuss ---------- */
.vc-foot{
  margin-top:10px; padding:18px 22px 22px;
  text-align:center;
  background:linear-gradient(180deg,#fff 0%, #f4f2f1 100%);
}
.vc-foot .brand{ font-size:11px; font-weight:800; letter-spacing:.24em; text-transform:uppercase; color:#8c8580; }
.vc-foot .brand b{ color:var(--rot); }
.vc-foot .claim{ margin-top:6px; font-style:italic; font-weight:800; font-size:13px; color:var(--rot); }

/* ---------- Impressum ---------- */
.imp-link{ display:inline-block; margin-top:10px; font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#5d5854; text-decoration:none; border-bottom:1px solid rgba(93,88,84,.5); }
.imp-link:hover{ color:var(--rot); border-bottom-color:var(--rot); }
.imp-overlay{ position:fixed; inset:0; z-index:50; display:none; background:rgba(20,24,28,.55); backdrop-filter:blur(3px); padding:24px 16px; overflow-y:auto; }
.imp-overlay.offen{ display:block; }
.imp-box{ max-width:440px; margin:0 auto; background:#fff; border-radius:20px; padding:26px 24px 28px; box-shadow:0 30px 60px -20px rgba(0,0,0,.5); text-align:left; }
.imp-box h2{ margin:0 0 4px; font-size:15px; letter-spacing:.2em; text-transform:uppercase; color:var(--rot); }
.imp-box h3{ margin:20px 0 6px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#8c9aa2; font-weight:700; }
.imp-box p{ margin:0 0 4px; font-size:13.5px; line-height:1.55; }
.imp-box a{ color:var(--rot); text-decoration:none; }
.imp-box a:hover{ text-decoration:underline; }
.imp-box .klein{ margin-top:18px; font-size:11.5px; line-height:1.5; color:#7d8a92; }
.imp-zu{ display:block; width:100%; margin-top:22px; padding:13px; border:0; border-radius:13px; background:var(--rot); color:#fff; font-family:inherit; font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }
.imp-zu:hover{ filter:brightness(.92); }

@media (max-width:380px){
  .vc-actions{ gap:8px; padding:18px 14px 6px; }
  .act span{ font-size:10px; }
  .vc-hero .name{ font-size:40px; }
}