:root{
  --bg:#050609;
  --ink:rgba(246,247,242,.93);
  --muted:rgba(246,247,242,.34);
  --hair:rgba(246,247,242,.105);
  --gold:rgba(196,166,111,.72);
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--font-interface);-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
body{
  background:
    radial-gradient(900px 650px at 50% 42%, rgba(255,255,255,.082), transparent 61%),
    radial-gradient(620px 420px at 67% 56%, rgba(196,166,111,.042), transparent 72%),
    radial-gradient(420px 300px at 32% 46%, rgba(185,126,255,.065), transparent 72%),
    linear-gradient(180deg,#08090d 0%,#050609 58%,#030406 100%);
}
.stage{position:fixed;inset:0;overflow:hidden;isolation:isolate}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab;z-index:1}
#scene.is-dragging{cursor:grabbing}
.brand{position:fixed;z-index:4;left:50%;top:clamp(26px,5.4vh,62px);transform:translateX(-50%);width:min(38vw,360px);height:auto;pointer-events:none;opacity:.92;filter:drop-shadow(0 0 28px rgba(255,255,255,.035));animation:brandIn 2.2s cubic-bezier(.16,1,.3,1) both .22s}
.brand-logo{display:block;width:100%;height:auto;object-fit:contain;user-select:none}
.frame{position:fixed;z-index:3;inset:clamp(18px,4.2vw,54px);pointer-events:none;border:1px solid rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(255,255,255,.018);opacity:.72}
.frame:before,.frame:after{content:"";position:absolute;left:50%;transform:translateX(-50%);width:min(54vw,640px);height:1px;background:linear-gradient(90deg,transparent,var(--hair),transparent)}
.frame:before{top:-1px}.frame:after{bottom:-1px}
.grain{position:fixed;z-index:2;inset:-40px;pointer-events:none;opacity:.11;mix-blend-mode:screen;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 170 170' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");background-size:180px 180px;animation:grainMove 10s steps(10) infinite}
.imprint{position:fixed;z-index:5;right:clamp(18px,4.2vw,54px);bottom:clamp(13px,2.7vh,26px);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.18);text-decoration:none;transition:color .18s ease, opacity .18s ease;opacity:.55}
.imprint:hover{color:rgba(255,255,255,.66);opacity:1}
@keyframes brandIn{from{opacity:0;transform:translateX(-50%) translateY(-6px);filter:blur(8px)}to{opacity:.92;transform:translateX(-50%) translateY(0);filter:blur(0) drop-shadow(0 0 28px rgba(255,255,255,.035))}}
@keyframes grainMove{0%{transform:translate3d(0,0,0)}20%{transform:translate3d(-20px,10px,0)}40%{transform:translate3d(15px,-20px,0)}60%{transform:translate3d(-10px,-8px,0)}80%{transform:translate3d(20px,12px,0)}100%{transform:translate3d(0,0,0)}}
@media(max-width:760px){.brand{width:min(58vw,280px);top:34px}.frame{inset:18px}.imprint{font-size:9px;right:18px;bottom:12px}}
@media(prefers-reduced-motion:reduce){.grain,.brand{animation:none}}


/* v2 tuning: larger cube, calmer premium motion, mini Matilde link */
:root{
  --ferner-cube-scale: 1.28;
  --ferner-bronze: #b88754;
}

canvas,
.cube-stage,
.cube-wrap,
#cube,
#scene,
#webgl,
canvas.webgl{
  transform-origin: center center;
}

.ferner-stage,
.stage,
.hero,
.scene,
.cube-stage{
  overflow: visible;
}

.matilde-mini-link{
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 42;
  color: rgba(255,255,255,.46);
  text-decoration: none;
  font: 500 10px/1.1 var(--font-interface);
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .78;
  transition: opacity .22s ease, color .22s ease, transform .22s ease;
}
.matilde-mini-link sup{
  color: var(--ferner-bronze);
  font-size: .58em;
  letter-spacing: .12em;
  top: -.55em;
  position: relative;
  margin-left: .22em;
}
.matilde-mini-link:hover{
  opacity: 1;
  color: rgba(255,255,255,.78);
  transform: translateY(-1px);
}

@media (max-width: 700px){
  .matilde-mini-link{
    left: 14px;
    bottom: 14px;
    font-size: 9px;
  }
}


/* v4 refinements: transparent logo, stronger Matilde link, cube may overlap logo */
#scene{z-index:6}
.brand{z-index:3;width:min(32vw,300px);top:clamp(18px,4.1vh,44px);mix-blend-mode:screen;opacity:.96}
.brand-logo{background:transparent !important;filter:drop-shadow(0 0 12px rgba(255,255,255,.06));}
.frame{z-index:2}
.grain{z-index:1}
/* Impressum moved to bottom-LEFT: keep the bottom-right corner free for the
   phone/voice widget and the upcoming text-chat launcher (was colliding). */
.imprint{z-index:8;left:clamp(16px,4.2vw,54px);right:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 10px)}
.matilde-mini-link{
  z-index:9;
  left:16px;
  bottom:calc(env(safe-area-inset-bottom,0px) + 58px);
  color:rgba(255,255,255,.72);
  opacity:.95;
  text-shadow:0 0 12px rgba(0,0,0,.48);
}
.matilde-mini-link sup{color:#b88754;font-size:.62em;top:-.6em}
@media(max-width:760px){
  .brand{width:min(44vw,220px);top:20px}
  .matilde-mini-link{left:14px;bottom:calc(env(safe-area-inset-bottom,0px) + 74px);font-size:10px}
  .imprint{left:14px;right:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 12px)}
}


/* v5 lower grounding */
body::after{
  content:"";
  position:fixed;
  left:0; right:0; bottom:0;
  height:28vh;
  pointer-events:none;
  z-index:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 52%, rgba(0,0,0,.34) 100%);
}


/* v10 typography: premium native stack, no external font files */
:root{
  --font-display: ui-serif, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --font-interface: "Avenir Next", Avenir, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
html,body{
  font-family:var(--font-interface);
}
.brand,
.imprint,
.matilde-mini-link{
  font-family:var(--font-interface);
}



/* === HF V17 CLEAN CLAIM ONLY — no modal, no overlay, no experimental cube === */
.hf-clean-claim{
  position:fixed;
  z-index:42;
  top:96px;
  left:50%;
  transform:translateX(-50%);
  width:min(300px,30vw);
  pointer-events:none;
  text-align:left;
  font-family:"Avenir Next",Avenir,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  color:rgba(246,240,234,.62);
}
.hf-clean-claim span{
  display:block;
  font-size:10px;
  line-height:1.25;
  letter-spacing:.065em;
  font-weight:500;
  color:rgba(246,240,234,.66);
}
.hf-clean-claim small{
  display:block;
  margin-top:7px;
  font-size:8px;
  line-height:1.28;
  letter-spacing:.045em;
  color:rgba(246,240,234,.33);
}
@media(max-width:900px){
  .hf-clean-claim{
    top:82px;
    width:min(270px,64vw);
    text-align:center;
  }
}


/* === Glass canvas: visibility + final colour grade ===
   Consolidated from the old stacked V21–V31 #scene{filter} overrides (only the
   last one ever applied). Light grade lets the new envMap glass read naturally. */
#scene{
  opacity:1 !important;
  filter:saturate(1.12) contrast(1.06) brightness(1.04);
}
.brand-logo{background:transparent !important;filter:drop-shadow(0 16px 48px rgba(0,0,0,.30)) !important;}


/* v44 cross-system desktop layout stabilization */
@media (min-width: 980px){
  .brand{width:min(30vw,320px);top:clamp(24px,4.2vh,46px);}
  .hf-clean-claim{top:90px;width:min(330px,24vw);}
  .hf-clean-claim span{font-size:11px;line-height:1.22;}
  .hf-clean-claim small{font-size:8px;line-height:1.26;}
}
@media (min-width: 1180px) and (max-height: 860px){
  .brand{top:22px;width:min(26vw,300px);}
  .hf-clean-claim{top:78px;width:min(320px,24vw);}
}

/* === FIX: Claim aus dem zentrierten Logo lösen → ruhig nach oben-links === */
.hf-clean-claim{
  top: clamp(96px, 15vh, 152px) !important;
  left: clamp(22px, 5vw, 60px) !important;
  transform: none !important;
  width: min(300px, 40vw) !important;
  text-align: left !important;
}
@media (max-width: 760px){
  .hf-clean-claim{
    top: clamp(84px, 13vh, 118px) !important;
    left: 16px !important;
    width: min(72vw, 300px) !important;
    text-align: left !important;
  }
}