/* Startseite: Kopfbereich als Messinstrument, Abschnittstitel, Schiene, Fußzeile. */

/* ---------- Kopfbereich ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3.4vh, 36px);
  padding: clamp(28px, 6vh, 64px) 16px clamp(84px, 13vh, 130px);
  text-align: center;
}

.stage {
  position: relative;
  width: clamp(230px, min(72vw, 46vh), 520px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transition: transform .35s ease-out;
}
.stage::before {
  content: '';
  position: absolute; inset: -22%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 181, 71, .1), rgba(79, 209, 181, .05) 52%, transparent 74%);
  animation: fadein calc(1.6s * var(--k)) ease calc(.2s * var(--k)) backwards;
}

.rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.spin { transform-box: view-box; transform-origin: 100px 100px; }
.s1 { animation: spin 240s linear infinite; }
.s2 { animation: spin 180s linear infinite reverse; }
.s3 { animation: spin 120s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.draw { stroke-dasharray: 1; }
.d1 { animation: draw calc(1.3s * var(--k)) cubic-bezier(.6, .05, .25, 1) calc(.05s * var(--k)) backwards; }
.d3 { animation: draw calc(1.3s * var(--k)) cubic-bezier(.6, .05, .25, 1) calc(.3s * var(--k)) backwards; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.ticks { animation: fadein calc(.9s * var(--k)) ease calc(.35s * var(--k)) backwards; }
.dots { animation: fadein calc(1s * var(--k)) ease calc(.6s * var(--k)) backwards; }
.cross { animation: fadein calc(1s * var(--k)) ease calc(.5s * var(--k)) backwards; opacity: .3; }
@keyframes fadein { from { opacity: 0; } }

/* Logo */
.logo { position: relative; width: 60%; height: auto; display: block; overflow: visible; }
.lg { transform-box: view-box; transform-origin: 700px 611px; }
.lg-a { animation: swirl calc(1.2s * var(--k)) cubic-bezier(.16, .84, .3, 1) calc(.4s * var(--k)) backwards; }
.lg-b { animation: swirl calc(1.2s * var(--k)) cubic-bezier(.16, .84, .3, 1) calc(.54s * var(--k)) backwards; }
@keyframes swirl { from { opacity: 0; transform: rotate(-270deg) scale(.86); } }
.lg-s { filter: drop-shadow(0 0 22px rgba(255, 181, 71, .22)); animation: sfill calc(.95s * var(--k)) cubic-bezier(.5, 0, .2, 1) calc(1.15s * var(--k)) backwards; }
@keyframes sfill { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
.sheen-bar { animation: sheen calc(1.3s * var(--k)) ease-in-out calc(2.1s * var(--k)) backwards; }
@keyframes sheen { from { transform: translateX(0); } to { transform: translateX(2300px); } }

.logo-custom { width: 58%; aspect-ratio: 1; display: grid; place-items: center; animation: fadein calc(1.1s * var(--k)) ease calc(.6s * var(--k)) backwards; }
.logo-custom img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-custom[data-color='brass'] {
  background: var(--brass-grad);
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
}

/* Schriftzug */
.wordmark { margin: 0; width: min(88vw, 820px); line-height: 0; }
.wm { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 14px rgba(255, 181, 71, .12)); }
.wl, .wg { stroke-dasharray: 1; }
.wl { animation: stroke-in calc(.8s * var(--k)) cubic-bezier(.55, .05, .2, 1) calc((.85s + var(--i) * .08s) * var(--k)) backwards; }
.wg {
  opacity: 0;
  animation:
    stroke-in calc(.8s * var(--k)) cubic-bezier(.55, .05, .2, 1) calc((.85s + var(--i) * .08s) * var(--k)) backwards,
    cool calc(.8s * var(--k)) ease-out calc((1.65s + var(--i) * .08s) * var(--k)) backwards;
}
@keyframes stroke-in { 0% { stroke-dashoffset: 1; opacity: 0; } 1% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes cool { from { opacity: 1; } to { opacity: 0; } }
.wdot {
  transform-box: fill-box; transform-origin: center;
  filter: drop-shadow(0 0 6px rgba(255, 181, 71, .8));
  animation: pop calc(.55s * var(--k)) cubic-bezier(.3, 1.6, .5, 1) calc((.85s + var(--i) * .08s) * var(--k)) backwards;
}
@keyframes pop { from { opacity: 0; transform: scale(0); } }

.subtitle {
  margin: 0;
  max-width: min(92vw, 52ch);
  text-wrap: balance;
  text-align: center;
  font-size: clamp(12px, 2.4vw, 16px);
  letter-spacing: clamp(.18em, 1.6vw, .34em);
  text-transform: uppercase;
  color: var(--tin);
  animation: rise calc(.9s * var(--k)) ease calc(2.15s * var(--k)) backwards;
}
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

.scroll-hint {
  position: absolute; left: 50%; bottom: clamp(20px, 5vh, 44px);
  width: 44px; height: 44px; margin-left: -22px;
  display: grid; place-items: center; color: var(--brass);
  border: 1px solid rgba(201, 161, 90, .35); border-radius: 50%;
  animation: rise calc(.9s * var(--k)) ease calc(2.4s * var(--k)) backwards;
  transition: opacity .4s, border-color .3s;
}
.scroll-hint svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; animation: bob 2.6s ease-in-out infinite; }
.scroll-hint:hover { border-color: var(--brass); }
.scroll-hint.gone { opacity: 0; pointer-events: none; }
@keyframes bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }

/* ---------- Apps ---------- */
.apps { max-width: 960px; margin: 0 auto; padding: clamp(36px, 7vh, 80px) 16px clamp(56px, 10vh, 110px); overflow-x: clip; }
.section-head { display: flex; align-items: center; gap: 16px; max-width: 880px; margin: 0 auto 30px; }
.section-head h2 {
  margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(12px, 2vw, 14px);
  letter-spacing: .34em; text-transform: uppercase; color: var(--brass);
}
.hair { flex: 1; height: 1px; background: linear-gradient(90deg, var(--brass-lo), rgba(201, 161, 90, .12)); }
.count { font-family: var(--f-mono); font-size: 14px; color: var(--amber); text-shadow: 0 0 8px rgba(255, 181, 71, .45); }
.empty { text-align: center; color: var(--tin); margin: 40px 0; }

/* ---------- Messschiene ---------- */
.rail { display: none; }
@media (min-width: 1100px) {
  .rail {
    display: block; position: fixed; left: 34px; top: 12vh; bottom: 12vh; width: 14px; z-index: 5; pointer-events: none;
    background:
      linear-gradient(rgba(138, 106, 50, .9), rgba(138, 106, 50, .9)) 6px 0 / 1px 100% no-repeat,
      repeating-linear-gradient(180deg, rgba(201, 161, 90, .4) 0 1px, transparent 1px 24px) 0 0 / 6px 100% no-repeat;
    animation: fadein calc(1.2s * var(--k)) ease calc(2.4s * var(--k)) backwards;
  }
  .rail-mark {
    position: absolute; left: -3px; top: 0; width: 22px; height: 2px; background: var(--amber);
    box-shadow: 0 0 10px var(--amber);
    transform: translateY(calc(var(--p, 0) * 1px));
  }
}

/* ---------- Fußzeile ---------- */
.foot { border-top: 1px solid rgba(201, 161, 90, .16); padding: 28px 20px calc(28px + env(safe-area-inset-bottom)); color: var(--tin); font-size: 14px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .25)); }
.foot-in { max-width: 880px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; align-items: center; }
.copy { margin: 0; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot a { color: var(--tin); text-decoration: none; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.foot a:hover { color: var(--brass); border-bottom-color: rgba(201, 161, 90, .5); }

@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: 0; padding-bottom: 96px; }
  .stage { width: clamp(180px, 44vh, 300px); }
}