:root{
  --bg:#070707;
  --text:#f8f5ef;
  --orange:#ff5b17;
  --muted:#aaa39a;
  --line:rgba(255,255,255,.10);
  --font-sans:Inter,Helvetica Neue,Arial,sans-serif;
  --font-display:Arial Black,Arial,Helvetica,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:var(--font-sans)}
body{min-height:100vh;min-height:100svh}
a{color:inherit}
.stage{
  position:relative;min-height:100vh;min-height:100svh;overflow:hidden;
  padding:0 max(4.2vw,22px);display:flex;flex-direction:column;
}
.visual{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 77% 27%,rgba(255,91,23,.18),transparent 17%),
    linear-gradient(135deg,#16100d,#060606 55%,#101010);
}
.visual:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.37) 52%,rgba(0,0,0,.20) 74%,rgba(0,0,0,.64));
}
.glow{position:absolute;border-radius:50%;filter:blur(45px)}
.g1{width:36vw;height:36vw;right:5vw;top:4vh;background:rgba(255,91,23,.18)}
.g2{width:15vw;height:15vw;right:37vw;bottom:11vh;background:rgba(255,226,194,.10)}
.beam{
  position:absolute;top:-10%;height:120%;width:1px;
  background:linear-gradient(transparent,#ff8b55,transparent);opacity:.4;transform-origin:top;
}
.b1{right:20%;transform:rotate(17deg)}
.b2{right:39%;transform:rotate(-13deg)}
.audience{
  position:absolute;left:38%;right:-8%;bottom:-6%;height:36%;
  background:
    radial-gradient(ellipse at 10% 100%,#040404 0 18%,transparent 19%),
    radial-gradient(ellipse at 29% 100%,#080808 0 23%,transparent 24%),
    radial-gradient(ellipse at 51% 100%,#050505 0 19%,transparent 20%),
    radial-gradient(ellipse at 72% 100%,#090909 0 24%,transparent 25%),
    radial-gradient(ellipse at 91% 100%,#030303 0 20%,transparent 21%);
}
header,main,footer,.experience{position:relative;z-index:2}
header{
  min-height:96px;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top);
}
.logo.wordmark{
  display:inline-flex;
  align-items:baseline;
  width:auto;
  line-height:.9;
  letter-spacing:-.07em;
  font-family:Arial,Helvetica,sans-serif;
  font-weight:700;
  font-size:31px;
  text-decoration:none;
  flex:0 0 auto;
}
.logo.wordmark .sicht{color:#f8f5ef}
.logo.wordmark .art{color:var(--orange)}
.mail-top{background:transparent;cursor:pointer;
  font-size:12px;font-weight:600;color:#d7d1c8;text-decoration:none;
  border:1px solid rgba(255,255,255,.28);padding:11px 15px;border-radius:30px;
}
.mail-top:hover,.mail-top:focus-visible{background:#fff;color:#111;outline:none}
main{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  max-width:980px;padding:60px 0;
}
.eyebrow{font-size:11px;letter-spacing:.18em;color:#aaa49c;font-weight:700}
h1{
  font:900 clamp(68px,9.4vw,145px)/.82 var(--font-display);
  letter-spacing:-.075em;margin:20px 0 35px
}
h1 em{font-style:normal;color:var(--orange)}
.intro{max-width:690px;font-size:clamp(17px,1.5vw,22px);line-height:1.6;color:#d3cdc4}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px}
.tags span{
  font-size:10px;letter-spacing:.11em;border:1px solid rgba(255,255,255,.18);
  border-radius:25px;padding:8px 11px;color:#9d978f
}
.contact{display:flex;align-items:center;gap:22px;margin-top:42px}
.contact p{font-size:14px;color:#aaa39a}
.contact a{
  background:var(--orange);color:white;text-decoration:none;font-size:12px;font-weight:700;
  padding:14px 18px;border-radius:30px;white-space:nowrap
}
.contact a:hover,.contact a:focus-visible{background:#fff;color:#111;outline:none}
.experience{
  position:absolute;right:3.7vw;top:50%;display:flex;align-items:center;gap:10px;
  transform:rotate(90deg) translateX(50%);transform-origin:right center
}
.experience strong{font:900 42px/1 var(--font-display);color:var(--orange);letter-spacing:-.06em}
.experience span{font-size:10px;letter-spacing:.11em;text-transform:uppercase}
footer{
  min-height:92px;border-top:1px solid var(--line);display:flex;align-items:center;
  justify-content:space-between;font-size:12px;color:#9a948c;padding-bottom:env(safe-area-inset-bottom)
}
.footer-company{display:flex;flex-direction:column;gap:5px}
footer strong{color:#bdb7ae}
.footer-company a{color:#8f8981;text-decoration:none}
.links{display:flex;gap:20px}
.links a{color:#88827a;text-decoration:none}
.links a:hover,.links a:focus-visible,.footer-company a:hover,.footer-company a:focus-visible{color:#fff;outline:none}

/* Tablet */
@media (max-width: 1024px){
  .stage{padding-inline:32px}
  .experience{right:20px}
  .audience{left:27%}
  main{max-width:820px}
}

/* Small tablet / landscape phone */
@media (max-width: 820px){
  .stage{padding-inline:24px}
  .experience{display:none}
  .visual:after{
    background:linear-gradient(0deg,#050505 10%,rgba(0,0,0,.48) 58%,rgba(0,0,0,.32));
  }
  .audience{left:5%;right:-15%;height:31%}
  .g1{width:70vw;height:70vw;right:-5vw}
  .contact{align-items:flex-start;flex-direction:column;gap:12px}
  .contact p{margin:0}
}

/* Smartphone */
@media (max-width: 620px){
  .stage{padding-inline:20px;min-height:100svh}
  header{min-height:78px}
  .logo.wordmark{font-size:26px}
  .mail-top{background:transparent;cursor:pointer;font-size:11px;padding:10px 13px}
  main{padding:46px 0 70px;justify-content:flex-end}
  .eyebrow{font-size:10px}
  h1{font-size:clamp(55px,17vw,75px);margin:16px 0 27px;line-height:.86}
  .intro{font-size:16px;line-height:1.55;max-width:95%}
  .tags{max-width:100%;gap:6px;margin-top:20px}
  .tags span{font-size:9px;padding:7px 9px}
  .contact{margin-top:28px}
  .contact a{font-size:11px;padding:13px 16px}
  .audience{left:-8%;right:-28%;height:27%}
  .beam.b2{display:none}
  footer{padding:18px 0 20px;align-items:flex-start;gap:18px;flex-direction:column}
  .links{padding-bottom:3px}
}

/* Very narrow phones */
@media (max-width: 380px){
  .stage{padding-inline:16px}
  .mail-top{background:transparent;cursor:pointer;padding:8px 10px}
  h1{font-size:52px}
  .intro{font-size:15px}
  .tags span{letter-spacing:.09em}
}

/* Landscape phones with little height */
@media (max-height: 560px) and (orientation: landscape){
  .stage{min-height:680px}
  header{min-height:72px}
  main{padding:42px 0 55px}
  h1{font-size:70px;margin-block:14px 25px}
  .experience{display:none}
}



@media (max-width:620px){
  footer{font-size:12px;line-height:1.5}
  .footer-company{gap:7px}
  .links{gap:24px}
}

.mail-action{font-family:inherit}
.project-mail{
  border:0;
  background:var(--orange);
  color:#fff;
  text-decoration:none;
  font-size:12px;
  font-weight:700;
  padding:14px 18px;
  border-radius:30px;
  white-space:nowrap;
  cursor:pointer;
}
.project-mail:hover,.project-mail:focus-visible{
  background:#fff;color:#111;outline:none;
}
.footer-mail{
  border:0;background:none;padding:0;color:#aaa39a;
  font:inherit;cursor:pointer;text-align:left;
}
.footer-mail:hover,.footer-mail:focus-visible{color:#fff;outline:none}
@media(max-width:620px){
  .logo.wordmark{font-size:26px}
  .project-mail{font-size:12px;padding:13px 16px}
}