/* Digitale Visitenkarte, gleiche Optik wie die bisherigen busycard-Karten */
:root{
  color-scheme:light;
  --bar:#5d6d88; --panel:rgba(255,255,255,.62); --pill:rgba(255,255,255,.92);
  --ink:#2b3239; --muted:#55606b; --navy:#355476; --white:#fff;
  --sans:sans-serif,Arial,Helvetica;
}
*{box-sizing:border-box}
html{background:#3f5b80}
body{margin:0;min-height:100vh;font:16px/1.4 var(--sans);color:var(--ink);
  background:linear-gradient(180deg,#3f5b80 0%,#8d9fb8 24%,#d3dce7 50%,#8d9fb8 76%,#3f5b80 100%) fixed #3f5b80}
body.bg-image{background:var(--bgimg) center/cover fixed #6e7680}
img{max-width:100%}
main,picture{display:block}
.head picture,.photo picture,.sec picture{width:100%}
/* Maße wie im Original: Spalte 610 px breit */
.card{max-width:610px;margin:0 auto;padding-bottom:120px;position:relative}
.head{padding:10px 0 9px}
.head img{display:block;width:100%;height:auto}
/* Das Foto enthält Kreis und weißen Rand bereits im Bild, deshalb nicht zuschneiden */
.photo{width:100%;margin:0;display:grid;place-items:center}
.photo img{display:block;width:100%;height:auto}
/* Normales Foto: wird automatisch rund auf weißem Quadrat dargestellt, wie die bisherigen Karten */
.photo.rund{background:#fff;aspect-ratio:1}
.photo.rund img{width:92%;height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;object-position:50% 25%}
.photo.initials{aspect-ratio:1;max-width:100%;background:#fff;border-radius:50%;width:80%;margin:4% auto;font:700 5rem var(--sans);color:#6b778a}
.wrap{padding-left:max(0px,env(safe-area-inset-left,0px));padding-right:max(0px,env(safe-area-inset-right,0px))}
.panel{background:rgba(255,255,255,.6);border-radius:8px;padding:0 10px 20px;margin-top:14px;text-align:center;font-size:16px;letter-spacing:.1em}
h1{font:700 24px/28px var(--sans);margin:10px 0 0;padding:10px 0;letter-spacing:2px;text-wrap:balance}
.firm{font-weight:700;letter-spacing:2px;line-height:1.4;margin:0;padding:5px 0}
.role{letter-spacing:2px;line-height:1.4;margin:0 0 5px;padding:15px 0}
.pills{list-style:none;margin:10px 0;padding:0;display:flex;flex-direction:column;gap:10px}
.pills li{margin:0}
.pills a{display:flex;align-items:center;justify-content:center;gap:10px;min-height:53px;background:rgba(255,255,255,.9);border-radius:8px;box-shadow:2px 2px 3px #ddd;padding:4px 10px;color:var(--ink);text-decoration:none;line-height:1.5;overflow-wrap:anywhere}
.pills svg{flex:none}
.addr{display:block;margin:6px auto 0;color:var(--ink);text-decoration:none;line-height:1.5}
.addr svg{display:block;margin:4px auto 0}
.sec{border-top:2px solid rgba(255,255,255,.75);margin-top:24px;padding-top:20px}
.sec h2{font:700 24px/1.2 var(--sans);color:var(--navy);margin:0 0 16px}
.sec img{display:block;margin:0 auto;width:100%;height:auto}
.vlabel{text-align:left;font-size:14px;letter-spacing:normal;color:#555;margin:0 0 8px}
.video{overflow:hidden;background:#1d2530}
.video video{width:100%;height:auto;display:block}
.html{text-align:center;line-height:1.55}
.html a{color:var(--ink)}
.reach h2{margin-bottom:0}
.reach .sub{font-weight:700;font-size:16px;color:var(--navy);margin:6px 0 16px}
/* Auf dem Handy wie im Original 10 % größer */
@media (max-width:480px){.panel{font-size:17.6px}.foot{font-size:14.08px;letter-spacing:1.76px}}
.soc{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:18px}
.soc a{width:48px;height:48px;border-radius:8px;display:grid;place-items:center;color:#fff}
.btns{display:flex;flex-direction:column;gap:20px;margin:20px 5px 0}
.btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:47px;border-radius:8px;padding:4px 14px;font-weight:700;font-size:18px;line-height:1.3;text-decoration:none;border:0;cursor:pointer;font-family:inherit;color:#fff;box-shadow:0 2px 0 rgba(100,100,100,.5);text-align:center}
.btn.sys{background:var(--navy)}
.btn:focus-visible,.soc a:focus-visible,.pills a:focus-visible,.fab:focus-visible{outline:3px solid #fff;outline-offset:2px}
.foot{text-align:center;color:#fff;font-size:12.8px;font-weight:300;letter-spacing:1.6px;line-height:19.2px;margin-top:40px;display:flex;flex-direction:column;gap:4px}
/* Impressum/Datenschutz: größere Tippfläche bei gleicher Optik */
.foot{gap:0}
.foot > a{display:inline-block;align-self:center;min-height:24px;padding:4px 12px}
.foot a{color:#fff}
.foot .by{margin-top:14px;font-size:12px;letter-spacing:.5px;opacity:.75}
.foot .by a{text-decoration:none}
.fab{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));width:56px;height:56px;border-radius:50%;background:var(--navy);color:#fff;border:0;display:grid;place-items:center;box-shadow:0 4px 12px rgba(0,0,0,.3);text-decoration:none}
.sheet{position:fixed;inset:0;background:rgba(20,28,40,.55);display:grid;place-items:end center;z-index:20}
.sheet[hidden]{display:none}
.sheet .box{background:#fff;width:100%;max-width:610px;border-radius:14px 14px 0 0;padding:20px 18px calc(22px + env(safe-area-inset-bottom,0px));max-height:90vh;overflow:auto}
.sheet h3{margin:0 0 4px;font-size:1.15rem;color:var(--navy)}
.sheet p{margin:0 0 14px;color:var(--muted);font-size:.9rem}
.sheet label{display:block;font-weight:700;font-size:.88rem;margin:10px 0 4px}
.sheet input,.sheet textarea{width:100%;font:inherit;padding:10px;border:1px solid #c7ced8;border-radius:6px;color:var(--ink);background:#fff}
.sheet textarea{min-height:80px}
.sheet .row{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.sheet .x{background:#e9ecf1;color:var(--ink)}
.sheet .consent{font-weight:400;display:flex;gap:8px;align-items:flex-start}
.sheet .consent input{width:auto;margin-top:4px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.shares{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 16px}
.shares a{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;color:#fff}
#qr{display:grid;place-items:center;padding:12px;background:#fff;border:1px solid #e1e5eb;border-radius:8px;margin-bottom:8px}
#qr svg{width:230px;max-width:100%;height:auto}
.note{font-size:.88rem;border-radius:6px;padding:8px 10px;margin-top:10px;background:#f2f4f7;color:var(--ink)}
.note.ok{background:#e7f4ea;color:#1f5e33}
.note.err{background:#fbeceb;color:#8a2a22}
.copyline{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.copyline code{background:#f2f4f7;padding:6px 8px;border-radius:6px;font-size:.85rem;overflow-wrap:anywhere;min-width:0;flex:1}
@media (prefers-reduced-motion:no-preference){.btn{transition:filter .15s}.btn:hover{filter:brightness(1.06)}}