/* vcard.tv – öffentliche Seiten. Maße 1:1 aus dem freigegebenen Mockup (375 px Handybreite). */
@font-face{font-family:"Roboto";src:url(../fonts/roboto-latin.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto Condensed";src:url(../fonts/roboto-condensed-latin.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --bg:#131313; --outer:#0b0b0c; --panel:#1e1e20; --panel-2:#232325; --card:#1c1c1e; --line:#2e2e31; --sep:#262628;
  --text:#f4f4f4; --muted:#a6a6aa; --soft:#9d9da2; --dim:#6e6e73; --chip:#d6d6d9;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{color-scheme:dark;background:var(--outer)}
body{margin:0;background:var(--outer);color:var(--text);font:16px/1.4 Roboto,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:8px}
img{max-width:100%}
.i{width:22px;height:22px;flex:none}

.page{position:relative;max-width:480px;min-height:100vh;min-height:100dvh;margin:0 auto;background:var(--bg);padding-bottom:calc(24px + env(safe-area-inset-bottom));overflow:hidden}
@media (min-width:520px){ .page{box-shadow:0 0 0 1px #1a1a1c} }

/* Titel */
.hero{position:relative;height:318px}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:38% 50%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(19,19,19,.25) 0%,rgba(19,19,19,.35) 45%,var(--bg) 100%)}
.hero.plain{height:190px;background:radial-gradient(ellipse 90% 90% at 25% 0%,rgba(255,255,255,.13),transparent 70%)}
.hero.plain::after{display:none}
.hero .logo{position:absolute;left:22px;top:calc(24px + env(safe-area-inset-top));width:92px;height:auto;z-index:2}

.co{position:relative;z-index:2;margin-top:-92px;padding:0 22px}
.claim{font:700 12px/1 "Roboto Condensed",Roboto,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#b5b5ba;margin:0 0 8px}
.co h1{margin:0;font-size:30px;line-height:1.08;font-weight:700;text-wrap:balance}
.co .meta{margin:8px 0 18px;color:var(--muted);font-size:14.5px}

.save{display:flex;align-items:center;justify-content:center;gap:10px;height:54px;border-radius:13px;background:var(--text);color:var(--bg);font-weight:700;font-size:16px;transition:transform .12s ease}
.save .i{width:20px;height:20px}
.save:active{transform:scale(.985)}

.quick{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;margin-top:10px}
.quick a{display:grid;justify-items:center;gap:6px;padding:12px 4px 10px;border-radius:13px;background:var(--panel);font-size:12px;color:var(--muted)}
.quick .i{color:var(--text)}
.quick a:active,.trio a:active{background:var(--panel-2)}

/* Ansprechpartner */
.sec{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:24px 22px 8px}
.sec h2{margin:0;font-size:19px;font-weight:700}
.sec span{font-size:13px;color:var(--dim)}
.people{list-style:none;margin:0 12px;padding:0}
.people li{position:relative}
.people li + li::before{content:"";position:absolute;top:0;left:76px;right:10px;height:1px;background:var(--sep)}
.row{display:grid;grid-template-columns:52px 1fr 14px;gap:14px;align-items:center;padding:11px 10px;border-radius:14px}
.row:hover,.row:active{background:var(--panel-2)}
.people li:has(.row:hover)::before,.people li:has(.row:hover) + li::before{opacity:0}
.av{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:17px;color:var(--text);background:#2c2c30;object-fit:cover}
.t1{background:linear-gradient(140deg,#3a4150,#23262d)} .t2{background:linear-gradient(140deg,#4a3f35,#26221e)}
.t3{background:linear-gradient(140deg,#353f3a,#1f2522)} .t4{background:linear-gradient(140deg,#43384a,#241f28)}
.txt b{display:block;font-weight:500;font-size:16.5px}
.txt small{display:block;color:var(--soft);font-size:13.5px;margin-top:1px}
.chev{width:9px;height:9px;border-top:2px solid var(--dim);border-right:2px solid var(--dim);transform:rotate(45deg)}

/* Personenseite */
.person{background:radial-gradient(ellipse 90% 40% at 50% 0%,rgba(255,255,255,.12),transparent 70%),var(--bg)}
.back{display:inline-flex;align-items:center;gap:8px;margin:calc(18px + env(safe-area-inset-top)) 18px 0;padding:6px 0;font-size:15px;color:#c9c9cd}
.back::before{content:"";width:9px;height:9px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.top{padding:26px 24px 0;display:grid;justify-items:center;text-align:center}
.bigav{width:118px;height:118px;border-radius:50%;display:grid;place-items:center;font:700 38px/1 Roboto,sans-serif;color:var(--text);
  background:linear-gradient(140deg,#3a4150,#1f2228);box-shadow:0 0 0 3px var(--bg),0 0 0 5px #3b3b40;object-fit:cover}
.top h1{margin:18px 0 0;font-size:28px;line-height:1.1;font-weight:700;text-wrap:balance}
.top .role{margin:6px 0 0;color:var(--muted);font-size:15px}
.top .firm{margin:4px 0 0;color:var(--dim);font-size:14px}
.topics{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:16px 0 0;padding:0;list-style:none}
.topics li{font-size:13px;background:var(--panel-2);border-radius:99px;padding:6px 11px;color:var(--chip)}
.acts{padding:22px 22px 0;display:grid;gap:10px}
.trio{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px}
.trio a{display:grid;justify-items:center;gap:6px;padding:12px 4px 10px;border-radius:13px;border:1px solid var(--line);font-size:13px}
.trio .i{width:21px;height:21px}
.share{margin:18px 22px 0;padding:14px;border-radius:16px;background:var(--card);display:grid;grid-template-columns:84px 1fr;gap:14px;align-items:center}
.share .q{background:#fff;border-radius:8px;padding:3px;aspect-ratio:1}
.share .q svg{display:block;width:100%;height:auto}
.share b{display:block;font-size:15px;font-weight:500}
.share span{font-size:13px;color:var(--soft)}

/* Fuß */
.foot{margin:30px 22px 0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:12px;color:var(--dim)}
.foot nav{display:flex;gap:14px}
.foot a:hover{color:var(--muted)}

@media (prefers-reduced-motion:reduce){ .save{transition:none} }