/* ==========================================================================
   QR Studio – Digitale Visitenkarte (öffentliche Seite) mit 10 Designs
   ========================================================================== */

@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/inter-400.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/inter-500.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/inter-600.woff") format("woff"); }
@font-face { font-family: "Serif Display"; font-weight: 400 700; font-style: normal; font-display: swap; src: url("../fonts/lora-var.woff") format("woff"); }

.vc {
  --vc-page: #eef1f5;
  --vc-surface: #ffffff;
  --vc-text: #16181d;
  --vc-muted: #5f6672;
  --vc-line: rgba(20, 24, 32, .09);
  --vc-accent: #2563eb;
  --vc-on-accent: #ffffff;
  --vc-tint: color-mix(in srgb, var(--vc-accent) 11%, transparent);
  --vc-radius: 22px;
  --vc-radius-sm: 14px;
  --vc-shadow: 0 30px 70px -30px rgba(15, 23, 42, .35);
  --vc-head: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --vc-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --vc-head-weight: 600;
  --vc-band-h: 118px;
  --vc-band: var(--vc-accent);
  --vc-logo-size: 104px;
  --vc-logo-bg: #ffffff;
  --vc-logo-radius: 50%;
  --vc-align: center;
  --vc-btn-bg: var(--vc-tint);
  --vc-btn-text: var(--vc-accent);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.vc, .vc-frame {
  margin: 0;
  min-height: 100vh;
  background: var(--vc-page);
  color: var(--vc-text);
  font-family: var(--vc-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.vc a { color: inherit; }
.vc a.vc-save { color: var(--vc-on-accent); }
.vc :focus-visible { outline: 2px solid var(--vc-accent); outline-offset: 3px; border-radius: 8px; }
.vc svg { width: 22px; height: 22px; flex: none; }

.vc-preview-note { background: #fde68a; color: #422006; text-align: center; font-size: .86rem; padding: 8px 16px; font-weight: 500; }

.vc-wrap { width: 100%; max-width: 460px; margin: 0 auto; padding: 24px 16px calc(28px + env(safe-area-inset-bottom)); }
.vc-card {
  position: relative;
  background: var(--vc-surface);
  border-radius: var(--vc-radius);
  box-shadow: var(--vc-shadow);
  overflow: hidden;
  padding: 0 22px 24px;
  animation: vc-in .55s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes vc-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Kopf */
.vc-head { position: relative; text-align: var(--vc-align); padding-top: calc(var(--vc-band-h) - var(--vc-logo-size) / 2); }
.vc-band { position: absolute; inset: 0 -22px auto; height: var(--vc-band-h); background: var(--vc-band); }
.vc-logo {
  position: relative;
  width: var(--vc-logo-size); height: var(--vc-logo-size);
  margin: 0 auto 14px;
  border-radius: var(--vc-logo-radius);
  background: var(--vc-logo-bg);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .35), 0 0 0 4px var(--vc-surface);
  display: grid; place-items: center;
  overflow: hidden;
}
.vc-logo img { width: 82%; height: 82%; object-fit: contain; }
.vc-logo-initials span { font-family: var(--vc-head); font-weight: 700; font-size: calc(var(--vc-logo-size) * .36); color: var(--vc-accent); letter-spacing: .02em; }
.vc-company { font-family: var(--vc-head); font-weight: var(--vc-head-weight); font-size: 1.6rem; line-height: 1.15; margin: 0 0 6px; letter-spacing: -.01em; }
.vc-tagline { margin: 0 0 14px; color: var(--vc-muted); font-size: .97rem; }
.vc-person { display: flex; align-items: center; justify-content: var(--vc-align); gap: 12px; margin: 6px 0 4px; text-align: left; }
.vc-photo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--vc-tint); }
.vc-name { margin: 0; font-weight: 600; font-size: 1.05rem; font-family: var(--vc-body); }
h1.vc-name { font-family: var(--vc-head); font-size: 1.6rem; font-weight: var(--vc-head-weight); }
.vc-role { margin: 0; color: var(--vc-muted); font-size: .9rem; }

/* Schnellkontakt */
.vc-actions { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 10px; margin: 20px 0 14px; }
.vc-n1 { --n: 1; } .vc-n2 { --n: 2; } .vc-n3 { --n: 3; } .vc-n4 { --n: 4; }
.vc-actions a {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 13px 4px 11px; border-radius: var(--vc-radius-sm);
  background: var(--vc-btn-bg); color: var(--vc-btn-text);
  text-decoration: none; font-size: .78rem; font-weight: 600;
  transition: transform .15s ease, filter .15s ease;
}
.vc-actions a:hover { filter: brightness(1.06); }
.vc-actions a:active { transform: scale(.96); }
.vc-ai { display: grid; place-items: center; }

.vc-save {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 15px 18px; border-radius: var(--vc-radius-sm);
  background: var(--vc-accent); color: var(--vc-on-accent);
  font-weight: 600; text-decoration: none; font-size: 1rem;
  box-shadow: 0 12px 26px -14px var(--vc-accent);
  transition: transform .15s ease, filter .15s ease;
}
.vc-save:hover { filter: brightness(1.07); }
.vc-save:active { transform: scale(.98); }

.vc-about { margin: 22px 0 6px; }
.vc-about h2 { font-family: var(--vc-head); font-weight: var(--vc-head-weight); font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; color: var(--vc-muted); margin: 0 0 8px; }
.vc-about p { margin: 0; font-size: .97rem; }

.vc-list { list-style: none; margin: 18px 0 0; padding: 0; }
.vc-list li + li { border-top: 1px solid var(--vc-line); }
.vc-list a { display: flex; align-items: center; gap: 14px; padding: 13px 2px; text-decoration: none; word-break: break-word; }
.vc-list small { display: block; color: var(--vc-muted); font-size: .74rem; line-height: 1.3; }
.vc-li { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--vc-tint); color: var(--vc-accent); flex: none; }
.vc-li svg { width: 19px; height: 19px; }

.vc-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 20px 0 4px; }
.vc-social a { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--vc-line); color: var(--vc-text); transition: background .15s, color .15s; }
.vc-social a:hover { background: var(--vc-accent); color: var(--vc-on-accent); border-color: transparent; }

.vc-share {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 16px; padding: 12px; border-radius: var(--vc-radius-sm);
  background: transparent; color: var(--vc-muted); border: 1px dashed var(--vc-line);
  font: inherit; font-size: .9rem; cursor: pointer;
}
.vc-share[hidden] { display: none; }
.vc-share svg { width: 18px; height: 18px; }

.vc-foot { text-align: center; font-size: .76rem; color: var(--vc-muted); margin-top: 18px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; opacity: .85; }
.vc-foot a { color: inherit; text-decoration: none; }
.vc-foot a:hover { text-decoration: underline; }

/* ==========================================================================
   Die 10 Designs
   ========================================================================== */

/* 1 Klassisch */
.d-classic { --vc-accent: #2563eb; }
.d-classic .vc-band { background: linear-gradient(135deg, var(--vc-accent), color-mix(in srgb, var(--vc-accent) 70%, #000)); }

/* 2 Midnight */
.d-midnight {
  --vc-page: #0a0a0c; --vc-surface: #131318; --vc-text: #ece8df; --vc-muted: #a09c91; --vc-line: rgba(255,255,255,.09);
  --vc-accent: #c9a96b; --vc-on-accent: #17120a; --vc-head: "Serif Display", Georgia, serif; --vc-head-weight: 500;
  --vc-logo-bg: #1a1a21; --vc-shadow: 0 30px 80px -30px rgba(0,0,0,.9); --vc-band-h: 110px;
}
body.d-midnight, .vc-frame.d-midnight { background: radial-gradient(700px 400px at 50% -80px, rgba(201,169,107,.16), transparent 70%), #0a0a0c; }
.d-midnight .vc-band { background: radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--vc-accent) 40%, transparent), transparent 70%); border-bottom: 1px solid var(--vc-line); }
.d-midnight .vc-logo { box-shadow: 0 0 0 1px color-mix(in srgb, var(--vc-accent) 50%, transparent), 0 12px 30px -10px rgba(0,0,0,.8); }
.d-midnight .vc-card { border: 1px solid var(--vc-line); }

/* 3 Modern */
.d-modern {
  --vc-page: #f4f4f5; --vc-accent: #111827; --vc-band-h: 0px; --vc-align: left; --vc-logo-size: 92px; --vc-logo-radius: 22px;
  --vc-logo-bg: #f4f4f5; --vc-btn-bg: #f4f4f5; --vc-btn-text: var(--vc-text); --vc-radius: 28px; --vc-head-weight: 700;
}
.d-modern .vc-head { padding-top: 26px; }
.d-modern .vc-logo { margin-left: 0; box-shadow: none; }
.d-modern .vc-company { font-size: 2rem; letter-spacing: -.03em; }
.d-modern .vc-person { justify-content: flex-start; }
.d-modern .vc-social { justify-content: flex-start; }
.d-modern .vc-actions a { border: 1px solid var(--vc-line); }

/* 4 Handwerk */
.d-handwerk {
  --vc-page: #efe7dc; --vc-surface: #fffaf3; --vc-text: #2b2118; --vc-muted: #7a6a5a; --vc-line: rgba(60,40,20,.12);
  --vc-accent: #c2410c; --vc-radius: 10px; --vc-radius-sm: 8px; --vc-logo-radius: 14px; --vc-head-weight: 800; --vc-band-h: 128px;
}
.d-handwerk .vc-band { background: repeating-linear-gradient(-45deg, var(--vc-accent) 0 18px, color-mix(in srgb, var(--vc-accent) 86%, #000) 18px 36px); }
.d-handwerk .vc-company { text-transform: uppercase; letter-spacing: .03em; font-size: 1.45rem; }
.d-handwerk .vc-actions a { background: var(--vc-accent); color: var(--vc-on-accent); }
.d-handwerk a.vc-save { background: #2b2118; color: #fffaf3; box-shadow: none; }
.d-handwerk .vc-card { border-top: 6px solid #2b2118; }

/* 5 Minimal */
.d-minimal {
  --vc-page: #ffffff; --vc-surface: #ffffff; --vc-text: #111111; --vc-muted: #6b6b6b; --vc-accent: #111111; --vc-line: rgba(0,0,0,.1);
  --vc-band-h: 0px; --vc-shadow: none; --vc-logo-size: 84px; --vc-logo-bg: transparent; --vc-btn-bg: transparent; --vc-btn-text: #111; --vc-head-weight: 500;
}
.d-minimal .vc-head { padding-top: 34px; }
.d-minimal .vc-logo { box-shadow: none; }
.d-minimal .vc-card { border: 1px solid var(--vc-line); }
.d-minimal .vc-actions a { border: 1px solid var(--vc-line); }
.d-minimal .vc-li { background: transparent; border: 1px solid var(--vc-line); color: var(--vc-text); }
.d-minimal .vc-company { letter-spacing: -.02em; }

/* 6 Natur */
.d-natur {
  --vc-page: #e6efe3; --vc-surface: #fbfdf9; --vc-text: #1f2d22; --vc-muted: #5e7263; --vc-line: rgba(31,45,34,.1);
  --vc-accent: #3f7d4e; --vc-radius: 32px; --vc-radius-sm: 20px; --vc-band-h: 130px; --vc-head: "Serif Display", Georgia, serif; --vc-head-weight: 600;
}
.d-natur .vc-band { border-radius: 0 0 50% 50% / 0 0 34px 34px; background: linear-gradient(160deg, color-mix(in srgb, var(--vc-accent) 75%, #fff), var(--vc-accent)); }
.d-natur .vc-actions a { border-radius: 999px; padding-block: 12px; }

/* 7 Corporate */
.d-corporate {
  --vc-page: #e8ecf4; --vc-accent: #1e3a8a; --vc-radius: 14px; --vc-radius-sm: 10px; --vc-logo-radius: 12px; --vc-band-h: 140px;
  --vc-align: left; --vc-logo-size: 88px;
}
.d-corporate .vc-band { background: var(--vc-accent); }
.d-corporate .vc-band::after { content: ""; position: absolute; inset: auto 0 0; height: 5px; background: color-mix(in srgb, var(--vc-accent) 55%, #60a5fa); }
.d-corporate .vc-logo { margin-left: 0; }
.d-corporate .vc-person, .d-corporate .vc-social { justify-content: flex-start; }
.d-corporate .vc-actions a { border-radius: 8px; }

/* 8 Verlauf */
.d-verlauf {
  --vc-accent: #7c3aed; --vc-surface: rgba(255,255,255,.14); --vc-text: #ffffff; --vc-muted: rgba(255,255,255,.78); --vc-line: rgba(255,255,255,.2);
  --vc-band-h: 0px; --vc-btn-bg: rgba(255,255,255,.18); --vc-btn-text: #fff; --vc-logo-bg: #ffffff; --vc-tint: rgba(255,255,255,.16);
  --vc-shadow: 0 30px 70px -30px rgba(20,0,60,.6);
}
body.d-verlauf, .vc-frame.d-verlauf { background: linear-gradient(150deg, var(--vc-accent), color-mix(in srgb, var(--vc-accent) 40%, #ec4899) 55%, color-mix(in srgb, var(--vc-accent) 30%, #f59e0b)); }
.d-verlauf .vc-card { backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,.28); }
.d-verlauf .vc-head { padding-top: 30px; }
.d-verlauf .vc-logo { box-shadow: 0 14px 30px -12px rgba(0,0,0,.4); }
.d-verlauf a.vc-save { background: #fff; color: var(--vc-accent); box-shadow: none; }
.d-verlauf .vc-li { color: #fff; }
.d-verlauf .vc-social a { color: #fff; }
.d-verlauf .vc-foot { color: rgba(255,255,255,.85); }

/* 9 Elegant */
.d-elegant {
  --vc-page: #f2ede3; --vc-surface: #fbf8f1; --vc-text: #2a2620; --vc-muted: #82796a; --vc-line: rgba(169,138,78,.25);
  --vc-accent: #a98a4e; --vc-head: "Serif Display", Georgia, serif; --vc-head-weight: 500; --vc-band-h: 0px; --vc-radius: 4px; --vc-radius-sm: 3px;
  --vc-logo-bg: transparent; --vc-shadow: 0 20px 50px -30px rgba(60,40,10,.35); --vc-btn-bg: transparent;
}
.d-elegant .vc-card { border: 1px solid var(--vc-line); outline: 1px solid var(--vc-line); outline-offset: -8px; padding-inline: 28px; }
.d-elegant .vc-head { padding-top: 38px; }
.d-elegant .vc-logo { box-shadow: none; }
.d-elegant .vc-company { font-size: 1.85rem; }
.d-elegant .vc-tagline { font-style: italic; }
.d-elegant .vc-tagline::after { content: ""; display: block; width: 56px; height: 1px; background: var(--vc-accent); margin: 14px auto 0; }
.d-elegant .vc-actions a { border: 1px solid var(--vc-line); }
.d-elegant .vc-li { background: transparent; border: 1px solid var(--vc-line); border-radius: 50%; }

/* 10 Kraftvoll */
.d-kraftvoll {
  --vc-accent: #e11d48; --vc-surface: #111114; --vc-text: #ffffff; --vc-muted: rgba(255,255,255,.66); --vc-line: rgba(255,255,255,.12);
  --vc-band-h: 150px; --vc-logo-radius: 18px; --vc-head-weight: 800; --vc-radius: 18px; --vc-logo-bg: #ffffff; --vc-tint: rgba(255,255,255,.08);
  --vc-btn-bg: rgba(255,255,255,.08); --vc-btn-text: #fff;
}
body.d-kraftvoll, .vc-frame.d-kraftvoll { background: var(--vc-accent); }
.d-kraftvoll .vc-band { background: var(--vc-accent); clip-path: polygon(0 0, 100% 0, 100% 72%, 0 100%); }
.d-kraftvoll .vc-company { font-size: 2.1rem; text-transform: uppercase; letter-spacing: -.01em; line-height: 1; }
.d-kraftvoll .vc-li { color: #fff; background: var(--vc-accent); }
.d-kraftvoll .vc-social a { color: #fff; }
.d-kraftvoll .vc-foot { color: color-mix(in srgb, var(--vc-on-accent) 85%, transparent); }

/* Linksbündige Designs: Logo nicht zentrieren */
.d-modern .vc-logo, .d-corporate .vc-logo { margin-left: 0; margin-right: auto; }

@media (min-width: 520px) { .vc-wrap { padding-top: 48px; } }
@media (prefers-reduced-motion: reduce) { .vc-card { animation: none; } .vc-actions a, .vc-save { transition: none; } }

/* ==========================================================================
   Weitere Elemente
   ========================================================================== */
.vc-band { overflow: hidden; }
.vc-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vc-has-cover .vc-band { background: #222; }
.vc-has-cover { --vc-band-h: 150px; }
.vc-has-cover .vc-head { padding-top: calc(var(--vc-band-h) - var(--vc-logo-size) / 2) !important; }
.vc-has-cover.d-kraftvoll .vc-band, .vc-has-cover.d-natur .vc-band { clip-path: none; border-radius: 0; }

.vc-extra-btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-top: 10px; }
.vc-btn2 { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 10px; border-radius: var(--vc-radius-sm); border: 1.5px solid var(--vc-accent); color: var(--vc-accent); text-decoration: none; font-weight: 600; font-size: .9rem; }
.vc-btn2 svg { width: 18px; height: 18px; }
.vc .vc-btn2 { color: var(--vc-accent); }
.d-verlauf .vc-btn2, .d-kraftvoll .vc-btn2 { color: #fff; border-color: rgba(255,255,255,.55); }

.vc-services, .vc-hours { margin: 22px 0 6px; }
.vc-services h2, .vc-hours h2 { display: flex; align-items: center; gap: 8px; font-family: var(--vc-head); font-weight: var(--vc-head-weight); font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; color: var(--vc-muted); margin: 0 0 10px; }
.vc-hours h2 svg { width: 16px; height: 16px; }
.vc-services ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.vc-services li { padding: 6px 12px; border-radius: 999px; background: var(--vc-tint); color: var(--vc-text); font-size: .86rem; }
.vc-hours dl { margin: 0; border: 1px solid var(--vc-line); border-radius: var(--vc-radius-sm); overflow: hidden; }
.vc-hours dl div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; font-size: .92rem; }
.vc-hours dl div + div { border-top: 1px solid var(--vc-line); }
.vc-hours dt { font-weight: 600; }
.vc-hours dd { margin: 0; color: var(--vc-muted); text-align: right; }

/* ==========================================================================
   5 weitere Designs mit anderen Elementen
   ========================================================================== */

/* 11 Foto – grosses Titelbild */
.d-foto { --vc-accent: #0f766e; --vc-page: #eef3f2; --vc-band-h: 210px; --vc-logo-radius: 20px; --vc-radius: 26px; }
.d-foto.vc-has-cover { --vc-band-h: 210px; }
.d-foto .vc-band { background: linear-gradient(150deg, var(--vc-accent), color-mix(in srgb, var(--vc-accent) 50%, #38bdf8)); }
.d-foto .vc-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.35)); }
.d-foto .vc-logo { box-shadow: 0 0 0 5px var(--vc-surface), 0 14px 30px -10px rgba(0,0,0,.45); }

/* 12 Karte – wie eine gedruckte Visitenkarte */
.d-karte { --vc-accent: #0f172a; --vc-page: #e7e5e1; --vc-band-h: 0px; --vc-logo-size: 64px; --vc-logo-radius: 12px; --vc-radius: 18px; --vc-align: left; }
.d-karte .vc-card { padding-top: 22px; }
.d-karte .vc-head {
  padding: 22px !important; display: grid; grid-template-columns: 64px 1fr; gap: 4px 16px; align-items: center;
  background: var(--vc-accent); color: var(--vc-on-accent); border-radius: 14px; aspect-ratio: 1.7; align-content: center;
  box-shadow: 0 18px 30px -16px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.08);
  background-image: linear-gradient(135deg, rgba(255,255,255,.1), transparent 45%);
}
.d-karte .vc-band { display: none; }
.d-karte .vc-logo { margin: 0; grid-row: span 1; box-shadow: none; }
.d-karte .vc-titles { min-width: 0; }
.d-karte .vc-company { font-size: 1.2rem; margin: 0; }
.d-karte .vc-tagline { color: color-mix(in srgb, var(--vc-on-accent) 70%, transparent); margin: 2px 0 0; font-size: .82rem; }
.d-karte .vc-person { grid-column: 1 / -1; margin-top: 14px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--vc-on-accent) 22%, transparent); justify-content: flex-start; }
.d-karte .vc-role { color: color-mix(in srgb, var(--vc-on-accent) 70%, transparent); }
.d-karte .vc-photo { width: 40px; height: 40px; box-shadow: none; }
.d-karte .vc-has-cover .vc-head, .vc-has-cover.d-karte .vc-head { padding-top: 22px !important; }
.d-karte .vc-social { justify-content: flex-start; }

/* 13 Profil – grosses Porträt */
.d-profil { --vc-accent: #db2777; --vc-page: #fdf2f8; --vc-band-h: 0px; --vc-radius: 30px; --vc-logo-size: 70px; --vc-head: "Serif Display", Georgia, serif; --vc-head-weight: 600; }
body.d-profil, .vc-frame.d-profil { background: linear-gradient(180deg, color-mix(in srgb, var(--vc-accent) 16%, #fff), #fff 60%); }
.d-profil .vc-card { background: transparent; box-shadow: none; }
.d-profil .vc-head { display: flex; flex-direction: column; align-items: center; padding-top: 18px !important; }
.d-profil .vc-person { order: -1; flex-direction: column; text-align: center; gap: 10px; margin: 0 0 12px; }
.d-profil .vc-photo { width: 132px; height: 132px; box-shadow: 0 0 0 5px #fff, 0 0 0 7px color-mix(in srgb, var(--vc-accent) 45%, transparent), 0 20px 40px -18px rgba(0,0,0,.4); }
.d-profil .vc-name { font-family: var(--vc-head); font-size: 1.7rem; font-weight: 600; }
.d-profil.vc-has-photo .vc-logo { display: none; }
.d-profil .vc-company { font-size: 1rem; font-family: var(--vc-body); font-weight: 600; color: var(--vc-accent); text-transform: uppercase; letter-spacing: .12em; }
.d-profil .vc-actions a { background: #fff; box-shadow: 0 8px 20px -14px rgba(0,0,0,.4); border-radius: 18px; }
.d-profil a.vc-save { border-radius: 999px; }
.d-profil .vc-list a { background: #fff; border-radius: 16px; padding: 12px 14px; margin-bottom: 8px; }
.d-profil .vc-list li + li { border: 0; }

/* 14 Linkliste – grosse Knöpfe untereinander */
.d-linkliste { --vc-accent: #6d28d9; --vc-page: #f3efff; --vc-band-h: 0px; --vc-logo-size: 96px; --vc-radius: 0px; --vc-shadow: none; }
body.d-linkliste, .vc-frame.d-linkliste { background: radial-gradient(500px 300px at 50% 0, color-mix(in srgb, var(--vc-accent) 22%, transparent), transparent 70%), var(--vc-page); }
.d-linkliste .vc-card { background: transparent; }
.d-linkliste .vc-head { padding-top: 26px !important; }
.d-linkliste .vc-logo { box-shadow: 0 12px 30px -14px color-mix(in srgb, var(--vc-accent) 70%, #000); }
.d-linkliste .vc-actions { display: flex; flex-direction: column; gap: 10px; }
.d-linkliste .vc-actions a { flex-direction: row; justify-content: center; gap: 10px; padding: 15px; background: #fff; color: var(--vc-text); border-radius: 999px; font-size: .98rem; box-shadow: 0 6px 18px -12px rgba(0,0,0,.35); border: 1px solid var(--vc-line); }
.d-linkliste .vc-actions a .vc-ai { color: var(--vc-accent); }
.d-linkliste a.vc-save, .d-linkliste .vc-btn2 { border-radius: 999px; }
.d-linkliste .vc-btn2 { background: #fff; border-color: transparent; color: var(--vc-text); box-shadow: 0 6px 18px -12px rgba(0,0,0,.35); }
.d-linkliste .vc-extra-btns { grid-template-columns: 1fr; }
.d-linkliste .vc-list { display: none; }

/* 15 Gastro – dunkel, warm, Öffnungszeiten im Fokus */
.d-gastro {
  --vc-accent: #d97706; --vc-on-accent: #1c1410; --vc-page: #120d0a; --vc-surface: #1c1410; --vc-text: #f6eadb; --vc-muted: #c2ab92; --vc-line: rgba(246,234,219,.12);
  --vc-head: "Serif Display", Georgia, serif; --vc-head-weight: 600; --vc-band-h: 150px; --vc-logo-bg: #f6eadb; --vc-radius: 16px; --vc-tint: rgba(217,119,6,.14);
}
.d-gastro .vc-band { background: repeating-linear-gradient(90deg, #2a1d14 0 14px, #241810 14px 28px); border-bottom: 3px solid var(--vc-accent); }
.d-gastro .vc-company { font-size: 1.9rem; font-style: italic; }
.d-gastro .vc-hours { order: -1; }
.d-gastro .vc-hours dl { border-color: color-mix(in srgb, var(--vc-accent) 45%, transparent); background: rgba(217,119,6,.06); }
.d-gastro .vc-card { display: flex; flex-direction: column; }
.d-gastro .vc-hours { order: 3; }
.d-gastro .vc-head { order: 0; } .d-gastro .vc-actions { order: 1; } .d-gastro .vc-save { order: 2; } .d-gastro .vc-extra-btns { order: 4; }
.d-gastro .vc-about, .d-gastro .vc-services, .d-gastro .vc-list, .d-gastro .vc-social, .d-gastro .vc-share { order: 5; }

/* ==========================================================================
   Mini-Vorschauen (nicht klickbar)
   ========================================================================== */
.vc-mini { position: relative; overflow: hidden; pointer-events: none; user-select: none; }
.vc-mini .vc-frame { width: 400px; min-height: 0; overflow: hidden; }
.vc-mini .vc-wrap { padding: 16px 14px; }
.vc-mini .vc-card { animation: none; }
.vc-mini-xs .vc-frame { zoom: .24; height: 520px; }
.vc-mini-sm .vc-frame { zoom: .38; height: 560px; }
.vc-mini-md .vc-frame { zoom: .55; height: 780px; }
.vc-mini-phone { height: 100%; }
.vc-mini-phone .vc-frame { zoom: .525; height: 860px; }
.vc-mini-phone .vc-wrap { padding-top: 44px; }
.vc-has-cover.d-profil .vc-head, .vc-has-cover.d-linkliste .vc-head { padding-top: 110px !important; }

/* ==========================================================================
   Feste Leiste unten (alle Designs, bei Szenen immer)
   ========================================================================== */
.vc-has-bar .vc-save, .vc-has-bar .vc-share { display: none; }
.vc-has-bar .vc-wrap { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
.vc-bar {
  position: fixed; z-index: 30; left: 0; right: 0; bottom: calc(14px + env(safe-area-inset-bottom));
  max-width: 436px; margin: 0 auto; padding: 0 14px; display: flex; align-items: center; gap: 10px; pointer-events: none;
}
.vc-bar > * { pointer-events: auto; }
.vc-bar-round {
  width: 54px; height: 54px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  background: var(--vc-bar, #121417); color: var(--vc-bar-text, #fff); box-shadow: 0 12px 26px -10px rgba(0,0,0,.55);
  transition: transform .15s;
}
.vc-bar-round:active { transform: scale(.94); }
.vc-bar-round.is-done { outline: 3px solid #22c55e; }
.vc-bar-round svg { width: 22px; height: 22px; }
.vc a.vc-bar-save {
  margin-left: auto; display: flex; align-items: center; gap: 14px; padding: 7px 7px 7px 22px; border-radius: 999px; text-decoration: none;
  background: var(--vc-bar, #121417); color: var(--vc-bar-text, #fff); font-weight: 600; font-size: .86rem; line-height: 1.15;
  box-shadow: 0 14px 30px -12px rgba(0,0,0,.6); transition: transform .15s;
}
.vc a.vc-bar-save:active { transform: scale(.97); }
.vc-bar-save b { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #121417; font-size: 1.6rem; font-weight: 400; line-height: 1; }
.d-midnight, .d-gastro, .d-kraftvoll { --vc-bar: var(--vc-accent); --vc-bar-text: var(--vc-on-accent); }

.vc-qr-dialog { border: 0; border-radius: 26px; padding: 26px 24px 20px; width: min(92vw, 360px); text-align: center; color: #121417; background: #fff; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); }
.vc-qr-dialog::backdrop { background: rgba(10,12,16,.62); backdrop-filter: blur(3px); }
.vc-qr-title { margin: 0 0 14px; font-weight: 700; font-size: 1.1rem; }
.vc-qr-box svg { display: block; width: 100%; height: auto; }
.vc-qr-hint { margin: 12px 0 14px; color: #5f6672; font-size: .9rem; }
.vc-qr-close { font: inherit; font-weight: 600; border: 0; border-radius: 999px; padding: 11px 22px; background: #121417; color: #fff; cursor: pointer; }

/* ==========================================================================
   Szenen – Branchen-Motiv als Hintergrund, Inhalt schwebt darüber
   ========================================================================== */
.d-szene {
  --vc-page: color-mix(in srgb, var(--vc-accent) 20%, #eef2f6); --vc-surface: transparent; --vc-text: #121417; --vc-muted: #4b5360;
  --vc-band-h: 0px; --vc-align: left; --vc-logo-size: 58px; --vc-logo-radius: 16px; --vc-shadow: none; --vc-radius: 22px;
  --vc-line: rgba(18,20,23,.08); --vc-tint: color-mix(in srgb, var(--vc-accent) 12%, #fff);
}
.s-musik { --vc-accent: #5b8db8; } .s-handwerk { --vc-accent: #c2410c; } .s-gastro { --vc-accent: #b45309; } .s-gesundheit { --vc-accent: #0d9488; }
.s-beauty { --vc-accent: #db2777; } .s-auto { --vc-accent: #dc2626; } .s-sport { --vc-accent: #2563eb; } .s-natur { --vc-accent: #16a34a; }
.s-buero { --vc-accent: #475569; } .s-immobilien { --vc-accent: #0f766e; }
body.d-szene, .vc-frame.d-szene { background: linear-gradient(180deg, color-mix(in srgb, var(--vc-accent) 26%, #eef2f6), var(--vc-page) 45%, color-mix(in srgb, var(--vc-accent) 14%, #f3f5f8)); }
.vc-scene { position: fixed; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.vc-scene-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.vc-scene-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vc-scene:has(.vc-scene-photo)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.72) 55%, rgba(255,255,255,.85)); }
.d-szene .vc-wrap { position: relative; z-index: 1; }
.d-szene .vc-card { background: transparent; overflow: visible; padding: 0 4px 10px; }
.d-szene .vc-band { display: none; }
.d-szene .vc-head { display: flex; flex-direction: column; align-items: flex-start; padding-top: 30px !important; text-align: left; }
.d-szene .vc-logo { order: -2; margin: 0 0 18px; box-shadow: 0 10px 24px -12px rgba(0,0,0,.35); }
.d-szene .vc-person { order: 0; flex-direction: column; align-items: flex-start; gap: 4px; margin: 0; width: 100%; }
.d-szene .vc-photo { order: -1; align-self: flex-end; width: 156px; height: 156px; margin: -6px 0 14px; box-shadow: 0 0 0 5px rgba(255,255,255,.9), 0 24px 40px -18px rgba(0,0,0,.45); }
.d-szene.vc-has-photo .vc-logo { position: absolute; top: 30px; left: 0; }
.d-szene .vc-name, .d-szene .vc-head:not(:has(.vc-name)) .vc-company {
  font-family: var(--vc-head); font-size: 2.25rem; font-weight: 800; line-height: 1.04; letter-spacing: -.02em; margin: 0 0 6px;
  text-shadow: 0 2px 0 rgba(255,255,255,.8), 0 8px 22px rgba(0,0,0,.16);
}
.d-szene .vc-role { color: var(--vc-text); font-weight: 500; font-size: .95rem; }
.d-szene .vc-titles { order: 1; margin-top: 4px; }
.d-szene .vc-company { font-size: .98rem; font-weight: 700; margin: 0 0 2px; }
.d-szene .vc-tagline { color: var(--vc-muted); font-size: .9rem; margin: 0; }
.d-szene .vc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 18px; }
.d-szene .vc-actions a {
  width: 58px; height: 58px; padding: 0; border-radius: 50%; justify-content: center; background: #fff; color: #121417;
  box-shadow: 0 10px 22px -12px rgba(0,0,0,.4);
}
.d-szene .vc-actions a > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.d-szene .vc-actions a svg { width: 23px; height: 23px; }
.d-szene .vc-panel-head, .d-szene .vc-list, .d-szene .vc-about, .d-szene .vc-services, .d-szene .vc-hours { background: #fff; box-shadow: 0 16px 34px -24px rgba(0,0,0,.45); }
.d-szene .vc-panel-head { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 16px 18px 14px; border-radius: 20px 20px 0 0; font-size: 1.1rem; font-weight: 500; border-bottom: 1px solid var(--vc-line); }
.vc-panel-ic { width: 46px; height: 46px; border-radius: 50%; background: #121417; color: #fff; display: grid; place-items: center; }
.vc-panel-ic svg { width: 22px; height: 22px; }
.d-szene .vc-list { margin: 0; padding: 4px 18px 8px; border-radius: 0 0 20px 20px; }
.d-szene .vc-list .vc-li { display: none; }
.d-szene .vc-list a { padding: 12px 0; display: block; font-size: .92rem; color: var(--vc-muted); }
.d-szene .vc-list small { font-size: 1.02rem; color: var(--vc-text); margin-bottom: 2px; }
.d-szene .vc-about, .d-szene .vc-services, .d-szene .vc-hours { margin: 14px 0 0; padding: 16px 18px; border-radius: 20px; }
.d-szene .vc-hours dl { border: 0; }
.d-szene .vc-hours dl div { padding: 8px 0; }
.d-szene .vc-extra-btns { margin: 0 0 4px; }
.d-szene .vc-btn2 { background: #fff; border: 0; color: #121417; border-radius: 999px; box-shadow: 0 10px 22px -14px rgba(0,0,0,.4); }
.d-szene .vc-social a { background: #fff; border: 0; box-shadow: 0 10px 22px -14px rgba(0,0,0,.4); }
.d-szene .vc-foot { position: relative; z-index: 1; color: #4b5360; }

/* Mini-Vorschauen: Hintergrund und Leiste innerhalb des Rahmens */
.vc-mini .vc-frame { position: relative; }
.vc-mini .vc-scene, .vc-mini .vc-bar { position: absolute; }
.vc-mini .vc-bar { bottom: 16px; }
.vc-mini .vc-has-bar .vc-wrap, .vc-mini .vc-frame.vc-has-bar .vc-wrap { padding-bottom: 16px; }
.vc svg.vc-scene-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.vc-mini .vc-frame { isolation: isolate; }
.vc-mini .d-szene .vc-wrap, .vc-mini .vc-frame.d-szene .vc-wrap { position: static; }
.vc-mini .vc-frame.vc-has-bar .vc-wrap { position: static; }

/* Hinweis auf QR Studio (Gratis-Paket) */
.vc-promo { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; margin: 18px 4px 0; padding: 14px 16px; border-radius: 16px; background: #0a0a0c; color: #ece8df; text-decoration: none; font-size: .9rem; font-weight: 600; line-height: 1.3; box-shadow: 0 14px 30px -18px rgba(0,0,0,.6); }
.vc-promo small { display: block; font-weight: 500; color: #c9a96b; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 2px; }
.vc-promo-mark { width: 38px; height: 38px; flex: none; border-radius: 10px; background: #c9a96b; color: #17120a; display: grid; place-items: center; --bg: #c9a96b; }
.vc .vc-promo-mark svg { width: 24px; height: 24px; }
.vc-promo-top { position: sticky; top: 0; z-index: 40; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; padding: 11px 16px; background: #0a0a0c; color: #ece8df; text-decoration: none; font-size: .86rem; text-align: center; box-shadow: 0 8px 20px -10px rgba(0,0,0,.5); }
.vc-promo-top b { color: #e4d09c; }
.vc a.vc-promo, .vc a.vc-promo-top { color: #ece8df; }