:root {
  --bg-dark: #0d0f12;
  --off-white: #f4f1ea;
  --gold: #c9a24a;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  background: var(--bg-dark);
  color: var(--off-white);
  font-family: "Work Sans", Arial, sans-serif;
  /* clip, not hidden: hidden would turn body into its own scroll box and break window scroll */
  overflow-x: clip;
}

/* The 3D scene and the final photo share exactly the same frame (the photo's own aspect
   ratio, contained in the viewport). That way the 3D laptop can end its opening at the
   exact spot where the laptop sits in the photo, and the hand-over between the two is
   invisible. */
/* "cover": the scene always fills the whole window (no dark bars top/bottom or left/right);
   whatever doesn't fit is cropped evenly on both sides, the laptop stays centred */
:root {
  --scene-w: max(100%, calc(100vh * 1821 / 864));
}

#intro-canvas-wrap {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--bg-dark);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

#three-frame {
  position: relative;
  flex: none;
  width: var(--scene-w);
  aspect-ratio: 1821 / 864;
}

#intro-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Final AI-composited scene (laptop already baked in) — fades in once the 3D opening
   animation is done. The frame keeps the image's own aspect ratio (no CSS cropping), so
   the percentage-positioned screen overlay always lines up with the laptop screen in the
   photo, at any viewport size. The logo animation plays inside that overlay afterwards. */
#final-scene-wrap {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-dark);
  overflow: hidden;
  opacity: 0;
}

#final-scene-frame {
  position: relative;
  flex: none;
  width: var(--scene-w);
  aspect-ratio: 1821 / 864;
}

/* Desk scene without a laptop (AI plate); the 3D laptop is rendered on top of it.
   Offset/scale measured against the original final-scene.webp the camera was fitted to */
#scene-plate {
  position: absolute;
  z-index: 0;
  left: 0.33%;
  top: 0;
  width: 99.67%;
  height: 100%;
}

/* Sharp skyline, shown once the warp has arrived */
#scene-skyline {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

/* Speed-warp from the desk to the skyline (warp.js), sits over the plate, under the laptop */
#warp-canvas {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

/* The 3D renderer canvas is moved in here after the intro, on top of the plate */
#final-scene-frame > #intro-canvas { z-index: 1; position: absolute; }
#scene-steam { z-index: 3; }
#screen-overlay { z-index: 4; }

#screen-overlay {
  position: absolute;
  left: 31.03%;
  top: 10.76%;
  width: 37.73%;
  height: 46.88%;
}

/* Bounding box of the screen quad. The content is a plain rectangle that script.js maps
   onto the four screen corners with a matrix3d homography, so logo + wordmark share the
   screen's tilt and perspective instead of standing upright */
#screen-content {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  --panel: 0;
  /* Backlit panel: black level is never pure black, slightly lifted in the middle,
     darker toward the edges, with a faint cool tint like a real LCD/OLED at rest */
  background:
    radial-gradient(ellipse 75% 85% at 50% 42%, rgba(70, 84, 110, calc(0.16 * var(--panel))) 0%, rgba(0, 0, 0, 0) 70%),
    #030304;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: 0 0;
  border-radius: 6px 6px 3px 3px;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.85), inset 0 0 3px rgba(255, 255, 255, 0.05);
}

/* Fine pixel grid: subpixel-like vertical stripes plus horizontal scanline structure */
#screen-content::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255, 60, 60, 0.035) 0 1px, rgba(60, 255, 90, 0.03) 1px 2px, rgba(70, 90, 255, 0.035) 2px 3px),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0 1px, rgba(0, 0, 0, 0) 1px 3px);
  mix-blend-mode: overlay;
  opacity: 0.45;
}

/* Glass: soft diagonal window reflection, brighter top edge, warm spill from the lamp side */
#screen-content::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, 0.075) 34%, rgba(255, 255, 255, 0.02) 46%, rgba(255, 255, 255, 0) 50%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 12%),
    radial-gradient(ellipse 60% 70% at 0% 0%, rgba(255, 170, 90, 0.09), rgba(255, 170, 90, 0) 70%),
    radial-gradient(ellipse 50% 60% at 100% 100%, rgba(255, 140, 80, 0.05), rgba(255, 140, 80, 0) 70%);
}

/* Light of the logo blooming onto the panel */
#ov-glow {
  position: absolute;
  left: 50%;
  top: 30%;
  width: 70%;
  height: 60%;
  transform: translate(-50%, -30%);
  background: radial-gradient(ellipse at center, rgba(201, 162, 74, 0.22) 0%, rgba(201, 162, 74, 0.07) 40%, rgba(201, 162, 74, 0) 70%);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}

#ov-icon, #ov-word-top, #ov-word-bottom { position: relative; z-index: 2; }

#ov-icon {
  width: 26%;
  margin-top: 19%;
  opacity: 0;
  transform: scale(0.85);
  filter: drop-shadow(0 0 14px rgba(201, 162, 74, 0.55));
}

#ov-word-top,
#ov-word-bottom {
  width: 35%;
  background-image: url("assets/logo-wordmark.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
}

#ov-word-top {
  margin-top: 6%;
  aspect-ratio: 2000 / 380;
  background-position: 0 0;
  clip-path: inset(0 100% 0 0);
}

#ov-word-bottom {
  aspect-ratio: 2000 / 158;
  background-position: 0 100%;
  clip-path: inset(0 100% 0 0);
}

/* Subtle photographic vignette + grain, purely cosmetic on top of the WebGL render */
#intro-canvas-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.35) 100%);
}

#site-content {
  min-height: 100vh;
}
#close-scroll { height: 150vh; }
html.intro-lock, html.intro-lock body { overflow: hidden; }

/* ---------- Desktop on the laptop screen (looks like a real Windows desktop) ---------- */
#screen-content { container-type: size; }

#desktop {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  font-family: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: #fff;
  background: #1a1030;
}
#desktop.is-live { pointer-events: auto; }

/* Taskbar */
#dt-bar {
  position: absolute;
  left: 8cqw; right: 8cqw; bottom: 1.4cqw;
  height: 5cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1cqw;
  padding: 0 1.4cqw;
  border-radius: 2cqw;
  background: rgba(16, 28, 78, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 0.8cqw 2.4cqw rgba(0, 10, 60, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(16px) saturate(1.4);
}
.tb-start {
  width: 3.4cqw; height: 3.4cqw;
  display: grid; grid-template: 1fr 1fr / 1fr 1fr; gap: 0.25cqw;
  padding: 0.55cqw;
  border-radius: 0.7cqw;
}
.tb-start i { display: block; background: #ffc766; border-radius: 0.15cqw; }
.tb-search {
  width: 14cqw; height: 3.2cqw;
  display: flex; align-items: center; padding-left: 1.4cqw;
  border-radius: 10cqw;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 1.5cqw; color: rgba(255, 255, 255, 0.7);
}
.tb-app {
  all: unset;
  position: relative;
  box-sizing: border-box;
  width: 3.8cqw; height: 3.8cqw;
  display: grid; place-items: center;
  border-radius: 0.8cqw;
  cursor: pointer;
  transition: background 0.15s;
}
.tb-app:hover { background: rgba(255, 255, 255, 0.14); }
.tb-app .dt-glyph { width: 2.6cqw; height: 2.6cqw; border-radius: 0.6cqw; box-shadow: none; }
.tb-app .dt-glyph svg { width: 1.7cqw; height: 1.7cqw; stroke-width: 2; }
.tb-app.is-active { background: rgba(255, 255, 255, 0.12); }
.tb-app.is-active::after {
  content: ""; position: absolute; bottom: 0.25cqw; left: 50%; transform: translateX(-50%);
  width: 1.4cqw; height: 0.3cqw; border-radius: 1cqw; background: #ffc766;
}
.tb-tray { position: absolute; right: 2.2cqw; font-size: 1.5cqw; }
.dt-clock { color: #fff; font-variant-numeric: tabular-nums; }

/* Desktop icons */
#dt-icons {
  position: absolute;
  top: 2.4cqw; left: 1.6cqw;
  display: flex;
  flex-direction: column;
  gap: 0.6cqw;
}
.dt-icon {
  all: unset;
  box-sizing: border-box;
  width: 11cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6cqw;
  padding: 0.9cqw 0 0.7cqw;
  border: 1px solid transparent;
  border-radius: 0.5cqw;
  cursor: pointer;
  opacity: 0;
}
.dt-icon:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.22); border-radius: 1.2cqw; }
.dt-icon.is-active { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.36); border-radius: 1.2cqw; }
.dt-icon:focus-visible { outline: 1px dotted #fff; }
.dt-label { font-size: 1.6cqw; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75); }

.dt-glyph {
  width: 6cqw; height: 6cqw;
  display: grid; place-items: center;
  border-radius: 1.7cqw;
  box-shadow: 0 0.5cqw 1.4cqw rgba(0, 10, 70, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.dt-glyph svg { width: 3.4cqw; height: 3.4cqw; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.g-folder { background: linear-gradient(160deg, #ffd27a, #e0902a); }
.g-folder svg { fill: rgba(255, 255, 255, 0.35); }
.g-blue { background: linear-gradient(160deg, #ffa878, #e0583e); }
.g-green { background: linear-gradient(160deg, #c8a0ff, #7b4ad6); }
.g-red { background: linear-gradient(160deg, #ff9ab0, #d8456f); }
.g-teal { background: linear-gradient(160deg, #7fe0cc, #1f9a8a); }
.g-teal svg { fill: rgba(255, 255, 255, 0.35); }

/* Window (light Windows 11 style) */
#dt-window {
  position: absolute;
  left: 15cqw; top: 3.4cqw;
  width: 72cqw;
  max-height: calc(100cqh - 12cqw);
  display: flex;
  flex-direction: column;
  border-radius: 1.6cqw;
  overflow: hidden;
  color: #eef1ff;
  background: rgba(20, 24, 40, 0.9);
  backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 2cqw 5cqw rgba(0, 5, 40, 0.65);
}
#dt-window[hidden] { display: none; }
/* True fullscreen: covers the whole desktop including the taskbar */
#dt-window.max {
  left: 0 !important; top: 0 !important;
  width: 100%;
  height: 100%;
  max-height: none;
  border-radius: 0;
  border: 0;
  z-index: 10;
  background: #12152a;
  backdrop-filter: none;
}
#dt-window.max .win-body { flex: 1 1 auto; overflow: auto; padding: 2cqw 10cqw; zoom: 1.15; }
.win-bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3.6cqw;
  padding-left: 1.4cqw;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.win-bar.dragging { cursor: grabbing; }
.win-title { font-size: 1.5cqw; color: #c9d0ea; }
.win-ctls { display: flex; height: 100%; }
.win-ctl {
  all: unset;
  width: 4.6cqw; height: 100%;
  display: grid; place-items: center;
  cursor: default;
}
.win-ctl svg { width: 1.1cqw; height: 1.1cqw; fill: none; stroke: #dfe4f7; stroke-width: 1; }
.win-ctl:hover { background: rgba(255, 255, 255, 0.1); }
.win-close:hover { background: #c42b1c; }
.win-close:hover svg { stroke: #fff; }

.win-body { padding: 2cqw 2.4cqw 2.4cqw; overflow: hidden; font-size: 1.7cqw; line-height: 1.5; }
.win-body h3 { margin: 0 0 0.8cqw; font-weight: 600; font-size: 3cqw; line-height: 1.2; color: #fff; }
.win-body p { margin: 0 0 1.2cqw; color: #b5bdd8; }
.win-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1cqw; }
.win-list li { padding: 1cqw 1.5cqw; border-radius: 1cqw; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); color: #b5bdd8; }
.win-list b { display: block; color: #f2c46c; font-weight: 600; margin-bottom: 0.1cqw; }
/* Projekte window: terminal that loads the projects before the button appears */
.term {
  min-height: 15cqw;
  padding: 1.4cqw 1.8cqw;
  border-radius: 1cqw;
  background: rgba(4, 6, 14, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 2.4cqw rgba(0, 0, 0, 0.5);
  font-family: "Cascadia Code", "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: 1.45cqw;
  line-height: 1.6;
  color: #d7deef;
  white-space: pre;
}
.term-line { min-height: 1.6em; }
.t-prompt { color: #7ee2a8; }
.t-cmd { color: #fff; }
.t-dim { color: #7c86a6; }
.t-bar { color: #f2c46c; text-shadow: 0 0 0.8cqw rgba(242, 196, 108, 0.45); }
.t-ok { color: #7ee2a8; }
.t-done { color: #f2c46c; font-weight: 600; }
.term-cursor {
  display: inline-block;
  width: 0.6em; height: 1.05em;
  margin-left: 0.15em;
  vertical-align: -0.15em;
  background: #7ee2a8;
  animation: term-blink 1s steps(1) infinite;
}
@keyframes term-blink { 50% { opacity: 0; } }
.term-go[hidden] { display: none; }
/* Rezensionen window: glowing star badge, stars lighting up, one clear button */
.rv-card {
  display: grid;
  justify-items: center;
  text-align: center;
  padding: 1.6cqw 2cqw 1cqw;
  border-radius: 1.4cqw;
  background:
    radial-gradient(60% 70% at 50% 0%, rgba(45, 212, 191, 0.18), transparent 70%),
    radial-gradient(50% 60% at 50% 100%, rgba(242, 196, 108, 0.12), transparent 70%);
}
.rv-badge {
  display: grid; place-items: center;
  width: 6.4cqw; height: 6.4cqw;
  border-radius: 50%;
  background: linear-gradient(160deg, #3ee0c4, #0f8f86);
  box-shadow: 0 0 0 0.5cqw rgba(62, 224, 196, 0.15), 0 0 3cqw rgba(62, 224, 196, 0.55);
  animation: rv-pulse 2.4s ease-in-out infinite;
}
.rv-badge svg { width: 3.4cqw; height: 3.4cqw; fill: #fff; filter: drop-shadow(0 0.2cqw 0.4cqw rgba(0, 0, 0, 0.3)); }
@keyframes rv-pulse {
  50% { box-shadow: 0 0 0 1cqw rgba(62, 224, 196, 0.07), 0 0 4.4cqw rgba(62, 224, 196, 0.7); }
}
.rv-stars { display: flex; gap: 0.6cqw; margin: 1.4cqw 0 1cqw; }
.rv-stars svg { width: 2.6cqw; height: 2.6cqw; fill: rgba(255, 255, 255, 0.12); stroke: rgba(242, 196, 108, 0.6); stroke-width: 1; transition: fill 0.3s, filter 0.3s; }
.rv-stars svg.on { fill: #f2c46c; filter: drop-shadow(0 0 0.8cqw rgba(242, 196, 108, 0.7)); }
.rv-card h3 { margin-bottom: 0.4cqw; }
.rv-card p { margin-bottom: 1.6cqw; }
.rv-go { box-shadow: 0 0 1.6cqw rgba(242, 176, 72, 0.45); }
.term-go .win-btn.primary { box-shadow: 0 0 1.6cqw rgba(242, 176, 72, 0.45); }
.win-btns { display: flex; flex-wrap: wrap; gap: 1cqw; margin-top: 1.6cqw; }
.win-btn {
  all: unset; box-sizing: border-box; cursor: pointer;
  padding: 0.9cqw 2.4cqw; border-radius: 10cqw;
  font-size: 1.6cqw; font-weight: 600;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); color: #eef1ff;
}
.win-btn:hover, .win-btn:focus-visible { background: rgba(255, 255, 255, 0.16); }
.win-btn.primary { background: linear-gradient(180deg, #ffcb6b, #e59a2c); border-color: #e59a2c; color: #1a1305; }
.win-btn.primary:hover { background: linear-gradient(180deg, #ffd684, #eda437); }

/* Ambient life on the desk photo (mug steam), see scene-fx.js */
#scene-steam {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Contact form (inside the Kontakt window) */
.cf { display: grid; gap: 1cqw; margin-top: 1cqw; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1cqw; }
.cf label { display: grid; gap: 0.3cqw; font-size: 1.35cqw; font-weight: 600; color: #c9d0ea; }
.cf input, .cf textarea {
  box-sizing: border-box;
  width: 100%;
  font: inherit; font-weight: 400; font-size: 1.55cqw; color: #fff;
  padding: 0.7cqw 1cqw;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16); border-bottom-color: rgba(255, 255, 255, 0.4);
  border-radius: 0.5cqw;
}
.cf textarea { resize: none; }
.cf input:focus, .cf textarea:focus { outline: none; border-bottom: 2px solid #f2b04a; background: rgba(255, 255, 255, 0.1); }
.cf-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cf .cf-consent { display: flex; gap: 0.8cqw; align-items: flex-start; font-weight: 400; font-size: 1.25cqw; color: #98a2c4; }
.cf .cf-consent input { width: auto; margin-top: 0.2cqw; }
.cf-actions { display: flex; align-items: center; gap: 1.4cqw; }
.cf-actions .win-btn { flex-shrink: 0; white-space: nowrap; }
.cf-actions .win-btn:disabled { opacity: 0.6; cursor: default; }
.cf-status { font-size: 1.35cqw; color: #98a2c4; }
.cf-status.is-error { color: #ff7b7b; }
.cf-alt { margin-top: 1.2cqw; font-size: 1.3cqw; color: #98a2c4; }
.cf-alt a { color: #f2c46c; text-decoration: none; }
.cf-alt a:hover { text-decoration: underline; }

/* Wallpaper: blue base with a softly drifting light wave */
#dt-wall { position: absolute; inset: 0; width: 100%; height: 100%; }
.wall-wave { animation: wall-drift 11s ease-in-out infinite alternate; }
@keyframes wall-drift {
  from { transform: translate(-0.8px, 0.9px); }
  to { transform: translate(0.8px, -1.1px); }
}
@media (prefers-reduced-motion: reduce) { .wall-wave { animation: none; } }

/* ---------- Projects section around the three floating tablets ---------- */
#projects-ui, #reviews-ui {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  font-family: "Work Sans", system-ui, sans-serif;
  color: var(--off-white);
  text-align: center;
}
#projects-ui.is-live .pj-btn, #reviews-ui.is-live .pj-btn { pointer-events: auto; }
.pj-head {
  position: absolute;
  top: 7vh;
  left: 0; right: 0;
  padding: 0 16px;
  transform: translateY(calc((1 - var(--in, 0)) * 18px));
}
.pj-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-size: clamp(12px, 1.1vw, 15px);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}
.pj-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px rgba(201, 162, 74, 0.8);
}
.pj-title {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 52px);
  line-height: 1.1;
  text-shadow: 0 2px 24px rgba(10, 8, 30, 0.6);
}
/* Call-to-action on a dark glass panel so it stands out against the busy, bright skyline */
.pj-cta {
  position: absolute;
  bottom: 6vh;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 14px 14px 14px 28px;
  max-width: calc(100% - 32px);
  border-radius: 999px;
  background: rgba(12, 10, 28, 0.72);
  border: 1px solid rgba(255, 203, 107, 0.35);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(14px) saturate(1.3);
  transform: translate(-50%, calc((1 - var(--in, 0)) * -18px));
}
.pj-cta p {
  margin: 0;
  font-size: clamp(16px, 1.5vw, 22px);
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}
.pj-btn {
  all: unset;
  cursor: pointer;
  padding: 15px 30px;
  border-radius: 999px;
  font-weight: 700;
  font-size: clamp(15px, 1.2vw, 18px);
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: #1a1305;
  background: linear-gradient(180deg, #ffd27a, #e8992a);
  box-shadow: 0 0 0 0 rgba(255, 196, 90, 0.6), 0 8px 26px rgba(229, 154, 44, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  animation: pj-pulse 2.4s ease-out infinite;
  transition: transform 0.2s;
}
.pj-btn:hover, .pj-btn:focus-visible { transform: translateY(-2px) scale(1.03); }
/* Soft ring pulsing out of the button: draws the eye without flashing */
@keyframes pj-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 196, 90, 0.55), 0 8px 26px rgba(229, 154, 44, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
  70% { box-shadow: 0 0 0 16px rgba(255, 196, 90, 0), 0 8px 26px rgba(229, 154, 44, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
  100% { box-shadow: 0 0 0 0 rgba(255, 196, 90, 0), 0 8px 26px rgba(229, 154, 44, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
}
@media (prefers-reduced-motion: reduce) { .pj-btn { animation: none; } }
@media (max-width: 640px) {
  .pj-cta { flex-direction: column; gap: 12px; padding: 18px 20px; border-radius: 22px; }
  .pj-cta p { white-space: normal; text-align: center; }
}

/* Card around the contact form (used by the full-screen contact) */
.cta-card {
  position: relative;
  overscroll-behavior: contain;
  container-type: inline-size;
  width: min(100%, 760px);
  max-height: calc(100vh - 32px);
  overflow: auto;
  color: #eef1ff;
  background: rgba(20, 24, 40, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 5, 40, 0.6);
}
.cta-card .win-body { padding: 36px 36px 30px; font-size: 16px; overflow: visible; }
.cta-card .win-body h3 { font-size: 30px; }
.cta-card .cf label, .cta-card .cf input, .cta-card .cf textarea, .cta-card .cf-status, .cta-card .cf-alt { font-size: 15px; }
.cta-card .cf .cf-consent { font-size: 13px; }
.cta-card .cf input, .cta-card .cf textarea { padding: 10px 12px; border-radius: 8px; }
.cta-card .cf, .cta-card .cf-row { gap: 12px; }
.cta-card .win-btn { font-size: 15px; padding: 12px 26px; }
.cta-close {
  all: unset;
  position: absolute;
  top: 10px; right: 14px;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  font-size: 26px;
  line-height: 1;
  color: #c9d0ea;
  cursor: pointer;
  border-radius: 50%;
}
.cta-close:hover { background: rgba(255, 255, 255, 0.1); }
@media (max-width: 560px) {
  .cta-card .cf-row { grid-template-columns: 1fr; }
  .cta-card .win-body { padding: 28px 20px 22px; }
}

/* ---------- Premium app icons (glossy, layered, colour glow) ---------- */
.g-folder { --c: 255, 190, 80; background: linear-gradient(155deg, #ffe29a 0%, #ffb547 45%, #e0791d 100%); }
.g-blue   { --c: 255, 128, 90; background: linear-gradient(155deg, #ffc4a3 0%, #ff8a5c 45%, #d9482e 100%); }
.g-green  { --c: 180, 130, 255; background: linear-gradient(155deg, #e1ceff 0%, #a97bff 45%, #6a3bd6 100%); }
.g-teal   { --c: 80, 220, 200; background: linear-gradient(155deg, #b8fff0 0%, #45d6bf 45%, #138a7c 100%); }
.g-red    { --c: 255, 110, 150; background: linear-gradient(155deg, #ffc6d6 0%, #ff7aa0 45%, #cf315f 100%); }

.dt-glyph {
  position: relative;
  overflow: hidden;
  border-radius: 28%;
  box-shadow:
    0 0.9cqw 1.8cqw rgba(0, 0, 0, 0.45),
    0 0 1.6cqw rgba(var(--c, 255, 255, 255), 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -0.35cqw 0.6cqw rgba(0, 0, 0, 0.25);
  transition: transform 0.25s cubic-bezier(.2,.9,.3,1.3), box-shadow 0.25s;
}
/* glass sheen on the upper half */
.dt-glyph::before {
  content: "";
  position: absolute;
  inset: -10% -10% 45% -10%;
  border-radius: 0 0 50% 50% / 0 0 40% 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.05));
  pointer-events: none;
}
/* light sweep on hover */
.dt-glyph::after {
  content: "";
  position: absolute;
  top: -20%; bottom: -20%;
  width: 45%;
  left: -70%;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.dt-icon:hover .dt-glyph::after, .tb-app:hover .dt-glyph::after { animation: glyph-sweep 0.7s ease-out; }
@keyframes glyph-sweep { from { left: -70%; } to { left: 130%; } }

.dt-glyph svg {
  position: relative;
  z-index: 1;
  stroke: #fff;
  stroke-width: 1.8;
  filter: drop-shadow(0 0.25cqw 0.35cqw rgba(0, 0, 0, 0.3));
}
.dt-glyph svg :is(path, rect, circle):not([fill]) { fill: rgba(255, 255, 255, 0.22); }

.dt-icon:hover .dt-glyph {
  transform: translateY(-0.5cqw) scale(1.06);
  box-shadow:
    0 1.3cqw 2.4cqw rgba(0, 0, 0, 0.5),
    0 0 2.6cqw rgba(var(--c, 255, 255, 255), 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -0.35cqw 0.6cqw rgba(0, 0, 0, 0.25);
}
.dt-icon.is-active .dt-glyph { box-shadow: 0 0.9cqw 1.8cqw rgba(0, 0, 0, 0.45), 0 0 2.4cqw rgba(var(--c), 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.7); }
.dt-label { font-weight: 500; letter-spacing: 0.01em; }
.tb-app .dt-glyph { box-shadow: 0 0.3cqw 0.8cqw rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.tb-app .dt-glyph svg { stroke-width: 2.2; }

/* Camera flight into the apartment (flight.js), above the skyline, below the 3D tablets */
#flight-canvas { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
#flight-final { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; }

/* ---------- Night over the skyline (second scroll step) ---------- */
#reviews-scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; visibility: hidden; }
#rv-night { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }


/* ---------- Full-screen contact after the reviews tablet zooms in ---------- */
/* Same colours as the tablet's reviews screen, so the hand-over from 3D is seamless */
#contact-full {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 16px;
  opacity: 0;
  background:
    radial-gradient(70% 55% at 50% 8%, rgba(201, 162, 74, 0.2), transparent 70%),
    linear-gradient(180deg, #0a0c22 0%, #15123a 60%, #2a1a45 100%);
}
#contact-full[hidden] { display: none; }
.cfull-inner.cta-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  width: min(100%, 720px);
}
.cfull-inner .win-body h3 { font-family: "Fraunces", Georgia, serif; font-weight: 400; font-size: clamp(30px, 3.2vw, 44px); }
.cfull-back {
  all: unset;
  position: absolute;
  top: 20px; left: 20px;
  padding: 10px 18px;
  border-radius: 999px;
  font: 600 14px "Work Sans", system-ui, sans-serif;
  color: #eef1ff;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  z-index: 2; /* above the form, which can reach up here on small screens */
}
@media (max-width: 760px) { #contact-full { padding-top: 76px; } }
.cfull-back:hover, .cfull-back:focus-visible { background: rgba(255, 255, 255, 0.16); }

/* ---------- Impressum / Datenschutz ---------- */
#legal-links {
  position: fixed;
  left: 14px; bottom: 10px;
  z-index: 80;
  display: flex;
  gap: 4px;
}
#legal-links button {
  all: unset;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  font: 500 12px "Work Sans", system-ui, sans-serif;
  color: rgba(244, 241, 234, 0.6);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
  transition: color 0.2s, background 0.2s;
}
#legal-links button:hover, #legal-links button:focus-visible { color: #fff; background: rgba(0, 0, 0, 0.35); }
#legal {
  position: fixed;
  inset: 0;
  z-index: 90;
  color: #d9deee;
  font-family: "Work Sans", system-ui, sans-serif;
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(201, 162, 74, 0.16), transparent 70%),
    linear-gradient(180deg, #0a0c22 0%, #15123a 60%, #2a1a45 100%);
}
#legal[hidden] { display: none; }
.legal-scroll {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  outline: none;
  padding: 88px 16px 64px;
}
.legal-doc { max-width: 720px; margin: 0 auto; font-size: 16px; line-height: 1.65; }
.legal-doc[hidden] { display: none; }
.legal-kicker {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}
.legal-doc h1 { margin: 0 0 12px; font-family: "Fraunces", Georgia, serif; font-weight: 400; font-size: clamp(32px, 4vw, 48px); line-height: 1.1; color: #fff; }
.legal-lead { margin: 0 0 32px; color: #aab2cf; }
.legal-doc h2 { margin: 32px 0 8px; font-size: 18px; font-weight: 600; color: #fff; }
.legal-doc p { margin: 0 0 12px; }
.legal-doc ul { margin: 0 0 12px; padding-left: 20px; }
.legal-doc li { margin-bottom: 4px; }
.legal-doc a { color: #f2c46c; text-decoration: underline; text-underline-offset: 2px; }
.legal-doc strong { color: #fff; font-weight: 600; }
.legal-date { margin-top: 32px; font-size: 14px; color: #8c94b3; }
/* details still missing: clearly visible until they are filled in */
.todo { padding: 0 6px; border-radius: 4px; background: rgba(255, 90, 90, 0.18); color: #ff9c9c; }
.legal-back { position: fixed; z-index: 91; background: rgba(16, 16, 44, 0.85); backdrop-filter: blur(8px); }
/* text scrolls away under a soft fade at the top, so it never runs into the back button */
#legal::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 84px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, #0a0c22 55%, rgba(10, 12, 34, 0));
}
.cf-consent a { color: #f2c46c; }

/* ---------- Portrait (phones): scene band + ambient fill ---------- */
/* the whole laptop fits the width (it covers ~56 % of the photo's width) */
/* ...but no bigger than the height allows: the three stacked tablets plus heading and call-to-action
   must fit (matters on tall-ish screens like an upright iPad and on short phones) */
html.portrait { --scene-w: min(calc(100vw / 0.58), calc((100vh - 300px) * 1.3)); }
#scene-ambient { display: none; }
.portrait #scene-ambient {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.portrait #scene-ambient img {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  object-fit: cover;
  opacity: 0;
  filter: blur(26px) brightness(0.72) saturate(1.1);
}
/* the band's photo layers fade softly into the ambient fill at top and bottom */
.portrait #scene-plate, .portrait #scene-skyline, .portrait #warp-canvas, .portrait #reviews-scene {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 84%, transparent 100%);
}

/* ---------- Portrait: desktop icons as a larger 3 x 2 grid on the laptop screen ---------- */
.portrait #dt-icons {
  top: 44%; left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: repeat(3, 21cqw);
  gap: 2.4cqw 1.6cqw;
  justify-items: center;
}
.portrait .dt-icon { width: 21cqw; gap: 1.2cqw; padding: 1.4cqw 0 1.2cqw; }
.portrait #dt-icons .dt-glyph { width: 12cqw; height: 12cqw; border-radius: 3.4cqw; }
.portrait #dt-icons .dt-glyph svg { width: 6.8cqw; height: 6.8cqw; }
.portrait .dt-label { font-size: 3.1cqw; }

/* ---------- Portrait: desktop windows as a full-screen layer ---------- */
#m-window {
  position: fixed;
  inset: 0;
  z-index: 85;
  color: #eef1ff;
  font-family: "Work Sans", system-ui, sans-serif;
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(201, 162, 74, 0.16), transparent 70%),
    linear-gradient(180deg, #0a0c22 0%, #15123a 60%, #2a1a45 100%);
}
#m-window[hidden] { display: none; }
.mwin-back { position: fixed; z-index: 2; background: rgba(16, 16, 44, 0.85); }
.mwin-scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 80px 16px 48px; }
.mwin-card.cta-card { background: transparent; border: 0; box-shadow: none; width: min(100%, 640px); max-height: none; overflow: visible; margin: 0 auto; }
.mwin-card .win-body { padding: 0; }
#m-window .win-body h3 { font-family: "Fraunces", Georgia, serif; font-weight: 400; font-size: 30px; margin-bottom: 10px; }
#m-window .win-body p { font-size: 16px; margin: 0 0 16px; }
#m-window .win-list { gap: 10px; }
#m-window .win-list li { padding: 12px 14px; border-radius: 12px; font-size: 15px; }
#m-window .win-btns { margin-top: 18px; gap: 10px; }
#m-window .term { font-size: 12.5px; min-height: 180px; padding: 14px; border-radius: 12px; white-space: pre-wrap; }
#m-window .term-go .win-btn.primary, #m-window .rv-go { box-shadow: 0 0 18px rgba(242, 176, 72, 0.45); }
#m-window .rv-card { padding: 28px 12px 16px; border-radius: 18px; }
#m-window .rv-badge { width: 64px; height: 64px; }
#m-window .rv-badge svg { width: 34px; height: 34px; }
#m-window .rv-stars { gap: 8px; margin: 18px 0 14px; }
#m-window .rv-stars svg { width: 28px; height: 28px; }
/* Portrait: the legal links stay reachable but get a small backing so they never sit
   unreadably on top of a form or text; scrolling content ends above them */
.portrait #legal-links { left: 8px; bottom: 8px; padding: 2px; border-radius: 10px; background: rgba(10, 12, 34, 0.72); backdrop-filter: blur(8px); }
.portrait #legal-links button { text-shadow: none; }
.portrait .cfull-inner .win-body { padding-bottom: 64px; }
.portrait .mwin-scroll { padding-bottom: 72px; }