/* Individuelle Begrüßung, ohne Änderungen an Formularen und Teilnahmebedingungen. */
.einladungs-titelbild{display:block;width:100%;height:clamp(180px,25vw,330px);object-fit:cover;object-position:center;border-radius:18px;margin:0 0 32px}
.einladungs-titelbild[hidden]{display:none}
.einladungs-begruessung{white-space:pre-line;overflow-wrap:anywhere;max-width:40em;color:var(--vtc-text)}
.gestaltung-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.gestaltung-raster input:not([type=checkbox]),.gestaltung-raster textarea,.gestaltung-raster select{width:100%;max-width:100%}
.gestaltung-vorschau h2{overflow-wrap:anywhere;white-space:pre-line}
.gestaltung-vorschau .btn{pointer-events:none}
.gestaltung-vorschau .einladungs-titelbild{height:220px}
.einladungs-gestaltung h1{overflow-wrap:anywhere;white-space:pre-line}
@media(max-width:800px){.gestaltung-raster{grid-template-columns:1fr}.gestaltung-raster .panel{min-width:0}}
/* Farben, Radien und Schatten stammen aus den Custom Properties von verticus.ag. */
:root{
  --vtc-blue:#075bd8;--vtc-blue-2:#0b70f0;--vtc-blue-dark:#062d63;
  --vtc-navy:#0b2853;--vtc-ink:#061936;--vtc-text:#172b55;--vtc-muted:#5c6d89;
  --vtc-line:#dfe8f3;--vtc-line-2:#e0eaf6;--vtc-soft:#f4f8fd;--vtc-soft-2:#edf5ff;--vtc-bg:#f7faff;
  --vtc-white:#fff;
  --vtc-radius:10px;--vtc-radius-sm:8px;--vtc-radius-card:12px;--vtc-radius-lg:18px;
  --vtc-shadow-card:0 12px 30px rgba(7,43,99,.06);
  --vtc-shadow-panel:0 18px 48px rgba(7,43,99,.08);
  --vtc-shadow-btn:0 14px 28px rgba(7,91,216,.18);
  --vtc-font:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --vtc-script:"Segoe Script","Bradley Hand","Brush Script MT","Comic Sans MS",cursive;
  --vtc-wrap:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--vtc-white);color:var(--vtc-text);font-family:var(--vtc-font);font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}
.wrap{width:min(var(--vtc-wrap),calc(100% - 40px));margin:0 auto}
a{color:var(--vtc-blue);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{color:var(--vtc-navy);font-weight:800;letter-spacing:-.015em;line-height:1.15}

.topbar{background:linear-gradient(180deg,#f8fbff 0,#f2f6fb 100%);border-bottom:1px solid #edf2f8;color:var(--vtc-ink);font-size:.82rem}
.topbar .wrap{display:flex;align-items:center;justify-content:flex-end;gap:26px;min-height:38px}
.topbar a{display:inline-flex;align-items:center;gap:8px;color:var(--vtc-ink);font-weight:600}
.topbar a:hover{color:var(--vtc-blue);text-decoration:none}
.topbar svg{flex:0 0 15px;color:var(--vtc-blue)}

.site-header{background:var(--vtc-white);border-bottom:1px solid #e2e9f2}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:82px}
.logo img{display:block;height:46px;width:auto}
.logo-text{color:var(--vtc-navy);font-size:1.4rem;font-weight:800}
.header-cta{display:inline-flex;align-items:center;gap:9px;min-height:50px;padding:0 24px;border-radius:var(--vtc-radius-card);background:var(--vtc-blue);color:var(--vtc-white);font-size:.95rem;font-weight:800;box-shadow:var(--vtc-shadow-btn);transition:background .15s,transform .15s}
.header-cta:hover{background:var(--vtc-blue-2);color:var(--vtc-white);text-decoration:none;transform:translateY(-1px)}
.header-link{display:inline-flex;align-items:center;gap:8px;color:var(--vtc-navy);font-weight:700}
.header-link:hover{color:var(--vtc-blue);text-decoration:none}

.hero{position:relative;overflow:hidden;padding:56px 0 64px;background:
  radial-gradient(1100px 460px at 82% 8%, #e4f0fd 0, rgba(228,240,253,0) 62%),
  radial-gradient(760px 420px at 8% 92%, #eaf3ff 0, rgba(234,243,255,0) 60%),
  linear-gradient(180deg,#f4f9ff 0,#fbfdff 100%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.98fr);gap:58px;align-items:center}
.eyebrow{margin:0 0 14px;color:var(--vtc-blue);font-size:.72rem;font-weight:750;letter-spacing:.16em;text-transform:uppercase}
h1{margin:0 0 20px;font-size:clamp(2rem,4.1vw,3rem)}
.hero-lead{max-width:27em;margin:0 0 28px;color:var(--vtc-muted);font-size:1.06rem}
.hero-lead strong{display:block;color:var(--vtc-blue);font-weight:800}
/* Der Gegenstand steht mitten im Satz und darf ihn nicht zerreissen. Die Regel
   darueber macht jedes <strong> zum eigenen Block -- das ist fuer die Praemie
   am Satzende gewollt, fuer eine Hervorhebung im Fliesstext nicht. */
.hero-lead strong.scope{display:inline;color:inherit;font-weight:700}
.btn{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:0 28px;border:0;border-radius:var(--vtc-radius-card);background:var(--vtc-blue);color:var(--vtc-white);font:inherit;font-size:1rem;font-weight:800;cursor:pointer;box-shadow:var(--vtc-shadow-btn);transition:background .15s,transform .15s}
.btn:hover{background:var(--vtc-blue-2);color:var(--vtc-white);text-decoration:none;transform:translateY(-1px)}
.btn svg{flex:0 0 18px}
.btn-ghost{background:var(--vtc-white);color:var(--vtc-blue);border:1px solid #bcd6f6;box-shadow:none}
.btn-ghost:hover{background:var(--vtc-soft-2);color:var(--vtc-blue-dark)}

.assurances{display:flex;flex-wrap:wrap;gap:12px 30px;margin:26px 0 0;padding:0;list-style:none}
.assurances li{display:flex;align-items:center;gap:9px;color:var(--vtc-muted);font-size:.92rem}
.assurances svg{flex:0 0 18px;color:var(--vtc-blue)}

.premium{position:absolute;left:-152px;top:50%;z-index:3;display:grid;place-items:center;width:178px;height:178px;transform:translateY(-52%) rotate(-7deg);border-radius:49% 51% 47% 53%/52% 46% 54% 48%;background:radial-gradient(circle at 42% 38%,#dcecfd 0,#cfe4fb 72%,#c3dcf8 100%);color:var(--vtc-blue-dark);text-align:center;font-family:var(--vtc-script);line-height:1.15}
.premium b{display:block;font-size:1.85rem;font-weight:400}
.premium span{display:block;font-size:1.55rem}
.premium small{display:block;margin-top:4px;font-size:.86rem;line-height:1.25}

.advisor-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,228px);gap:18px;padding:30px 28px;border:1px solid var(--vtc-line-2);border-radius:var(--vtc-radius-lg);background:var(--vtc-white);box-shadow:var(--vtc-shadow-panel);overflow:hidden}
.advisor-eyebrow{margin:0 0 6px;color:var(--vtc-blue);font-size:.68rem;font-weight:750;letter-spacing:.14em;text-transform:uppercase}
/* Keine Silbentrennung im Firmennamen: "Finanzmanage-ment" liest sich falsch.
   break-word bleibt als Notnagel, greift aber nur, wenn ein Wort allein nicht
   auf eine Zeile passt -- seit die Karte frueher umbricht (siehe unten) kommt
   das nicht mehr vor. */
.advisor-name{margin:0;color:var(--vtc-navy);font-size:clamp(1.25rem,1.5vw,1.6rem);font-weight:800;line-height:1.2;overflow-wrap:break-word;hyphens:none}
.advisor-role{margin:4px 0 0;color:var(--vtc-blue);font-size:1rem;font-weight:700}
.advisor-quote{margin:18px 0 0;padding-top:18px;border-top:1px solid var(--vtc-line);color:var(--vtc-muted);font-size:.95rem;line-height:1.55}
.advisor-company{margin:14px 0 0;color:#64748b;font-size:.82rem}
.advisor-company code{padding:1px 6px;border-radius:4px;background:var(--vtc-soft-2);color:var(--vtc-navy);font-size:.8rem}
.contact{display:grid;gap:11px;margin:18px 0 0;padding:0;list-style:none}
.contact li{display:flex;align-items:center;gap:12px}
.contact .ico{display:grid;flex:0 0 38px;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--vtc-soft-2);color:var(--vtc-blue)}
.contact a,.contact span.val{color:var(--vtc-blue);font-size:1rem;font-weight:700;overflow-wrap:anywhere}

/* --portrait ist die Kantenlaenge des Fotos; der Kreis dahinter leitet sich
   daraus ab. Vorher standen beide Werte getrennt da -- schrumpfte das Foto im
   schmalen Layout, blieb der Kreis gross und das Portrait schwamm darin. */
.portrait{position:relative;display:grid;place-items:center;align-self:center;min-height:250px;--portrait:min(198px,100%)}
/* Kreis und Foto liegen in derselben Rasterzelle. Damit sitzt der Kreis immer
   mittig hinter dem Foto -- ohne Rechnerei, und auch dann noch, wenn unter dem
   Foto eine weitere Zeile steht (auf kleinen Schirmen die Danke-Zeile). Ein
   absolut auf 50% zentrierter Kreis rutschte dabei nach unten und legte sich
   ueber den Text. */
.portrait::before{content:'';grid-area:1/1;place-self:center;width:calc(var(--portrait) * 1.26);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 46% 34%,#e6f1fd 0,#d8e9fb 68%,#cfe3fa 100%)}
.portrait-photo,.portrait-mono{position:relative;grid-area:1/1;place-self:center;width:var(--portrait);aspect-ratio:1;border-radius:50%;object-fit:cover;object-position:center 22%;box-shadow:0 14px 32px rgba(7,43,99,.16)}
.portrait-photo{border:5px solid var(--vtc-white)}
.portrait-mono[hidden]{display:none}
.portrait-mono{display:grid;place-items:center;background:linear-gradient(150deg,var(--vtc-blue-2) 0,var(--vtc-blue-dark) 100%);color:var(--vtc-white);font-size:3.4rem;font-weight:800;border:5px solid var(--vtc-white)}
.seal{position:absolute;right:-6px;top:-6px;z-index:2;width:118px;padding:7px 9px;border:1px solid var(--vtc-line-2);border-radius:var(--vtc-radius-sm);background:var(--vtc-white);box-shadow:var(--vtc-shadow-card)}
.seal img{display:block;width:100%;height:auto}
.thanks{position:absolute;right:2px;bottom:-6px;z-index:2;color:var(--vtc-blue-dark);font-family:var(--vtc-script);font-size:1.05rem;line-height:1.2;text-align:right;transform:rotate(-6deg)}

.benefits{position:relative;z-index:2;margin-top:-34px}
.benefits-inner{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--vtc-line-2);border-radius:var(--vtc-radius-lg);background:var(--vtc-white);box-shadow:var(--vtc-shadow-panel)}
.benefit{display:flex;gap:16px;align-items:flex-start;padding:26px 28px}
.benefit + .benefit{border-left:1px solid var(--vtc-line)}
.benefit .ico{display:grid;flex:0 0 52px;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--vtc-soft-2);color:var(--vtc-blue)}
.benefit h3{margin:0 0 4px;font-size:1.05rem}
.benefit p{margin:0;color:var(--vtc-muted);font-size:.92rem;line-height:1.55}

.section{padding:66px 0 0;text-align:center}
h2{margin:0 0 8px;font-size:clamp(1.6rem,2.8vw,2.1rem)}
.section-sub{margin:0 0 14px;color:var(--vtc-muted)}
.rule{width:56px;height:4px;margin:0 auto 40px;border-radius:2px;background:var(--vtc-blue)}

.how{position:relative;padding:62px 0 58px;text-align:center;background:linear-gradient(180deg,#fbfdff 0,#f6faff 100%)}
.how h2{margin:6px 0 8px}
.how-sub{margin:0 0 46px;color:var(--vtc-muted);font-size:1.05rem}
.how-grid{display:grid;grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr) 46px minmax(0,1fr);align-items:start;gap:0}
.how-arrow{display:grid;place-items:center;padding-top:104px;color:#9dbde6}
.how-step{padding:0 14px}
.how-figure{position:relative;display:grid;place-items:center;width:206px;height:206px;margin:0 auto 22px;border-radius:50%;background:radial-gradient(circle at 44% 36%,#eef5fe 0,#e6f0fc 70%,#dfebfb 100%)}
.how-figure svg{width:122px;height:122px}
.how-num{position:absolute;left:2px;top:6px;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--vtc-blue);color:var(--vtc-white);font-size:1.05rem;font-weight:800;box-shadow:0 8px 18px rgba(7,91,216,.28)}
.how-step h3{margin:0 0 12px;color:var(--vtc-navy);font-size:1.5rem;font-weight:800}
.how-step p{margin:0 auto;max-width:22em;color:var(--vtc-muted);font-size:1rem;line-height:1.6}

.panel-section{padding:48px 0 40px}
.panel{max-width:640px;margin:0 auto;padding:32px;border:1px solid var(--vtc-line-2);border-radius:var(--vtc-radius-card);background:var(--vtc-white);box-shadow:var(--vtc-shadow-card)}
.panel-wide{max-width:none}
.panel + .panel{margin-top:22px}
.panel h2{text-align:left;font-size:1.28rem;margin-bottom:12px}
.panel > p{margin:0 0 4px;color:var(--vtc-muted)}
.notice{max-width:var(--vtc-wrap);margin:0 auto 26px;padding:15px 20px;border:1px solid #f0dcae;border-left:4px solid #d8a23a;border-radius:var(--vtc-radius-sm);background:#fdf8ee;color:#5c4415}
.notice--ok{border-color:#bfe3c8;border-left-color:#3a9a56;background:#f2fbf4;color:#1f4d2e}
.form-hint{margin:-4px 0 16px;color:var(--vtc-muted);font-size:.9rem}
label{display:grid;gap:7px;margin-top:17px;color:var(--vtc-navy);font-size:.92rem;font-weight:700}
input{width:100%;min-height:48px;padding:12px 14px;border:1px solid #cfdcea;border-radius:var(--vtc-radius-sm);background:var(--vtc-white);color:var(--vtc-text);font:inherit;transition:border-color .15s,box-shadow .15s}
input:focus{outline:0;border-color:var(--vtc-blue);box-shadow:0 0 0 3px rgba(7,91,216,.15)}
/* Einwilligung: Kaestchen und Satz nebeneinander, der Satz selbst bleibt
   normaler Textfluss -- sonst reisst flex-gap Luecken um die Links. */
label.consent{display:flex;gap:10px;align-items:flex-start;color:var(--vtc-text);font-size:.88rem;font-weight:400;line-height:1.5}
label.consent input[type=checkbox]{width:18px;min-height:18px;flex:0 0 18px;margin:4px 0 0;padding:0}
input[type=checkbox]{accent-color:var(--vtc-blue)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{margin:18px 0 0;color:var(--vtc-muted);font-size:.84rem}
.panel-foot{margin:20px 0 0;padding-top:18px;border-top:1px solid var(--vtc-line);color:var(--vtc-muted);font-size:.9rem}
.reflink{display:block;margin:10px 0 16px;padding:16px;border:1px dashed #b6d2f5;border-radius:var(--vtc-radius-sm);background:var(--vtc-soft-2);color:var(--vtc-navy);font-weight:700;overflow-wrap:anywhere}
.tip{margin-top:20px;padding:15px 18px;border-left:3px solid var(--vtc-blue);border-radius:0 var(--vtc-radius-sm) var(--vtc-radius-sm) 0;background:var(--vtc-soft);color:var(--vtc-text);font-size:.92rem}

/* Registrierung: zweispaltige Karte, links Formular, rechts Zuspruch */
.signup{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);border:1px solid var(--vtc-line-2);border-radius:var(--vtc-radius-lg);background:var(--vtc-white);box-shadow:var(--vtc-shadow-panel);overflow:hidden}
.signup-form{padding:36px 38px 34px}
.signup-form h2{margin:6px 0 10px;text-align:left;font-size:clamp(1.5rem,2.3vw,1.9rem)}
.signup-sub{margin:0 0 22px;color:var(--vtc-muted)}
.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.field{position:relative;display:block}
.field > svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#8fa8c6;pointer-events:none}
.field input{padding-left:44px}
.field input::placeholder{color:#9bb0c9}
.pw-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:36px;height:36px;min-height:0;margin:0;padding:0;border:0;border-radius:var(--vtc-radius-sm);background:none;color:#8fa8c6;box-shadow:none;cursor:pointer}
.pw-toggle:hover{background:var(--vtc-soft-2);color:var(--vtc-blue);transform:translateY(-50%)}
.btn-block{width:100%;justify-content:center;margin-top:22px}
.privacy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:24px 0 0;padding-top:20px;border-top:1px solid var(--vtc-line);list-style:none}
.privacy li{display:flex;gap:10px;align-items:flex-start;color:var(--vtc-muted);font-size:.78rem;line-height:1.45}
.privacy svg{flex:0 0 17px;margin-top:1px;color:var(--vtc-blue)}
.privacy b{display:block;color:var(--vtc-navy);font-weight:700}

.signup-aside{position:relative;display:flex;flex-direction:column;padding:26px 26px 24px;background:linear-gradient(180deg,#f3f9ff 0,#eaf3fe 100%);border-left:1px solid var(--vtc-line-2)}

/* Rundes Portrait wie in der Ansprechpartner-Karte oben. Der Ring dahinter ist
   etwas kraeftiger als dort, weil er hier auf blauem statt weissem Grund liegt. */
.aside-photo{position:relative;display:grid;place-items:center;min-height:186px;margin-bottom:4px}
.aside-photo::before{content:'';position:absolute;top:50%;left:50%;width:min(214px,96%);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 46% 34%,#e2eefc 0,#d2e4fa 66%,#c6dcf7 100%)}
.aside-photo img,.aside-photo-mono{position:relative;width:min(172px,84%);aspect-ratio:1;border-radius:50%;object-fit:cover;object-position:center 20%;border:5px solid var(--vtc-white);box-shadow:0 12px 28px rgba(7,43,99,.16)}
.aside-photo img{display:block}
.aside-photo-mono[hidden]{display:none}
.aside-photo-mono{display:grid;place-items:center;background:linear-gradient(150deg,var(--vtc-blue-2) 0,var(--vtc-blue-dark) 100%);color:var(--vtc-white);font-size:2.9rem;font-weight:800}
.aside-badge{position:absolute;right:10px;top:10px;z-index:2;display:grid;place-items:center;width:80px;height:80px;border-radius:50%;background:var(--vtc-white);color:var(--vtc-navy);text-align:center;line-height:1.15;box-shadow:0 10px 24px rgba(7,43,99,.16)}
.aside-badge b{display:block;font-size:1.02rem;font-weight:800}
.aside-badge small{display:block;font-size:.58rem;color:var(--vtc-muted)}

.aside-body{padding:14px 0 0}
.aside-script{max-width:11em;margin:0 0 16px;color:var(--vtc-blue);font-family:var(--vtc-script);font-size:1.25rem;line-height:1.25;transform:rotate(-3deg)}
.aside-script svg{display:block;width:88%;height:11px;margin-top:3px;color:var(--vtc-blue)}
.aside-quote{position:relative;margin:0;padding:16px 0 0;border-top:1px solid #d9e8fb;color:var(--vtc-text);font-size:.92rem;line-height:1.55}
.aside-quote:before{content:'\201C';display:block;margin-bottom:-14px;color:#b6d3f5;font-size:2.6rem;line-height:1}
.sign-name{margin:16px 0 0;color:var(--vtc-navy);font-family:var(--vtc-script);font-size:1.35rem;line-height:1.1}
.sign-name--plain{font-family:var(--vtc-font);font-size:1.05rem;font-weight:800;letter-spacing:-.01em;line-height:1.25}
.sign-role{margin:2px 0 0;color:var(--vtc-muted);font-size:.78rem}

.login-toggle{max-width:640px;margin:22px auto 0;text-align:center}
.login-toggle > summary{cursor:pointer;color:var(--vtc-muted);font-size:.95rem;list-style:none}
.login-toggle > summary::-webkit-details-marker{display:none}
.login-toggle > summary span{color:var(--vtc-blue);font-weight:700}
.login-toggle > summary:hover span{text-decoration:underline}
.login-toggle .panel{margin-top:18px;text-align:left}

.assurance-section{padding:0 0 72px}
.assurance-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-radius:var(--vtc-radius-lg);background:#eef4fd}
.assurance{display:flex;gap:16px;align-items:center;padding:24px 28px;text-align:left}
.assurance + .assurance{border-left:1px solid #dae7f8}
.assurance .ico{display:grid;flex:0 0 46px;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--vtc-white);color:var(--vtc-blue)}
.assurance b{display:block;color:var(--vtc-navy);font-size:1rem;font-weight:800}
.assurance span{display:block;color:var(--vtc-muted);font-size:.92rem}

.site-footer{padding:52px 0;border-top:1px solid #e2e8ef;background:var(--vtc-white);color:#23364d}
.footer-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px;align-items:start}
.footer-links{display:flex;flex-wrap:wrap;gap:10px 26px;margin:0;padding:0;list-style:none}
.footer-links a{color:var(--vtc-navy);font-size:.9rem;font-weight:600}
.footer-links a:hover{color:var(--vtc-blue)}
.footer-note{margin:0;color:var(--vtc-muted);font-size:.88rem}

@media (max-width:1080px){
  .premium{left:-86px;width:150px;height:150px}
  .premium b{font-size:1.6rem}.premium span{font-size:1.35rem}
}
@media (max-width:900px){
  .hero{padding:36px 0 56px}
  .hero-grid{grid-template-columns:1fr;gap:34px}
  /* Der Praemienklecks ist reine Dekoration (aria-hidden) und ueberlagert
     nichts mehr, sobald die Spalten stapeln -- er wird dann zu einem Klotz in
     der Mitte. Der Betrag steht ohnehin dreimal im Text. */
  .premium{display:none}
  .advisor-card{grid-template-columns:1fr;gap:26px}
  .portrait{order:-1;min-height:0}
  .seal{right:0;top:0}
  .thanks{position:static;margin-top:10px;text-align:center;transform:none}
  .benefits-inner{grid-template-columns:1fr}
  .benefit + .benefit{border-left:0;border-top:1px solid var(--vtc-line)}
  .how-grid{grid-template-columns:1fr;gap:44px}
  .how-arrow{display:none}
  .signup{grid-template-columns:1fr}
  .signup-aside{border-left:0;border-top:1px solid var(--vtc-line-2)}
  .field-grid{grid-template-columns:1fr}
  .privacy{grid-template-columns:1fr}
  .assurance-strip{grid-template-columns:1fr}
  .assurance + .assurance{border-left:0;border-top:1px solid #dae7f8}
  .footer-grid{grid-template-columns:1fr}
  .topbar .wrap{justify-content:center;gap:18px}
}
@media (max-width:520px){.wrap{width:calc(100% - 28px)}.panel,.signup-form{padding:24px}.signup-aside{padding:24px}.advisor-card{padding:22px}.header-cta{padding:0 16px;font-size:.86rem}.assurances{gap:10px 18px}}


/* ------------------------------------------------------------------ */
/* Konto- und Verwaltungsbereich                                        */
/* Gleiche Bausteine wie die Startseite, nur die Formen, die dort nicht */
/* vorkommen: Karten mit Kennzahlen, Tabellen, Reiter, Statusmarken.    */
/* ------------------------------------------------------------------ */

.page{padding:44px 0 66px;background:var(--vtc-bg);min-height:60vh}
.page-head{margin:0 auto 30px;max-width:var(--vtc-wrap)}
.page-head h1{font-size:1.9rem;margin:0 0 8px}
.page-head p{margin:0;color:var(--vtc-muted)}
.page-narrow{max-width:560px;margin:0 auto}

/* Reiter zwischen den Bereichen einer Seite. */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 auto 24px;max-width:var(--vtc-wrap)}
.tabs a{padding:9px 18px;border:1px solid var(--vtc-line);border-radius:999px;background:var(--vtc-white);color:var(--vtc-text);font-size:.92rem;font-weight:700}
.tabs a:hover{border-color:var(--vtc-blue);color:var(--vtc-blue);text-decoration:none}
.tabs a[aria-current="page"]{border-color:var(--vtc-blue);background:var(--vtc-blue);color:var(--vtc-white)}

/* Kennzahlen nebeneinander. */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin:0 auto 26px;max-width:var(--vtc-wrap)}
.stat{padding:20px 22px;border:1px solid var(--vtc-line-2);border-radius:var(--vtc-radius-card);background:var(--vtc-white);box-shadow:var(--vtc-shadow-card)}
.stat b{display:block;color:var(--vtc-navy);font-size:1.6rem;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.stat span{display:block;margin-top:4px;color:var(--vtc-muted);font-size:.86rem}
.stat--due b{color:#1f7a3d}

/* Tabellen laufen auf schmalen Schirmen in ihren eigenen Rollbereich, damit
   die Seite selbst nicht seitlich wandert. */
.table-card{margin:0 auto 26px;max-width:var(--vtc-wrap);border:1px solid var(--vtc-line-2);border-radius:var(--vtc-radius-card);background:var(--vtc-white);box-shadow:var(--vtc-shadow-card);overflow:hidden}
.table-card > h2{margin:0;padding:20px 24px 0;font-size:1.15rem}
.table-scroll{overflow-x:auto}
table.data{width:100%;border-collapse:collapse;font-size:.92rem}
table.data th,table.data td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--vtc-line-2);vertical-align:middle;white-space:nowrap}
table.data th{color:var(--vtc-muted);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
table.data tbody tr:last-child td{border-bottom:0}
table.data tbody tr:hover{background:var(--vtc-soft)}
table.data td.wrap-cell{white-space:normal;min-width:180px}
table.data td.num{text-align:right;font-variant-numeric:tabular-nums}
.empty{padding:34px 24px;color:var(--vtc-muted);text-align:center}

/* Statusmarken. Farbe traegt hier keine Bedeutung allein -- der Text steht
   immer daneben, sonst waere die Tabelle ohne Farbsehen nicht lesbar. */
.tag{display:inline-block;padding:4px 11px;border-radius:999px;font-size:.79rem;font-weight:700;white-space:nowrap}
.tag--neu{background:#e7f0fe;color:#12448f}
.tag--beratung{background:#fdf3e0;color:#8a5a12}
.tag--zu{background:#e6f6ec;color:#1f6b38}
.tag--storno{background:#f1f3f6;color:#5c6d89}
.tag--gesperrt{background:#fdeaea;color:#95221f}
.tag--offen{background:#f1f3f6;color:#5c6d89}

/* Knopf in Tabellenzeilen. */
.btn-mini{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 13px;border:1px solid var(--vtc-line);border-radius:var(--vtc-radius-sm);background:var(--vtc-white);color:var(--vtc-text);font-family:inherit;font-size:.84rem;font-weight:700;cursor:pointer}
.btn-mini:hover{border-color:var(--vtc-blue);color:var(--vtc-blue)}
.btn-mini--warn:hover{border-color:#c0392b;color:#c0392b}
.row-form{display:inline-flex;align-items:center;gap:7px;margin:0}
.row-form select{min-height:34px;padding:0 9px;border:1px solid var(--vtc-line);border-radius:var(--vtc-radius-sm);background:var(--vtc-white);color:var(--vtc-text);font-family:inherit;font-size:.84rem}

/* Filterleiste über Tabellen. */
.filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;padding:20px 24px;border-bottom:1px solid var(--vtc-line-2);background:var(--vtc-soft)}
.filters label{display:flex;flex-direction:column;gap:5px;margin:0;color:var(--vtc-muted);font-size:.79rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.filters input,.filters select{min-height:40px;min-width:170px;padding:0 12px;border:1px solid var(--vtc-line);border-radius:var(--vtc-radius-sm);background:var(--vtc-white);color:var(--vtc-text);font-family:inherit;font-size:.92rem}

/* Zwei Spalten: Inhalt und schmale Seitenspalte. */
.split{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;margin:0 auto;max-width:var(--vtc-wrap);align-items:start}
.split > * {min-width:0}

/* Anmeldeseite. */
.auth{max-width:460px;margin:0 auto}
.auth h1{font-size:1.6rem;margin:0 0 8px;text-align:center}
.auth-sub{margin:0 0 24px;color:var(--vtc-muted);text-align:center}
.auth .panel{padding:28px}
.auth-alt{margin:18px 0 0;color:var(--vtc-muted);font-size:.92rem;text-align:center}
.auth-foot{margin:22px auto 0;max-width:460px;color:var(--vtc-muted);font-size:.88rem;text-align:center}

@media (max-width:900px){
  .split{grid-template-columns:1fr}
  .page{padding:32px 0 48px}
  .page-head h1{font-size:1.55rem}
}

/* Ansprechpartner in der Seitenspalte des Kontos.
   Eigenes Bauteil statt einer Abwandlung der Karte von der Startseite: die ist
   fuers breite Hero-Raster gebaut, mit 198px-Portrait und einem 250px grossen
   Farbschein dahinter. In 320px Breite ragt dieser Schein aus seinem Kasten
   heraus und legt sich ueber den Namen, und ein langer Firmenname wird obendrein
   mitten im Wort getrennt. Hier steht deshalb ein kleines Bild neben dem Namen,
   ohne Schein und ohne Silbentrennung. */
.mate{padding:26px 22px;border:1px solid var(--vtc-line-2);border-radius:var(--vtc-radius-card);background:var(--vtc-white);box-shadow:var(--vtc-shadow-card);text-align:center}
.mate-eyebrow{margin:0 0 18px;color:var(--vtc-blue);font-size:.68rem;font-weight:750;letter-spacing:.14em;text-transform:uppercase}

/* Bild als eigener Block ueber dem Namen. Nebeneinander blieb fuer beides zu
   wenig Platz -- ein Firmenlogo war in 56px nicht mehr zu erkennen. */
.mate-head{display:block}
.mate-avatar{display:block;width:104px;height:104px;margin:0 auto 14px;border-radius:50%;object-fit:cover;object-position:center 22%;background:var(--vtc-soft-2);box-shadow:0 10px 24px rgba(7,43,99,.12)}
.mate-avatar--mono{display:grid;place-items:center;background:linear-gradient(150deg,var(--vtc-blue-2) 0,var(--vtc-blue-dark) 100%);color:var(--vtc-white);font-size:2.4rem;font-weight:800}
.mate-avatar[hidden]{display:none}
.mate-name{margin:0;color:var(--vtc-navy);font-size:1.08rem;font-weight:800;line-height:1.35;overflow-wrap:break-word}

/* Die Zeilen bleiben untereinander buendig, der Block als ganzes steht
   mittig -- jede Zeile fuer sich zentriert saehe ausgefranst aus. */
.mate-contact{display:grid;justify-content:center;gap:11px;margin:18px 0 0;padding:0;list-style:none;text-align:left}
.mate-contact li{display:flex;align-items:center;gap:10px}
.mate-contact svg{flex:0 0 16px;color:var(--vtc-blue)}
.mate-contact a{color:var(--vtc-blue);font-size:.94rem;font-weight:700;overflow-wrap:anywhere}
.mate-meta{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--vtc-line-2);color:var(--vtc-muted);font-size:.8rem;line-height:1.55}

/* Auf schmalen Schirmen steht die Karte unter dem Inhalt statt daneben. */
@media (max-width:900px){
  .mate{margin-top:4px}
}

/* ------------------------------------------------------------------ */
/* Auswahl des Auszahlungsweges und Nachricht an den Ansprechpartner    */
/* ------------------------------------------------------------------ */

/* Mehrzeiliges Feld gab es bisher nirgends -- es erbt hier die Gestaltung
   der einzeiligen Felder. */
textarea{width:100%;min-height:150px;padding:12px 14px;border:1px solid #cfdcea;border-radius:var(--vtc-radius-sm);background:var(--vtc-white);color:var(--vtc-text);font:inherit;line-height:1.6;resize:vertical;transition:border-color .15s,box-shadow .15s}
textarea:focus{outline:0;border-color:var(--vtc-blue);box-shadow:0 0 0 4px rgba(7,91,216,.12)}

/* Ein Auszahlungsweg zur Auswahl, mit seinen Feldern darunter. */
.choice{margin-top:16px;border:1px solid var(--vtc-line-2);border-radius:var(--vtc-radius-card);background:var(--vtc-white);overflow:hidden}
.choice:has(input:checked){border-color:var(--vtc-blue);box-shadow:0 0 0 3px rgba(7,91,216,.09)}
.choice-head{display:flex;align-items:flex-start;gap:12px;margin:0;padding:16px 18px;cursor:pointer}
.choice-head input{flex:0 0 20px;width:20px;min-height:20px;height:20px;margin:2px 0 0;padding:0;accent-color:var(--vtc-blue)}
.choice-head span{display:grid;gap:3px}
.choice-head b{color:var(--vtc-navy);font-size:1rem;font-weight:800}
.choice-head small{color:var(--vtc-muted);font-size:.86rem;font-weight:500;line-height:1.45}
.choice-fields{padding:2px 18px 20px;border-top:1px solid var(--vtc-line-2);background:var(--vtc-soft)}
.choice-fields[hidden]{display:none}
.choice-fields .form-hint{margin:6px 0 0}
.optional{color:var(--vtc-muted);font-weight:500}

/* Knopf in der Ansprechpartner-Karte. */
.mate-action{margin:16px 0 0}
.mate-action .btn{margin-top:0;min-height:42px;font-size:.9rem}

/* Kontoverbindung erst auf Klick. In einer Liste, die jemand auf dem Schirm
   offen hat, hat eine vollstaendige IBAN nichts verloren. */
.reveal > summary{cursor:pointer;color:var(--vtc-blue);font-size:.84rem;font-weight:700;list-style:none}
.reveal > summary::-webkit-details-marker{display:none}
.reveal > summary::after{content:' ▸';font-size:.75rem}
.reveal[open] > summary::after{content:' ▾'}
.reveal > div{margin-top:6px;padding:8px 10px;border-radius:var(--vtc-radius-sm);background:var(--vtc-soft);font-size:.84rem;line-height:1.6}
.reveal code{font-size:.84rem}

/* Firmenlogo statt Portrait.
   object-fit:cover ist fuer Gesichter richtig -- es fuellt den Kreis und
   schneidet die Raender weg. Ein Logo im Querformat wuerde dabei bis zur
   Unkenntlichkeit beschnitten, deshalb wird es hineingelegt statt formatfuellend
   beschnitten. */
/* Firmenlogo statt Portrait.
   Zwei Unterschiede zu einem Gesicht: Der Anschnitt darf nicht nach oben
   verschoben sein (object-position 22% sucht dort Augen), und hinter einer
   freigestellten Grafik braucht es einen ruhigen Grund.
   Der Anschnitt bleibt bewusst "cover": Die verwendete Datei ist 2367x1117
   gross, das Motiv darin aber nur 650x724 und mittig -- "contain" wuerde den
   transparenten Rand mitskalieren und die Grafik winzig machen. Sauberer waere,
   den Rand in der Datei selbst wegzuschneiden. */
.mate-avatar--logo{object-position:center;background:var(--vtc-soft-2)}
.portrait-photo--logo,.aside-photo--logo{object-position:center;background:var(--vtc-soft-2)}

/* Die Ansprechpartner-Karte im Hero hat zwei Spalten: Text und Portrait.
   Unterhalb von rund 1250px bleiben fuer den Text keine 100px mehr uebrig, und
   ein langer Firmenname wird dann mitten im Wort umgebrochen. Sie stapelt
   deshalb schon hier statt erst bei 1080px. */
@media (max-width:1250px){
  .advisor-card{grid-template-columns:1fr;gap:22px}
  .portrait{min-height:0;--portrait:min(150px,52%)}
}

/* Zwei schmale Felder nebeneinander, PLZ deutlich kleiner als der Ort. */
.field-grid--zip{grid-template-columns:minmax(0,1fr) minmax(0,2.2fr)}

/* QR-Code neben dem Einladungslink. Das SVG bringt eigene Masse mit, die hier
   auf die Kartenbreite gebracht werden. */
.qr-card{text-align:center}
.qr{margin:6px auto 14px;max-width:220px}
.qr svg{display:block;width:100%;height:auto}

/* Platzhalterliste im Mailtext-Bereich. */
.platzhalter{margin:14px 0 0}
.platzhalter dt{margin-top:12px;color:var(--vtc-navy);font-weight:700}
.platzhalter dt code{padding:2px 6px;border-radius:4px;background:var(--vtc-soft-2);font-size:.86rem}
.platzhalter dd{margin:3px 0 0;color:var(--vtc-muted);font-size:.86rem;line-height:1.5}
.platzhalter dd small{color:#8b98ad}
.beispiel{margin:10px 0 0;padding:12px 14px;border-radius:var(--vtc-radius-sm);background:var(--vtc-soft);color:var(--vtc-text);font-size:.82rem;line-height:1.55;white-space:pre-wrap;overflow-x:auto}

/* Auszahlungslauf: Schrittfolge und kompakte Aufzählungen. */
.schritte{margin:12px 0 0;padding-left:20px;color:var(--vtc-text);line-height:1.7}
.schritte li{margin-bottom:6px}
.klein{margin:8px 0 0;padding-left:18px;color:var(--vtc-muted);font-size:.86rem;line-height:1.6}
table.data td input[type=checkbox],table.data th input[type=checkbox]{width:18px;min-height:18px;height:18px;margin:0;accent-color:var(--vtc-blue)}

/* --- Konto schliessen ----------------------------------------------------
   Der rote Knopf ist die einzige Stelle im Portal, die Rot benutzt. Genau
   deshalb faellt er auf -- eine zweite rote Schaltflaeche anderswo wuerde ihn
   entwerten. */
.btn-danger{background:#c0392b;box-shadow:0 14px 28px rgba(192,57,43,.18)}
.btn-danger:hover{background:#a93226}
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:22px}
.notice--warn{border-color:#f0c4be;border-left-color:#c0392b;background:#fdf4f3;color:#6b241c}
.mini-head{margin:26px 0 8px;font-size:.95rem;font-weight:800;color:var(--vtc-navy)}
.liste{margin:0;padding-left:22px;color:var(--vtc-muted);line-height:1.6}
.liste li{margin-bottom:6px}
.liste strong{color:var(--vtc-text)}
.check{display:flex;align-items:flex-start;gap:10px;margin:22px 0 0;font-weight:400;line-height:1.5;color:var(--vtc-text)}
.check input{flex:0 0 auto;width:18px;height:18px;margin-top:2px;accent-color:#c0392b}

/* --- Ampel der Maklerauswertung ------------------------------------------
   Nicht nur Farbe: Jede Stufe traegt ihr Wort. Wer Rot und Gruen nicht
   unterscheidet, liest sonst eine leere Spalte. */
.ampel{display:inline-block;padding:4px 11px;border-radius:999px;font-size:.78rem;font-weight:800;white-space:nowrap}
.ampel--gruen{background:#e6f6ea;color:#1f6b36}
.ampel--gelb{background:#fdf3e0;color:#8a5a13}
.ampel--rot{background:#fdeceb;color:#93251c}
.ampel--grau{background:#eef2f7;color:#5c6d89}

/* --- Knopf im Fuss, der die Einwilligungseinstellungen oeffnet ------------
   Sieht aus wie die Links daneben, ist aber ein Knopf: Er fuehrt nirgendwo
   hin, sondern oeffnet ein Fenster. */
/* Sieht aus wie die Links daneben, ist aber ein Knopf: Er fuehrt nirgendwo hin,
   sondern oeffnet ein Fenster. Die Werte stehen ausgeschrieben statt "inherit",
   weil ein <button> die Schriftgroesse und -staerke der Nachbarlinks nicht erbt --
   er erbt die des <li>. */
.footer-link-btn{padding:0;border:0;background:none;font-family:inherit;
  color:var(--vtc-navy);font-size:.9rem;font-weight:600;line-height:inherit;
  text-decoration:none;cursor:pointer}
.footer-link-btn:hover{color:var(--vtc-blue);text-decoration:underline}

/* --- Rechtstexte aus dem Legal-Repo --------------------------------------
   Die Fragmente bringen ihre Klassen mit, aber kein CSS -- das ist Sache der
   einbindenden Seite. Hier bekommen sie die Typografie des Portals. */
.vtc-legal__header{margin-bottom:26px;padding-bottom:20px;border-bottom:1px solid var(--vtc-line)}
.vtc-legal__eyebrow,.vtc-legal__kicker{margin:0 0 6px;font-size:.82rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--vtc-muted)}
.vtc-legal__title{margin:0;font-size:1.5rem;line-height:1.3;font-weight:800;color:var(--vtc-navy)}
.vtc-legal__section{margin-bottom:28px}
.vtc-legal__section:last-child{margin-bottom:0}
.vtc-legal__section-title{margin:0 0 10px;font-size:1.08rem;font-weight:800;color:var(--vtc-navy)}
.vtc-legal__subsection{margin:18px 0 0}
.vtc-legal__subsection-title{margin:0 0 8px;font-size:.98rem;font-weight:700;color:var(--vtc-text)}
.vtc-legal__text,.vtc-legal__contact{margin:0 0 12px;line-height:1.65;color:var(--vtc-text)}
.vtc-legal__text:last-child,.vtc-legal__contact:last-child{margin-bottom:0}
.vtc-legal__address{margin:0;font-style:normal;line-height:1.7;color:var(--vtc-text)}
.vtc-legal__link,.panel--legal a{color:var(--vtc-blue)}
/* Lange Adressen und Aufsichtsbehoerden-URLs sollen die Karte nicht sprengen. */
.panel--legal a{overflow-wrap:anywhere}

/* Breite eines Rechtstextes.
   Nicht die 560px der Formulare: Das ist eine Eingabespalte, kein Lesetext.
   Die Karte bekommt die Breite der Dokumentwahl darueber -- so stehen beide
   buendig, und die sechs Reiter passen weiter in eine Zeile. */
.page-legal{max-width:940px;margin:0 auto}
.tabs--recht{flex-wrap:wrap;max-width:940px}
/* .panel bringt max-width:640px mit -- fuer Formularkarten richtig, fuer einen
   Rechtstext nicht. Sonst stuende die Karte schmaler als ihr eigener Container
   und waere gegen die Reiterzeile darueber verschoben. */
.panel--legal{max-width:none;padding:42px 52px}
/* Etwas groesser und luftiger als der uebrige Fliesstext: In einer breiten
   Spalte findet das Auge sonst den naechsten Zeilenanfang schlechter wieder. */
.panel--legal .vtc-legal__text,
.panel--legal .vtc-legal__contact,
.panel--legal .vtc-legal__address{font-size:1.05rem;line-height:1.75}
@media (max-width:640px){
  /* 38px Innenabstand fressen auf einem 375er Schirm ein Fuenftel der Breite. */
  .panel--legal{padding:24px 20px}
}

/* --- Fussnote zum Praemienversprechen ------------------------------------
   Steht direkt unter dem Teaser, nicht am Seitenende: Eine Einschraenkung,
   die man suchen muss, ist keine. */
/* Zwischen "Praemie." und dem Stern darf nichts umbrechen -- sonst steht das
   Sternchen allein in der naechsten Zeile. Deshalb bindet .nowrap beide
   zusammen; das Wort ist kurz genug, dass das auf keinem Schirm stoert. */
.nowrap{white-space:nowrap}
.fussnote{margin-left:2px;font-size:.72em;font-weight:400;text-decoration:none;vertical-align:super}
.hero-fussnote{max-width:34em;margin:18px 0 0;color:var(--vtc-muted);font-size:.82rem;line-height:1.5}
.hero-fussnote a{color:var(--vtc-blue)}

/* Vollständige Farbwelten der Einladung. Status- und Warnfarben bleiben semantisch. */
.einladungsseite{--welt-mittel:#cfe4fb;--welt-hell:#edf5ff;--welt-schatten:7,43,99;--welt-akzent:7,91,216}
.einladungsseite.farbwelt-petrol{--vtc-blue:#086b70;--vtc-blue-2:#075b60;--vtc-blue-dark:#07464a;--vtc-navy:#123d41;--vtc-ink:#142e31;--vtc-text:#25474a;--vtc-muted:#536e71;--vtc-line:#d5e5e5;--vtc-line-2:#dceaea;--vtc-soft:#f3f9f9;--vtc-soft-2:#e8f4f3;--vtc-bg:#f8fbfb;--welt-mittel:#c9e5e2;--welt-hell:#edf7f6;--welt-schatten:8,65,70;--welt-akzent:8,107,112}
.einladungsseite.farbwelt-gruen{--vtc-blue:#28703c;--vtc-blue-2:#205d31;--vtc-blue-dark:#20482b;--vtc-navy:#213e2b;--vtc-ink:#1c3023;--vtc-text:#304b37;--vtc-muted:#5b7060;--vtc-line:#dae6dc;--vtc-line-2:#e1ebe3;--vtc-soft:#f5f9f5;--vtc-soft-2:#edf5ec;--vtc-bg:#f9fbf8;--welt-mittel:#d5e9d3;--welt-hell:#f0f7ed;--welt-schatten:33,68,43;--welt-akzent:40,112,60}
.einladungsseite.farbwelt-violett{--vtc-blue:#7041a0;--vtc-blue-2:#5d3488;--vtc-blue-dark:#452761;--vtc-navy:#39284d;--vtc-ink:#302439;--vtc-text:#4b3c5c;--vtc-muted:#72647e;--vtc-line:#e6deec;--vtc-line-2:#ebe4f0;--vtc-soft:#f9f6fb;--vtc-soft-2:#f2ecf8;--vtc-bg:#fcfafd;--welt-mittel:#e2d4ef;--welt-hell:#f5effa;--welt-schatten:65,38,90;--welt-akzent:112,65,160}
.einladungsseite.farbwelt-monochrom{--vtc-blue:#252525;--vtc-blue-2:#080808;--vtc-blue-dark:#181818;--vtc-navy:#202020;--vtc-ink:#181818;--vtc-text:#363636;--vtc-muted:#626262;--vtc-line:#dedede;--vtc-line-2:#e6e6e6;--vtc-soft:#f7f7f6;--vtc-soft-2:#f0f0ef;--vtc-bg:#fafafa;--welt-mittel:#dededb;--welt-hell:#f6f6f4;--welt-schatten:20,20,20;--welt-akzent:25,25,25}
.einladungsseite.schrift-modern{--vtc-font:"Trebuchet MS","Segoe UI",Arial,sans-serif}
.einladungsseite.schrift-elegant,.einladungsseite.farbwelt-monochrom.schrift-passend{--einladung-titelschrift:Georgia,"Times New Roman",serif;--vtc-script:Georgia,"Times New Roman",serif}
.einladungsseite:is(.schrift-elegant,.farbwelt-monochrom.schrift-passend) :is(h1,h2,h3){font-family:var(--einladung-titelschrift);font-weight:500;letter-spacing:-.025em}
.einladungsseite:is(.schrift-elegant,.farbwelt-monochrom.schrift-passend) .advisor-name{font-family:var(--einladung-titelschrift);font-weight:500;font-size:1.6rem}
.einladungsseite.farbwelt-monochrom .btn,.einladungsseite.farbwelt-monochrom .header-cta{box-shadow:0 5px 14px rgba(0,0,0,.09)}
.bild-upload-vorschau{margin:12px 0;padding:14px;border:1px solid var(--vtc-line);border-radius:10px;background:var(--vtc-soft)}
.bild-upload-vorschau img{display:block;width:100%;max-height:180px;object-fit:contain;border-radius:6px;background:#e4e4e4}
.bild-upload-vorschau img[hidden]{display:none}
.bild-upload-vorschau .form-hint{overflow-wrap:anywhere;margin:10px 0}
.bild-upload-vorschau button:disabled{opacity:.5;cursor:default}
.einladungsseite{--vtc-shadow-card:0 12px 30px rgba(var(--welt-schatten),.06);--vtc-shadow-panel:0 18px 48px rgba(var(--welt-schatten),.08);--vtc-shadow-btn:0 14px 28px rgba(var(--welt-akzent),.18)}
.einladungsseite .topbar{background:var(--vtc-soft);border-color:var(--vtc-line)}
.einladungsseite .site-header,.einladungsseite .site-footer{border-color:var(--vtc-line);color:var(--vtc-text)}
.einladungsseite .hero{background:radial-gradient(ellipse at 85% 5%,var(--welt-mittel),transparent 65%),linear-gradient(180deg,var(--welt-hell),#fff)}
.einladungsseite .premium,.einladungsseite .portrait::before,.einladungsseite .aside-photo::before,.einladungsseite .how-figure{background:radial-gradient(circle at 40% 30%,var(--welt-hell),var(--welt-mittel))}
.einladungsseite .portrait-photo,.einladungsseite .portrait-mono,.einladungsseite .aside-photo img,.einladungsseite .aside-photo-mono,.einladungsseite .aside-badge{box-shadow:0 12px 28px rgba(var(--welt-schatten),.16)}
.einladungsseite .how,.einladungsseite .signup-aside{background:linear-gradient(180deg,var(--vtc-soft),var(--vtc-soft-2))}
.einladungsseite .how-arrow,.einladungsseite .aside-quote:before{color:var(--welt-mittel)}
.einladungsseite .how-num{box-shadow:0 8px 18px rgba(var(--welt-akzent),.25)}
.einladungsseite .assurance-strip{background:var(--vtc-soft-2)}
.einladungsseite .assurance + .assurance,.einladungsseite .aside-quote,.einladungsseite .btn-ghost{border-color:var(--vtc-line)}
.einladungsseite .advisor-company{color:var(--vtc-muted)}
.einladungsseite input{border-color:var(--vtc-line)}
.einladungsseite input:focus{border-color:var(--vtc-blue);box-shadow:0 0 0 3px rgba(var(--welt-akzent),.15)}
.einladungsseite .field > svg,.einladungsseite .pw-toggle{color:var(--vtc-muted)}
.einladungsseite .field input::placeholder{color:var(--vtc-muted)}
.einladungsseite .how-figure [fill="#2f7ce8"],.einladungsseite .how-figure [fill="#0b56c8"]{fill:var(--vtc-blue)}
.einladungsseite .how-figure [fill="#0b4bb0"]{fill:var(--vtc-blue-dark)}
.einladungsseite .how-figure [fill="#a8ccfa"],.einladungsseite .how-figure [fill="#d7e6fa"]{fill:var(--welt-mittel)}
.einladungsseite .how-figure [stroke="#cfe0f8"],.einladungsseite .how-figure [stroke="#9dc3f5"]{stroke:var(--welt-mittel)}
.einladungsseite .how-figure stop[offset="0"]{stop-color:var(--welt-mittel)}
.einladungsseite .how-figure stop[offset="1"]{stop-color:var(--vtc-blue)}

/* Dieselben Bausteine in drei festen Seitenaufbauten. */
.einladungs-gestaltung .hero-text{min-width:0}
.einladungs-gestaltung[data-bildposition=links] .einladungs-titelbild{object-position:left center}
.einladungs-gestaltung[data-bildposition=rechts] .einladungs-titelbild{object-position:right center}
.einladungs-gestaltung[data-bildposition=mitte] .einladungs-titelbild{object-position:center}
.einladungs-gestaltung[data-bildart=ohne] .einladungs-titelbild{display:none}
.einladungs-gestaltung[data-bildart=neben]:has(.einladungs-titelbild:not([hidden])) .hero-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 48px;align-items:start}
.einladungs-gestaltung[data-bildart=neben]:has(.einladungs-titelbild:not([hidden])) .hero-grid{display:contents}
.einladungs-gestaltung[data-bildart=neben]:has(.einladungs-titelbild:not([hidden])) .hero-text{grid-column:1;grid-row:1 / span 2;align-self:center}
.einladungs-gestaltung[data-bildart=neben] .einladungs-titelbild{grid-column:2;grid-row:1;margin:0;height:260px}
.einladungs-gestaltung[data-bildart=neben]:has(.einladungs-titelbild:not([hidden])) .hero-ansprechpartner{grid-column:2;grid-row:2}
.einladungs-gestaltung[data-bildart=neben] .premium{display:none}
.einladungs-gestaltung[data-layout=bildbetont] .hero{padding-top:32px}
.einladungs-gestaltung[data-layout=bildbetont][data-bildart=banner] .einladungs-titelbild{height:clamp(240px,32vw,440px);border-radius:24px}
.einladungs-gestaltung[data-layout=bildbetont] .hero-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:40px}
.einladungs-gestaltung[data-layout=bildbetont] h1{font-size:clamp(2.2rem,4.6vw,3.6rem)}
.einladungs-gestaltung[data-layout=bildbetont] .premium,.einladungs-gestaltung[data-layout=kompakt] .premium{display:none}
.einladungs-gestaltung:is([data-layout=bildbetont],[data-layout=kompakt]) .advisor-card{grid-template-columns:minmax(0,1fr) 96px;gap:14px;padding:24px}
.einladungs-gestaltung:is([data-layout=bildbetont],[data-layout=kompakt]) .portrait{--portrait:86px;min-height:110px}
.einladungs-gestaltung:is([data-layout=bildbetont],[data-layout=kompakt]) .portrait-mono{font-size:1.8rem}
.einladungs-gestaltung:is([data-layout=bildbetont],[data-layout=kompakt]) .seal{position:static;width:90px;grid-area:2/1;margin-top:16px}
.einladungs-gestaltung:is([data-layout=bildbetont],[data-layout=kompakt]) .thanks{display:none}
.einladungs-gestaltung[data-layout=kompakt] .hero{padding:28px 0 32px}
.einladungs-gestaltung[data-layout=kompakt] .hero-grid{gap:32px}
.einladungs-gestaltung[data-layout=kompakt] h1{font-size:clamp(1.8rem,3vw,2.5rem)}
.einladungs-gestaltung[data-layout=kompakt] .hero-lead{margin-bottom:18px}
.einladungs-gestaltung[data-layout=kompakt] .assurances{margin-top:16px;gap:8px 20px}
.einladungs-gestaltung[data-layout=kompakt] .einladungs-titelbild{height:180px;margin-bottom:24px}
.einladungs-gestaltung[data-layout=kompakt] .panel-section{padding-top:28px}
.einladungs-gestaltung[data-layout=kompakt] .benefits{margin-top:24px}
.vorschau-formular{border:0;margin:0;padding:0;min-width:0}
.vorschau-formular legend{font-size:.8rem;color:var(--vtc-muted);margin-bottom:12px}
.vorschau-formular input:disabled,.vorschau-formular button:disabled{cursor:default;opacity:.8}

/* Vollständige Vorschau mit echter Desktop- und Mobilbreite im Rahmen. */
.gestaltung-raster{grid-template-columns:minmax(300px,360px) minmax(0,1fr);gap:28px}
.gestaltung-raster > .panel{padding:26px;max-width:none}
.gestaltung-raster select{display:block;min-height:48px;padding:10px 12px;border:1px solid var(--vtc-line);border-radius:var(--vtc-radius-sm);background:#fff;color:var(--vtc-text);font:inherit;font-size:.9rem}
.gestaltung-raster select:focus{outline:2px solid var(--vtc-blue);outline-offset:2px}
.gestaltung-vorschau{min-width:0;position:sticky;top:18px}
.vorschau-kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.vorschau-kopf h2{font-size:1.25rem}
.vorschau-kopf .form-hint{margin:4px 0 0}
.vorschau-umschalter{display:flex;gap:6px}
.vorschau-umschalter [aria-pressed=true]{background:var(--vtc-blue);border-color:var(--vtc-blue);color:#fff}
.vorschau-flaeche{background:#e9eef4;border:1px solid var(--vtc-line);border-radius:14px;overflow:hidden;min-width:0}
.vorschau-geraet{position:relative;margin:0 auto;overflow:hidden;background:#fff}
#vorschau-seite{display:block;border:0;transform-origin:top left;max-width:none}
@media(max-width:1000px){.gestaltung-raster{grid-template-columns:1fr}.gestaltung-vorschau{position:static}}
@media(max-width:800px){
  .einladungs-gestaltung[data-bildart=neben]:has(.einladungs-titelbild:not([hidden])) .hero-wrap{display:flex;flex-direction:column;gap:24px}
  .einladungs-gestaltung[data-bildart=neben] .einladungs-titelbild{height:220px;order:0}
  .einladungs-gestaltung[data-bildart=neben] .hero-text{order:1}
  .einladungs-gestaltung[data-bildart=neben] .hero-ansprechpartner{order:2;width:100%}
  .einladungs-gestaltung[data-layout=bildbetont] .hero-grid,.einladungs-gestaltung[data-layout=kompakt] .hero-grid{grid-template-columns:1fr;gap:24px}
  .einladungs-gestaltung:is([data-layout=bildbetont],[data-layout=kompakt]) .advisor-card{grid-template-columns:minmax(0,1fr) 86px;padding:20px}
  .einladungs-gestaltung:is([data-layout=bildbetont],[data-layout=kompakt]) .portrait{--portrait:76px;min-height:90px}
}