:root{
  --hellblau:#A7D5E8;
  --tuerkis:#1AA1AB;
  --mittelblau:#6688C4;
  --marine:#1C2F5C;
  --tinte:#33414f;
  --linie:#e6edf1;
  --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%, #dfeef3 0%, transparent 60%),
    linear-gradient(180deg, #eaf3f6 0%, #e3edf1 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,47,92,.30), 0 8px 22px -14px rgba(20,47,92,.18);
  overflow:hidden;
  position:relative;
}

/* ---------- Kopf: ruhiger Blau-Verlauf ---------- */
.vc-hero{
  position:relative; text-align:center;
  padding:40px 28px 30px;
  background:
    radial-gradient(135% 100% at 85% 0%, rgba(167,213,232,.55), transparent 55%),
    linear-gradient(158deg, #1aa1ab 0%, #1a7d93 46%, #1c2f5c 100%);
  color:#fff;
}
.vc-hero::after{ /* feine Klang-/Ripple-Kreise, Cranio-Motiv */
  content:""; position:absolute; left:-70px; bottom:-90px; width:240px; height:240px; border-radius:50%;
  background:repeating-radial-gradient(circle at center, transparent 0 18px, rgba(255,255,255,.10) 18px 19px);
  -webkit-mask:radial-gradient(circle at center,#000 55%,transparent 72%);
          mask:radial-gradient(circle at center,#000 55%,transparent 72%);
  pointer-events:none;
}
.badge{
  width:184px; height:184px; margin:6px auto 20px;
  background:#fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 18px 38px -14px rgba(11,40,70,.5), inset 0 0 0 7px rgba(255,255,255,.6);
  position:relative; z-index:1;
}
.badge img{ width:148px; height:148px; object-fit:contain; display:block; }
.vc-hero .institut-zusatz{
  margin:-6px 0 4px; font-size:11px; font-weight:600; letter-spacing:.46em; text-transform:uppercase;
  color:rgba(255,255,255,.62); position:relative; z-index:1;
}
.vc-hero .script{
  font-size:58px; line-height:.9; margin:0; position:relative; z-index:1;
  text-shadow:0 2px 16px rgba(11,30,60,.25);
}
.vc-hero .rule{ width:54px; height:1px; background:rgba(255,255,255,.5); margin:14px auto; position:relative; z-index:1; }
.vc-hero .tag{
  margin:0; font-size:11.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--hellblau); 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(--marine);
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:13px 4px; border-radius:15px;
  background:#f3f8fa; 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(--tuerkis); }
.act span{ font-size:11px; font-weight:600; letter-spacing:.01em; }
.act:hover{ background:#eaf4f6; transform:translateY(-2px); box-shadow:inset 0 0 0 1px #cfe4ea, 0 8px 18px -12px rgba(26,161,171,.55); }
.act:active{ transform:translateY(0); }
.act.primary{ background:var(--tuerkis); color:#fff; box-shadow:0 12px 22px -12px rgba(26,161,171,.85); }
.act.primary svg{ stroke:#fff; }
.act.primary:hover{ background:#138e98; box-shadow:0 14px 24px -12px rgba(26,161,171,.95); }

/* ---------- Kontakt-Liste ---------- */
.vc-list{ padding:18px 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:#eef6f8; color:var(--tuerkis);
}
.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(--tuerkis); }
.row .val{ display:block; font-size:16px; font-weight:500; color:var(--marine); margin-top:2px; line-height:1.25; word-break:break-word; }
.row .go{ margin-left:auto; color:#b9c6cf; flex:none; }
.row .go svg{ width:17px; height:17px; stroke:currentColor; }
.row:hover .ic{ background:var(--tuerkis); color:#fff; }
.row:hover .go{ color:var(--tuerkis); }

/* ---------- Fuss ---------- */
.vc-foot{
  margin-top:10px; padding:18px 22px 22px;
  text-align:center;
  background:linear-gradient(180deg,#fff 0%, #f4f9fa 100%);
}
.vc-foot .brand{ font-size:11px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:#8aa0ad; }
.vc-foot .brand b{ color:var(--tuerkis); font-weight:700; }

/* ---------- Impressum ---------- */
.imp-link{ display:inline-block; margin-top:10px; font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#5c7280; text-decoration:none; border-bottom:1px solid rgba(92,114,128,.5); }
.imp-link:hover{ color:#1AA1AB; border-bottom-color:#1AA1AB; }
.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:#1AA1AB; }
.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:#1AA1AB; text-decoration:none; }
.imp-box a:hover{ text-decoration:underline; }
.imp-zu{ display:block; width:100%; margin-top:22px; padding:13px; border:0; border-radius:13px; background:#1AA1AB; 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 .script{ font-size:52px; }
}