/* chivhub – Linkseite im Stil „Studio“ (schwarz-weiß wie das Logo, Scheinwerfer, Staub im Licht).
   Keine fremden Server: Schrift (Archivo, SIL OFL 1.1) und Bilder liegen hier. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/archivo-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/archivo-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 800; font-display: swap; src: url(/assets/fonts/archivo-latin-800-normal.woff2) format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 900; font-display: swap; src: url(/assets/fonts/archivo-latin-900-normal.woff2) format('woff2'); }

:root {
  --bg: #0B0B0C; --card: #161618; --line: #2C2C30; --line2: #242427; --tile: #242427;
  --text: #F5F5F7; --dim: #A1A1A6; --dim2: #B4B4BA; --dim3: #8E8E93; --soft: #C7C7CC;
  --live: #E0144C; --ok: #30D158;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--bg); }
body { margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--bg); color: var(--text); font: 400 16px/1.45 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Bühne oben: Scheinwerfer, Glühen, Staub ---------- */
.hero { position: relative; height: 388px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center;
  padding-block: 0 26px; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.stage { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.stage.full { position: fixed; }
.beam { position: absolute; top: -40px; width: 180px; height: 430px; margin-left: -90px; transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.07) 55%, rgba(255,255,255,0) 88%);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); filter: blur(6px); opacity: .55; }
.b1 { left: 18%; animation: sway 9s ease-in-out infinite; }
.b2 { left: 50%; opacity: .4; animation: sway2 13s ease-in-out infinite; }
.b3 { left: 82%; animation: sway 10s ease-in-out -5s infinite reverse; }
@keyframes sway { 0%, 100% { transform: rotate(-17deg); } 50% { transform: rotate(17deg); } }
@keyframes sway2 { 0%, 100% { transform: rotate(8deg); } 50% { transform: rotate(-8deg); } }
.glow { position: absolute; left: 50%; top: 120px; width: 320px; height: 320px; margin-left: -160px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.17), rgba(255,255,255,0)); animation: breathe 6s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: .65; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
.floor { position: absolute; left: 0; right: 0; bottom: 0; height: 140px; background: linear-gradient(180deg, rgba(11,11,12,0), var(--bg) 80%); }
.dust i { position: absolute; bottom: 80px; width: 2px; height: 2px; border-radius: 50%; background: #fff; opacity: 0; animation: rise 8s linear infinite; }
.dust i:nth-child(1) { left: 13%; animation-delay: -1s; }
.dust i:nth-child(2) { left: 24%; width: 3px; height: 3px; animation-delay: -5s; }
.dust i:nth-child(3) { left: 33%; animation-delay: -2.6s; }
.dust i:nth-child(4) { left: 42%; animation-delay: -6.4s; }
.dust i:nth-child(5) { left: 58%; width: 3px; height: 3px; animation-delay: -3.8s; }
.dust i:nth-child(6) { left: 66%; animation-delay: -.4s; }
.dust i:nth-child(7) { left: 74%; animation-delay: -4.6s; }
.dust i:nth-child(8) { left: 83%; width: 3px; height: 3px; animation-delay: -7.2s; }
.dust i:nth-child(9) { left: 90%; animation-delay: -2s; }
.dust i:nth-child(10) { left: 19%; animation-delay: -3.3s; }
@keyframes rise { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: .8; } 60% { transform: translate(8px, -180px); } 100% { transform: translate(-4px, -300px); opacity: 0; } }

/* ---------- Logo mit LIVE-Ring ---------- */
.avatar { position: relative; width: 120px; height: 120px; border-radius: 50%; background: #fff; margin-bottom: 22px; flex: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 26px 60px rgba(0,0,0,.75), 0 0 90px rgba(255,255,255,.10); }
.avatar img { position: relative; display: block; width: 120px; height: 120px; border-radius: 50%; object-fit: cover; }
.ring, .pulse, .badge { display: none; }
.ring { position: absolute; inset: -8px; border-radius: 50%; background: conic-gradient(#E0144C, #FF6A3D, #E0144C, #B0127A, #E0144C);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px)); animation: turn 2.8s linear infinite; }
@keyframes turn { to { transform: rotate(1turn); } }
.pulse { position: absolute; inset: -8px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(224,20,76,.75); animation: pulse 2.2s cubic-bezier(.2,.6,.3,1) infinite; }
@keyframes pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.34); opacity: 0; } }
.badge { position: absolute; left: 50%; bottom: -11px; transform: translateX(-50%); align-items: center; gap: 5px; padding: 4px 9px 4px 8px;
  border-radius: 7px; border: 2px solid var(--bg); background: var(--live); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .08em; white-space: nowrap; }
html[data-live="1"] .ring, html[data-live="1"] .pulse { display: block; }
html[data-live="1"] .badge { display: inline-flex; }
.eq { display: inline-flex; gap: 2px; align-items: flex-end; height: 9px; }
.eq i { width: 2px; height: 100%; border-radius: 1px; background: currentColor; transform-origin: 50% 100%; animation: eq .9s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -.35s; } .eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes eq { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }

h1 { position: relative; margin: 0; font-size: 32px; line-height: 1.1; font-weight: 900; letter-spacing: -.02em; }
.bio { position: relative; margin: 10px 0 0; font-size: 15px; line-height: 1.45; color: var(--dim2); }

/* ---------- Inhalt ---------- */
.wrap { position: relative; width: 100%; max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px;
  padding-block: 6px 0; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.press { transition: transform .45s var(--spring), filter .25s; touch-action: manipulation; }
.press:hover { transform: translateY(-2px); filter: brightness(1.12); }
.press:active { transform: scale(.97); transition-duration: .08s; }
.press:focus-visible, .btn:focus-visible, .foot a:focus-visible, .back:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.card { display: flex; border-radius: 22px; background: var(--card); border: 1px solid var(--line); }
.sheen { position: relative; overflow: hidden; }
.sheen::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.09) 48%, rgba(255,255,255,.02) 56%, transparent 66%);
  transform: translateX(-130%); animation: sheen 5.5s ease-in-out infinite; }
@keyframes sheen { 0%, 55% { transform: translateX(-130%); } 85%, 100% { transform: translateX(130%); } }

/* Shop-Karte (Zustände kommen aus data-shop / data-live am <html>) */
.shop { flex-direction: column; gap: 14px; padding: 18px; }
.head { display: flex; align-items: center; gap: 14px; }
.tile { display: flex; align-items: center; justify-content: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--tile); color: var(--text); overflow: hidden; }
.tile.big { width: 50px; height: 50px; border-radius: 15px; background: var(--text); color: var(--bg); }
.titles { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.title { font-size: 20px; line-height: 1.15; font-weight: 800; letter-spacing: -.01em; }
.sub { font-size: 13px; color: var(--dim); }
.pill { display: none; align-items: center; gap: 6px; flex: none; padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .06em; white-space: nowrap; }
.p-live { background: var(--live); color: #fff; }
.p-open { background: rgba(48,209,88,.14); color: var(--ok); letter-spacing: .03em; }
.p-zu, .p-off { background: #26262A; color: var(--dim2); font-weight: 700; letter-spacing: .04em; }
.p-wait { background: #1E1E21; color: var(--dim3); padding: 9px 12px; }
.p-wait i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: wait 1.2s ease-in-out infinite; }
.p-wait i:nth-child(2) { animation-delay: .15s; } .p-wait i:nth-child(3) { animation-delay: .3s; }
@keyframes wait { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.blip { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: blip 1.4s ease-in-out infinite; }
@keyframes blip { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.say { display: none; font-size: 15px; line-height: 1.45; color: var(--soft); }
.cta { display: none; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 18px; border-radius: 15px; font-size: 16px; font-weight: 800; }
.c-main { background: var(--text); color: var(--bg); }
.c-ghost { border: 1px solid #3A3A3F; color: var(--text); font-weight: 700; }
html[data-shop="wait"] .p-wait, html[data-shop="open"][data-live="1"] .p-live, html[data-shop="open"][data-live="0"] .p-open,
html[data-shop="closed"][data-live="1"] .p-zu, html[data-shop="closed"][data-live="0"] .p-off, html[data-shop="offline"] .p-off { display: inline-flex; }
html[data-shop="wait"] .s-on, html[data-shop="open"][data-live="1"] .s-on, html[data-shop="open"][data-live="0"] .s-open,
html[data-shop="closed"][data-live="1"] .s-zu, html[data-shop="closed"][data-live="0"] .s-closed, html[data-shop="offline"] .s-off { display: block; }
html[data-shop="wait"] .c-main, html[data-shop="open"] .c-main, html[data-shop="closed"] .c-ghost { display: flex; }

/* Buch-Karte: Cover als echtes Buch (Rücken, Glanz, Schatten) */
.book { align-items: center; gap: 18px; padding: 16px 16px 16px 18px; }
.bk { position: relative; flex: none; width: 92px; height: 126px; perspective: 520px; }
.bk-in { position: absolute; inset: 0; transform: rotateY(-16deg) rotateZ(-1deg); transform-origin: 30% 50%; animation: bookfloat 6.5s ease-in-out infinite; }
.bk-in img { display: block; width: 100%; height: 100%; border-radius: 2px 5px 5px 2px; object-fit: cover;
  box-shadow: 6px 14px 26px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.06); }
.bk-in::before { content: ""; position: absolute; inset: 0; border-radius: 2px 5px 5px 2px; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.5) 0, rgba(255,255,255,.22) 3%, rgba(0,0,0,.28) 6.5%, rgba(0,0,0,0) 13%),
              linear-gradient(115deg, rgba(255,255,255,0) 55%, rgba(255,255,255,.13) 70%, rgba(255,255,255,0) 82%); }
.bk-in::after { content: ""; position: absolute; top: 3px; bottom: 3px; right: -5px; width: 5px; border-radius: 0 2px 2px 0;
  background: repeating-linear-gradient(180deg, #ECE6D6 0 1px, #CFC7B4 1px 2px); transform: skewY(-4deg); }
@keyframes bookfloat { 0%, 100% { transform: rotateY(-16deg) rotateZ(-1deg) translateY(0); } 50% { transform: rotateY(-8deg) rotateZ(1deg) translateY(-4px); } }
.bt { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.over { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.btitle { font-size: 17px; line-height: 1.25; font-weight: 800; }
.bmeta { font-size: 14px; color: var(--dim); }
.more { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 14px; font-weight: 700; }

/* Link-Zeilen */
.label { margin: 14px 4px 0; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dim3); }
.row { align-items: center; gap: 14px; min-height: 64px; padding: 10px 14px; border-radius: 18px; border-color: var(--line2); }
.rt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.rn { font-size: 16px; font-weight: 700; }
.rs { font-size: 13px; color: var(--dim); }
.chev { flex: none; color: #6E6E73; }
/* eigene Logo-Bilder aus /icons (falls vorhanden) – mit kleinem Hüpfer */
.tile.has-logo { background: #1C1C1F; }
.tile .brand { display: block; width: 100%; height: 100%; object-fit: cover; animation: hop 4.8s var(--spring) infinite; animation-delay: var(--d, 0s); }
@keyframes hop { 0%, 70%, 100% { transform: none; } 76% { transform: translateY(-3px) rotate(-6deg) scale(1.06); } 84% { transform: translateY(0) rotate(3deg); } 90% { transform: none; } }

/* ---------- Fuß ---------- */
.foot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  padding-block: 34px 40px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.foot nav { display: flex; gap: 22px; font-size: 14px; }
.foot a { color: var(--dim); }
.foot a:hover { color: var(--text); }
.foot small { font-size: 12px; color: var(--dim3); }

/* ---------- Animierte Symbole ---------- */
.ic { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; flex: none; }
.ic * { transform-box: fill-box; }
.ic .fill { fill: currentColor; stroke: none; }
.ic .thin { stroke-width: 1.2; opacity: .55; }
.s1 { --d: 0s; } .s2 { --d: .7s; } .s3 { --d: 1.4s; } .s4 { --d: 2.1s; } .s5 { --d: 2.8s; } .s6 { --d: 3.5s; }
.lid { transform-origin: 50% 100%; animation: lid 3.4s var(--spring) infinite; animation-delay: var(--d, 0s); }
@keyframes lid { 0%, 60%, 100% { transform: none; } 70% { transform: translateY(-3.4px) rotate(-9deg); } 80% { transform: translateY(-1px) rotate(3deg); } 88% { transform: none; } }
.spark { transform-origin: 50% 50%; opacity: 0; animation: spark 3.4s ease-out infinite; animation-delay: var(--d, 0s); }
@keyframes spark { 0%, 62% { opacity: 0; transform: scale(.6); } 72% { opacity: 1; transform: scale(1); } 92%, 100% { opacity: 0; transform: scale(1.3); } }
.page { transform-origin: 0% 50%; animation: page 4.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes page { 0%, 50% { transform: scaleX(1); opacity: 1; } 70%, 82% { transform: scaleX(-1); opacity: 1; } 88% { transform: scaleX(-1); opacity: 0; } 89% { transform: scaleX(1); opacity: 0; } 100% { transform: scaleX(1); opacity: 1; } }
.spin { transform-origin: 50% 50%; animation: spin 4.2s cubic-bezier(.45,0,.2,1) infinite; animation-delay: var(--d, 0s); }
@keyframes spin { 0%, 66%, 100% { transform: scaleX(1); } 73% { transform: scaleX(.08); } 80% { transform: scaleX(1); } 87% { transform: scaleX(.08); } 94% { transform: scaleX(1); } }
.dot { transform-origin: 50% 50%; opacity: .55; animation: dot 2.8s ease-in-out infinite; animation-delay: var(--d, 0s); }
.dot.b { animation-delay: calc(var(--d, 0s) + .14s); } .dot.c { animation-delay: calc(var(--d, 0s) + .28s); }
@keyframes dot { 0%, 52%, 100% { transform: none; opacity: .55; } 60% { transform: translateY(-1.8px); opacity: 1; } 70% { transform: none; opacity: .55; } }
.beat { transform-origin: 50% 55%; animation: beat 2.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes beat { 0%, 40%, 100% { transform: scale(1); } 48% { transform: scale(1.17); } 56% { transform: scale(1); } 64% { transform: scale(1.1); } 72% { transform: scale(1); } }
.lens { transform-origin: 50% 50%; animation: lens 3.8s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes lens { 0%, 74%, 100% { transform: scale(1); } 80% { transform: scale(.78); } 90% { transform: scale(1); } }
.flash { animation: flash 3.8s ease-out infinite; animation-delay: var(--d, 0s); }
@keyframes flash { 0%, 76%, 100% { opacity: .35; } 80% { opacity: 1; } }
.tri { transform-origin: 50% 50%; animation: tri 3.2s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes tri { 0%, 58%, 100% { transform: none; } 68% { transform: translateX(1.3px) scale(1.14); } 80% { transform: none; } }
.w1 { animation: wave 2.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
.w2 { animation: wave 2.4s ease-in-out infinite; animation-delay: calc(var(--d, 0s) + .3s); }
@keyframes wave { 0%, 100% { opacity: .2; } 40% { opacity: 1; } }

/* ---------- Unterseiten: Shop-Weiterleitung, Impressum, Datenschutz, 404 ---------- */
.center { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh;
  padding-block: 24px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.panel { position: relative; width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.panel .avatar { margin-bottom: 8px; }
.panel h1 { font-size: 26px; }
.panel p { margin: 0; color: var(--soft); font-size: 16px; }
.btns { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 8px; }
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 18px; border-radius: 15px; border: 0; cursor: pointer;
  font: 800 16px var(--font); background: var(--text); color: var(--bg); transition: transform .45s var(--spring); }
.btn:active { transform: scale(.97); transition-duration: .08s; }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid #3A3A3F; font-weight: 700; }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.2); border-top-color: var(--text); animation: turn .8s linear infinite; display: inline-block; vertical-align: -3px; margin-right: 8px; }
.st-check, .st-off { display: none; }
html[data-state="checking"] .st-check, html[data-state="go"] .st-check { display: block; }
html[data-state="offline"] .st-off { display: flex; }
p.st-off { display: none; }
html[data-state="offline"] p.st-off { display: block; }

.doc { position: relative; max-width: 720px; margin: 0 auto;
  padding-block: 28px 10px; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.back { display: inline-flex; align-items: center; gap: 10px; color: var(--dim); font-weight: 700; font-size: 14px; }
.back img { width: 34px; height: 34px; border-radius: 50%; background: #fff; }
.doc h1 { font-size: 30px; margin: 26px 0 6px; }
.doc .stand { color: var(--dim3); font-size: 13px; margin: 0 0 24px; }
.doc h2 { font-size: 17px; font-weight: 800; margin: 28px 0 8px; }
.doc p, .doc li { color: var(--soft); font-size: 15.5px; line-height: 1.6; }
.doc p { margin: 0 0 10px; }
.doc ul { margin: 0 0 10px; padding-left: 20px; }
.doc a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 3px; }
.doc address { font-style: normal; color: var(--soft); line-height: 1.6; margin: 0 0 10px; }
.doc .note { border: 1px solid var(--line); background: var(--card); border-radius: 16px; padding: 14px 16px; }

@media (min-width: 720px) { .hero { height: 420px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }