*{box-sizing:border-box;margin:0}
html{min-height:100%;background:var(--bg);background-attachment:fixed}
body{min-height:100vh;color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased}
.page{max-width:580px;margin:0 auto;padding:56px 20px 32px;display:flex;flex-direction:column;align-items:center;min-height:100vh}
.profile{text-align:center;margin-bottom:20px}
.avatar{width:96px;height:96px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 14px;box-shadow:0 2px 12px rgba(0,0,0,.15)}
.avatar.initial{display:grid;place-items:center;background:var(--btn-bg);color:var(--btn-text);font-size:40px;font-weight:700}
h1{font-size:1.35rem;font-weight:700;letter-spacing:-.01em}
.bio{margin-top:8px;line-height:1.45;opacity:.85;white-space:pre-line;max-width:440px}
.socials{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-bottom:24px}
.socials a{color:var(--text);display:grid;place-items:center;width:42px;height:42px;border-radius:50%;transition:transform .15s,background .15s}
.socials a:hover{transform:translateY(-2px);background:color-mix(in srgb,var(--text) 10%,transparent)}
.socials svg{width:24px;height:24px}
.links{list-style:none;padding:0;width:100%;display:flex;flex-direction:column;gap:14px}
.link{display:block;text-align:center;padding:17px 22px;border-radius:var(--radius);text-decoration:none;font-weight:600;font-size:1rem;line-height:1.3;
  background:var(--btn-bg);color:var(--btn-text);transition:transform .15s,box-shadow .15s,filter .15s;overflow-wrap:anywhere}
.link.has-img{position:relative;display:flex;align-items:center;min-height:62px;padding:9px 62px}
.link.has-img span{flex:1}
.limg{position:absolute;left:9px;top:50%;transform:translateY(-50%);width:44px;height:44px;object-fit:cover;
  border-radius:calc(var(--radius) * .6)}
.link:hover{transform:translateY(-2px) scale(1.01)}
.link:active{transform:scale(.99)}
.btn-rahmen .link{background:transparent;border:2px solid var(--btn-bg);color:var(--text);padding:15px 20px}
.btn-rahmen .link.has-img{padding:7px 60px}
.btn-rahmen .link:hover{background:color-mix(in srgb,var(--btn-bg) 14%,transparent)}
.btn-voll .link:hover{filter:brightness(1.06)}
/* Eingebettete Videos: Platzhalter-Trick statt aspect-ratio, damit es auch auf alten iPhones passt */
.video{position:relative;width:100%;padding-top:56.25%;border-radius:min(var(--radius),18px);overflow:hidden;background:#111}
.video.vertical{max-width:300px;margin:0 auto;padding-top:min(177.78%,533px)}
.video iframe,.video .play{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.video .play{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;cursor:pointer;font:inherit;
  color:#fff;background:linear-gradient(160deg,color-mix(in srgb,var(--btn-bg) 55%,#111),#111)}
.video .play svg{width:58px;height:58px;fill:#fff}
.video .play svg circle{fill:rgba(0,0,0,.35);stroke:#fff;stroke-width:1.2}
.video .play b{font-size:1rem;line-height:1.3}
.video .play small{font-size:.72rem;opacity:.75;max-width:300px;line-height:1.35}
.video .play:hover svg circle{fill:rgba(0,0,0,.55)}
.extras{display:grid;grid-template-columns:1fr;gap:8px;width:calc(100% - 28px);margin:-4px auto 0}
.extras.two{grid-template-columns:1fr 1fr}
.xbox{display:grid;grid-template-rows:auto auto auto;justify-items:center;align-content:start;gap:6px;min-width:0;
  padding:8px 10px 10px;border:2px dashed color-mix(in srgb,var(--text) 55%,transparent);border-top:0;border-radius:0 0 12px 12px;
  background:color-mix(in srgb,var(--text) 6%,transparent);color:var(--text);font:inherit;cursor:pointer;text-decoration:none;text-align:center}
.xbox:hover{background:color-mix(in srgb,var(--text) 12%,transparent)}
/* Beide Kästen gleich gebaut: Titel – Etikett – Hinweis, jede Zeile gleich hoch, damit sie nebeneinander fluchten. */
.xbox .ctitle{font-size:.95rem;font-weight:700;line-height:1.3;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xbox .code{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 14px;max-width:100%;
  border-radius:8px;background:var(--btn-bg);color:var(--btn-text);box-shadow:0 1px 4px rgba(0,0,0,.15);
  font-size:1rem;font-weight:700;line-height:1;white-space:nowrap;overflow:hidden}
.coupon .code{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.1em}
.xvideo .code svg{width:14px;height:14px;fill:currentColor;flex:none}
.xbox .copy{font-size:.78rem;line-height:1.2;opacity:.75}
.coupon .copy{text-decoration:underline}
.links+.cat,.cat+.cat{margin-top:26px}
.cat{width:100%}
.cat-empty{text-align:center;opacity:.65;font-size:.9rem;padding:4px 0 6px}
.cat summary{list-style:none;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;user-select:none;
  font-weight:700;font-size:1.05rem;padding:13px 22px;margin-bottom:12px;color:var(--text);
  border:2px solid var(--cat-bg);border-radius:var(--cat-radius);transition:background .15s}
.cat summary:hover{background:color-mix(in srgb,var(--text) 8%,transparent)}
.cat-voll .cat summary{background:var(--cat-bg);color:var(--cat-text)}
.cat-voll .cat summary:hover{background:var(--cat-bg);filter:brightness(1.06)}
.cat summary:focus{outline:none}
.cat summary:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.cat summary::-webkit-details-marker{display:none}
.cat summary svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s;opacity:.7}
.cat:not([open]) summary svg{transform:rotate(-90deg)}
.cat:not([open]) summary{margin-bottom:0}
.empty{text-align:center;opacity:.6;padding:24px;border:2px dashed currentColor;border-radius:var(--radius)}
.legal{width:100%;background:rgba(255,255,255,.94);color:#16161a;border-radius:16px;padding:28px 24px;line-height:1.55}
.legal h1{margin-bottom:14px}
.legal-text{white-space:pre-line;overflow-wrap:anywhere}
.pfoot{margin-top:auto;padding-top:48px;font-size:.8rem;opacity:.65}
.pfoot a{color:inherit}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}