/* /t - sieht aus wie die Telegram-Vorschauseite, hell und dunkel. Bewusst ohne site.css. */
:root { --bg: #f1f2f6; --card: #fff; --text: #000; --muted: #707579; --btn: #3390ec; --btn-hi: #2a7fd4; --link: #3390ec; --shadow: 0 1px 2px rgba(16,35,47,.08), 0 8px 28px rgba(16,35,47,.08); }
@media (prefers-color-scheme: dark) { :root { --bg: #0f0f0f; --card: #212121; --text: #fff; --muted: #aaa; --btn: #8774e1; --btn-hi: #7a66d8; --link: #8774e1; --shadow: none; } }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
.tgp-body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
.tgp { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px 24px; gap: 20px; }
.tgp-card { width: 100%; max-width: 420px; background: var(--card); border-radius: 20px; box-shadow: var(--shadow); padding: 36px 28px 30px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.tgp-ava { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; background: #000; }
.tgp-name { margin-top: 18px; font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; }
.tgp-user { margin-top: 4px; font-size: 15px; color: var(--muted); }
.tgp-desc { margin-top: 16px; font-size: 15.5px; line-height: 1.45; }
.tgp-btn { margin-top: 26px; width: 100%; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--btn); color: #fff; text-decoration: none; font-size: 15px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; transition: background .2s ease; }
.tgp-btn:hover, .tgp-btn:focus-visible { background: var(--btn-hi); outline: none; }
.tgp-hint { margin-top: 16px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.tgp-hint a, .tgp-foot a, .tgp-linkbtn, .tgp-cookie a { color: var(--link); text-decoration: none; }
.tgp-linkbtn { background: none; border: 0; font: inherit; cursor: pointer; padding: 0; }
.tgp-foot { max-width: 420px; font-size: 12px; line-height: 1.5; color: var(--muted); text-align: center; }
.tgp-cookie { position: fixed; left: 12px; right: 12px; bottom: 12px; max-width: 420px; margin: 0 auto; display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 14px; background: var(--card); box-shadow: 0 8px 30px rgba(0,0,0,.25); font-size: 12.5px; color: var(--muted); }
.tgp-cookie[hidden] { display: none; }
.tgp-cookie-btns { display: flex; gap: 6px; flex: none; }
.tgp-cookie button { height: 34px; padding: 0 12px; border-radius: 9px; border: 0; font: inherit; font-weight: 600; cursor: pointer; background: rgba(127,127,127,.16); color: var(--text); }
.tgp-cookie button[data-consent="granted"] { background: var(--btn); color: #fff; }
/* Kopfzeile wie auf t.me */
.tgp-body { display: flex; flex-direction: column; min-height: 100%; }
.tgp-head { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 20px; background: var(--card); box-shadow: 0 1px 0 rgba(0,0,0,.06); }
.tgp-logo { display: inline-flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
.tgp-dl { height: 36px; padding: 0 16px; border-radius: 18px; display: inline-flex; align-items: center; font-size: 14px; font-weight: 600; color: #fff; background: var(--btn); text-decoration: none; }
.tgp { flex: 1; min-height: 0; }
@media (prefers-color-scheme: dark) { .tgp-head { box-shadow: 0 1px 0 rgba(255,255,255,.06); } }