/* Pferdestand-Test im Browser (DE /pferdestand, EN /en/horse-stance). Baut auf site.css auf: gleiche Farben, Schriften, Pillen, Kamerarahmen (.cam) und Messleiste (.lbar). */
.mb-page .top { background:rgba(11,11,13,.72); backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3); border-bottom-color:var(--line); }
.mb-main { padding-top:104px; padding-bottom:96px; min-height:70vh; }
.mb-view[hidden] { display:none !important; }
.mb-view:focus { outline:none; }
.sr { position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* 1 Intro */
.mb-intro { display:grid; gap:48px; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); align-items:start; }
.mb-intro h1 { font-size:clamp(36px, 4.6vw, 56px); max-width:16ch; }
.mb-intro .stack { gap:20px; }
.mb-side { display:flex; flex-direction:column; gap:28px; }
.mb-art { position:relative; margin:0; border-radius:16px; overflow:hidden; border:1px solid var(--line); box-shadow:0 40px 100px rgba(0,0,0,.55); }
.mb-art img, .mb-art video { width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:cover; background:#000; }
.mb-art figcaption { position:absolute; left:14px; bottom:14px; }
.mb-tips { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; color:var(--text2); }
.mb-tips li { position:relative; padding-left:30px; }
.mb-tips li::before { content:""; position:absolute; left:0; top:.45em; width:16px; height:16px; border-radius:5px; background:var(--seal); transform:rotate(-7deg); box-shadow:inset 0 0 0 2px rgba(242,238,232,.2); }
.mb-tips b { color:var(--paper); }
.mb-privacy { display:flex; gap:14px; align-items:flex-start; padding:16px 18px; border-radius:16px; background:var(--card); border:1px solid var(--line); }
.mb-privacy svg { flex:none; width:26px; height:26px; margin-top:2px; fill:none; stroke:var(--paper); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.mb-privacy p { margin:0; font-size:15px; color:var(--text2); }
.mb-privacy b { color:var(--paper); }
.mb-actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.mb-btn { font-family:inherit; border:0; cursor:pointer; }
.pill-glass.mb-btn { border:1px solid var(--line); }
.mb-btn[disabled] { opacity:.6; cursor:default; transform:none; }
.mb-facts .fact p { font-size:14px; }

/* 2 Kamera */
.mb-live { display:flex; flex-direction:column; align-items:center; gap:16px; max-width:960px; margin:0 auto; }
.mb-head { width:100%; display:flex; justify-content:space-between; align-items:flex-end; gap:12px; }
.mb-head h1 { font-size:clamp(24px, 3.4vw, 34px); }
.mb-head small { display:block; color:var(--text2); font-size:14px; margin-top:4px; }
.cam.mb-stage { --ar:16/9; aspect-ratio:var(--ar); width:min(100%, calc((100svh - 330px) * (var(--ar)))); min-width:min(100%, 280px); background:radial-gradient(80% 70% at 50% 40%, #2A2A30, #121214); border:1px solid var(--line); border-radius:16px; }
.mb-stage video, .mb-stage canvas { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transform:scaleX(-1); }
.mb-stage video { background:#000; }
.cam.mb-stage::before, .cam.mb-stage::after { z-index:2; }
.cam .hint.mb-hint { z-index:3; white-space:normal; width:max-content; max-width:calc(100% - 28px); top:12px; font-size:15px; line-height:1.35; padding:8px 16px 8px 8px; }
.cam .hint.mb-hint span { flex:none; background:var(--amber); color:var(--ink); font-weight:900; }
.cam .hint.mb-hint.ok span { background:var(--jade); color:var(--ground); }
.mb-dock { width:100%; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:16px 24px; }
.mb-timer { text-align:left; min-width:3.6em; }
.mb-timer b { display:block; font-family:var(--display); font-weight:900; font-size:clamp(64px, 17vw, 92px); line-height:1; font-variant-numeric:tabular-nums; color:var(--paper); transition:color .3s; }
.mb-timer b.on { color:var(--jade); }
.mb-timer.idle b { color:rgba(242,238,232,.28); }
.mb-timer small { display:block; margin-top:6px; color:var(--text2); font-size:14px; font-weight:700; }
.mb-overlay { position:absolute; inset:0; z-index:4; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:24px; text-align:center; background:rgba(11,11,13,.62); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.mb-overlay.light { background:radial-gradient(closest-side, rgba(11,11,13,.55), rgba(11,11,13,.15)); backdrop-filter:none; -webkit-backdrop-filter:none; }
.mb-overlay.light p { text-shadow:0 2px 12px rgba(0,0,0,.8); }
.mb-overlay[hidden] { display:none; }
.mb-overlay p { margin:0; font-weight:700; font-size:17px; max-width:22em; }
.mb-overlay small { color:var(--text2); font-size:14px; max-width:26em; }
.mb-count { font-family:var(--display); font-weight:900; font-size:clamp(110px, 26vw, 200px); line-height:1; color:var(--paper); text-shadow:0 0 50px rgba(255,92,120,.45); }
.mb-spin { width:44px; height:44px; border-radius:50%; border:4px solid rgba(255,92,120,.25); border-top-color:var(--amber); }
.mb-bar { width:100%; grid-template-columns:repeat(3, minmax(0,1fr)); }
.mb-bar b { font-size:clamp(22px, 4vw, 30px); color:var(--paper); }
.mb-bar b.ok { color:var(--jade); } .mb-bar b.no { color:var(--amber-text); }
.mb-bar > div { background:var(--card); border:1px solid var(--line); }

/* 3 Ergebnis und Fehler */
.mb-result { max-width:620px; margin:0 auto; display:flex; flex-direction:column; align-items:center; text-align:center; gap:22px; }
.mb-card { position:relative; overflow:hidden; width:100%; border-radius:16px; padding:34px 24px 30px; background:radial-gradient(70% 60% at 50% 0%, rgba(255,92,120,.16), transparent 70%), var(--card); border:1px solid var(--line); display:flex; flex-direction:column; align-items:center; gap:10px; }
.mb-card .week { font-size:18px; }
.mb-big { font-family:var(--display); font-weight:900; font-size:clamp(84px, 22vw, 150px); line-height:1; font-variant-numeric:tabular-nums; }
.mb-level { display:inline-flex; align-items:center; gap:12px; margin-top:8px; }
.mb-level .seal { width:46px; height:46px; font-size:15px; }
.mb-level b { font-family:var(--display); font-weight:900; font-size:30px; }
.mb-quote { margin:6px 0 0; color:var(--text2); font-size:17px; max-width:30em; }
.mb-stat { margin:0; color:var(--muted); font-size:14px; }
#r-sub { margin-top:10px; color:var(--text2); font-size:15px; font-weight:700; }
.mb-note { margin:0; color:var(--muted); font-size:14px; min-height:1.4em; }
.mb-app { width:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 18px; padding-top:26px; margin-top:6px; border-top:1px solid var(--line); }
.mb-app p { margin:0; color:var(--text2); font-size:15px; flex-basis:100%; }
.mb-app .storebtn { min-height:54px; }
.mb-app .storebtn > span { font-size:19px; }
.mb-error { max-width:560px; margin:0 auto; display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px; }
.mb-error .mb-card { gap:14px; }
.mb-error h1 { font-size:clamp(28px, 4vw, 40px); }
.mb-error p { margin:0; color:var(--text2); }

@media (prefers-reduced-motion: no-preference) {
  .mb-spin { animation:spin 1s linear infinite; }
  .mb-count { animation:mbpop .9s cubic-bezier(.2,.7,.2,1) both; }
  .mb-view.in { animation:mbin .45s cubic-bezier(.2,.7,.2,1) both; }
}
@keyframes mbpop { from { transform:scale(1.35); opacity:0; } 30% { opacity:1; } to { transform:scale(1); opacity:1; } }
@keyframes mbin { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }

@media (max-width: 860px) {
  .mb-main { padding-top:88px; }
  .mb-intro { grid-template-columns:minmax(0,1fr); gap:28px; }
  .mb-side { display:contents; }
  .mb-art { order:-1; }
  .mb-facts { order:1; }
  .mb-dock { grid-template-columns:minmax(0,1fr); justify-items:center; }
  .mb-timer { text-align:center; }
  .mb-art img { aspect-ratio:4/3; object-fit:cover; object-position:center 30%; }
  .cam.mb-stage { width:min(100%, calc((100svh - 300px) * (var(--ar)))); }
  .mb-head small { font-size:13px; }
}
@media (max-width: 560px) {
  .mb-bar > div { padding:10px; flex-direction:column; align-items:flex-start; gap:2px; }
  .mb-bar small { font-size:11px; }
  .mb-actions .pill { flex:1 1 auto; }
}
.mb-hint em { font-style:normal; }

/* Shifu als Vorlage während der Messung (klein unten rechts, nicht gespiegelt) */
.mb-shifu { position:absolute; right:12px; bottom:12px; z-index:3; width:clamp(110px, 28%, 260px); border-radius:12px; overflow:hidden; border:1px solid rgba(242,238,232,.35); box-shadow:0 12px 30px rgba(0,0,0,.5); background:#000; }
.mb-stage .mb-shifu video { position:static; display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; transform:none; background:#000; }
.mb-shifu span { position:absolute; left:8px; top:6px; font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--paper); background:rgba(11,11,13,.6); padding:2px 8px; border-radius:999px; }

/* Neues Design (wie Startseite): Neon-Schriftzug als Logo, Kopfzeile in Großbuchstaben, Umriss-Pille */
.brand.logo img { width:auto; height:34px; border-radius:0; }
.foot .brand.logo img { height:40px; }
.topnav a { font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.pill-line { border:1.5px solid currentColor; color:var(--paper); min-height:0; padding:9px 16px; border-radius:999px; }
.pill-line:hover { color:var(--paper); border-color:#FF5C78; }
.top nav .pill-line, .top nav .pill-line:hover { color:var(--paper); min-height:0; padding:9px 16px; font-size:13px; }

/* Logo so groß wie auf der Startseite (site.css setzt .brand img sonst auf 38 × 38) */
.mb-page .top .brand img { width:auto; height:34px; border-radius:0; }
.mb-page .footin .brand img { width:auto; height:44px; border-radius:0; }