/* ===== os-vm.css ===== */
:root{
  --bg:#0b0c10;
  --panel:#121319;
  --text:#e8eaed;
  --muted:#b6bcc6;
  --brand:#4da3ff;
  --ring:rgba(77,163,255,0.5);
  --radius:22px;
  --shadow:0 10px 30px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background: radial-gradient(1200px 800px at 15% -10%, #121827 0%, #0b0c10 55%, #0b0c10 100%);
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, 'Helvetica Neue', Arial, 'Apple Color Emoji','Segoe UI Emoji';
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  scroll-behavior:smooth;
}

.container{ width:100%; max-width:1100px; margin:0 auto; padding: clamp(18px, 3vw, 36px); }
.site-header{
  position:sticky; top:0; z-index:5;
  backdrop-filter:saturate(140%) blur(6px);
  background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0));
  padding:14px 18px;
}
.back-link{ color:var(--muted); text-decoration:none; font-weight:600; }
.back-link:hover{ color:var(--text) }

/* Hero */
.page-title{ margin: 6px 0 6px; font-size: clamp(28px, 3.8vw, 52px); letter-spacing:-0.02em; }
.lead{ color:var(--muted); margin: 0 0 14px; max-width: 90ch; }
.video-grid{
  display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2.2vw, 24px);
}
@media (max-width: 820px){
  .video-grid{ grid-template-columns: 1fr; }
}

.video-card{
  position:relative;
  border-radius: var(--radius);
  border:1px solid rgba(77,163,255,.35);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  box-shadow: var(--shadow);
  padding: 12px;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
  cursor:pointer;
}
.video-card:hover{
  border-color: rgba(77,163,255,.6);
  box-shadow: 0 18px 48px rgba(0,0,0,.55);
  transform: translateY(-2px);
}
.video-frame{
  border:1px solid rgba(77,163,255,.35);
  border-radius: var(--radius);
  overflow:hidden;
  margin:0;
  display:inline-block;
  width:100%;
}
.video-frame .ring{
  pointer-events:none;
  position:absolute; inset:0;
  border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(77,163,255,.25), 0 0 32px rgba(77,163,255,.12) inset;
}
.video{
  display:block; width:100%; height:auto; aspect-ratio: 16 / 9;
  border-radius: inherit; background:#0b0c10;
}

/* .video-title removed */ .video-title{ margin:10px 4px 2px; font-size: clamp(18px, 2.2vw, 22px); letter-spacing:.2px; }
/* .video-desc removed */ .video-desc{ margin:0 4px 6px; color:var(--muted); font-size: clamp(14px, 1.6vw, 16px); }

/* Down Arrow */
.down-btn{position:fixed;left:50%;transform:translateX(-50%);bottom:clamp(16px,4vh,42px);width:48px;height:48px;padding:0;border:0;background:transparent;opacity:1;pointer-events:auto;transition:transform .2s ease, opacity .2s ease;}
.down-btn:hover{ transform: translateX(-50%) scale(1.06); }
.down-btn img{ width:100%; height:100%; display:block }
@keyframes showDown{ to{ opacity:1; pointer-events:auto; } }

/* Content */
.content .row{
  display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(16px, 2.5vw, 28px);
  align-items:center;
  margin: clamp(20px, 4vw, 56px) 0;
}
.content .row:nth-child(2){ grid-template-columns: .9fr 1.1fr; } /* invert order */
@media (max-width: 920px){
  .content .row, .content .row:nth-child(2){ grid-template-columns: 1fr; }
}
.col.text h3{ margin:0 0 8px; font-size: clamp(20px, 2.6vw, 28px); }
.col.text p{ margin:0 0 12px; color:var(--muted) }
.img-fit{ display:block; width:100%; height:auto; border-radius: var(--radius); box-shadow: var(--shadow); background:#0b0c10; }

/* Expander stage for hover-zoom */
.expander{
  position:fixed; inset: 3vh 3vw; z-index:60;
  display:flex; align-items:center; justify-content:center;
  background: transparent; /* Hintergrund sichtbar lassen */
}
.expander[hidden]{ display:none; }
.expander .video-card{
  width: min(1200px, 100%);
  max-height: 100%;
  padding: 16px;
  border:1px solid rgba(77,163,255,.6);
  box-shadow: 0 30px 90px rgba(0,0,0,.7), 0 0 0 1px rgba(77,163,255,.28) inset;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  transition: transform .45s cubic-bezier(.2,.7,.2,1), opacity .3s ease;
}
.expander .video-frame{
  border:1px solid rgba(77,163,255,.35);
  border-radius: var(--radius);
  overflow:hidden;
  margin:0;
  display:inline-block;
  width:100%;
}
.expander .video{ width:100%; height: calc(100vh - 12vh); object-fit: contain; aspect-ratio:auto; }
.expander .video-title, .expander /* .video-desc removed */ .video-desc{ display:none; }

/* Fly-in animation */
.fly-in{ opacity:0; transform: translateY(18px); animation: flyUp .6s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: var(--delay,0ms); }
@keyframes flyUp{ to{ opacity:1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce){
  .down-btn, .video-card, .expander .video-card{ transition:none; animation:none }
  .fly-in{ animation:none; opacity:1; transform:none }
}


.video-head{ text-align:center; margin: 0 0 10px; }
.v-headline{
  margin:0;
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: .2px;
}
.v-sub{
  margin: 2px 0 0;
  color: var(--muted);
  font-weight: 700;
  font-size: clamp(13px, 1.4vw, 16px);
}

.video-grid{ align-items:start; }
.video-card{ padding: 18px; }

/* Ghost clone for FLIP animation */
.ghost-card{
  position: fixed;
  z-index: 80;
  border-radius: var(--radius);
  overflow: hidden;
  border:1px solid rgba(77,163,255,.35);
  box-shadow: 0 18px 48px rgba(0,0,0,.55);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  transition: transform .55s cubic-bezier(.2,.7,.2,1), width .55s cubic-bezier(.2,.7,.2,1), height .55s cubic-bezier(.2,.7,.2,1), top .55s cubic-bezier(.2,.7,.2,1), left .55s cubic-bezier(.2,.7,.2,1), opacity .3s ease;
}
.ghost-card .video{ width:100%; height:100%; object-fit:cover; }
.placeholder{ visibility:hidden; height:0; }


/* Wider hero container close to full viewport */
.hero.container{ max-width: 1600px; }
.container{ max-width: 1400px; } /* for content below */

/* Show only videos + titles in hero; remove outer card border, frame gets border */
.video-card{ padding: 10px; border:none; background:transparent; box-shadow:none; }
.video-head{ text-align:center; margin-bottom:10px; }
.video-frame{
  border:1px solid rgba(77,163,255,.35);
  border-radius: var(--radius);
  overflow:hidden;
  margin:0;
  display:inline-block;
  width:100%;
}
.video-frame .ring{ display:none; }

/* Hero first view fills viewport */
.hero-only{min-height:calc(100vh - var(--header-h));display:grid;align-content:start;justify-items:center;padding-top:clamp(96px, 22vh, 220px);}
.hero-only .video-grid{ width:100%; }
.hero-only + .content{ scroll-margin-top: 12px; }

/* Down button visibility toggles */
.down-btn.hide{ opacity:0 !important; pointer-events:none; }


/* Hero occupies full viewport and vertically centers its grid */
.hero-only{min-height:calc(100vh - var(--header-h));display:grid;align-content:start;justify-items:center;padding-top:clamp(96px, 22vh, 220px);}

/* Remove any padding around frames; border hugs the video exactly */
.video-card{ padding:0; background:transparent; border:none; box-shadow:none; }
.video-head{ margin: 0 0 12px; }
.video-frame{
  border:1px solid rgba(77,163,255,.35);
  border-radius: var(--radius);
  overflow:hidden;
  margin:0;
  display:inline-block;
  width:100%;
}

/* In hero, ensure columns stretch nicely with no inner side gaps */
.video-grid{ width:100%; align-items:center; }

/* Darkened backdrop while expanded */
.expander{
  position: fixed;
  inset: 0;
  z-index: 70;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.55);
}
.expander[hidden]{ display:none; }
.expander.show{ display:flex; animation: fadeIn .18s ease; }
@keyframes fadeIn { from{ opacity:0 } to{ opacity:1 } }

/* Ghost-clone frame used for animation */
.ghost-frame{
  border-radius: var(--radius);
  overflow:hidden;
  background:#0b0c10;
  transition: top .45s cubic-bezier(.2,.7,.2,1),
              left .45s cubic-bezier(.2,.7,.2,1),
              width .45s cubic-bezier(.2,.7,.2,1),
              height .45s cubic-bezier(.2,.7,.2,1),
              box-shadow .45s ease, border-color .45s ease;
}
.ghost-frame video{ width:100%; height:100%; object-fit:fill; display:block }


:root{ --header-h: 56px; }

.hero-only{min-height:calc(100vh - var(--header-h));display:grid;align-content:start;justify-items:center;padding-top:clamp(96px, 22vh, 220px);}

.video-card{ padding:0; }
.video-frame{
  border:1px solid rgba(77,163,255,.35);
  border-radius: var(--radius);
  overflow:hidden;
  margin:0;
  display:inline-block;
  width:100%;
}
.video-frame > .video{
  display:block;
  width:100%;
  height:100%;
  object-fit: cover; /* keine seitlichen Leerräume */
}

/* Expanded target margin a bit larger so video wirkt kleiner */
:root{ --expand-v: 6vh; --expand-h: 6vw; }

.img-fit.cycle-fade{ transition: opacity .45s ease; background:#0b0c10; }
.img-fit.cycle-fade.is-fading{ opacity:0; }


/* Crossfade for first content image */
.img-crossfade-wrap{ position: relative; display:inline-block; }
.img-crossfade-wrap > img{ display:block; width:100%; height:auto; }
.img-crossfade-overlay{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .45s ease; opacity:1; }
.img-crossfade-overlay.fade-out{ opacity:0; }

/* Crossfade wrapper for the 'Erstes Betriebssystem' image */
.cycle-wrap{ position:relative; display:block; border-radius:var(--radius); overflow:hidden; }
.cycle-wrap > img{ display:block; width:100%; height:auto; border-radius:inherit; }
.cycle-ghost{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; opacity:0; transform:scale(1.004); transition:opacity .7s ease, transform .7s ease; border-radius:inherit; }
.cycle-ghost.is-on{ opacity:1; transform:scale(1); }


/* === Mobile-only: bring hero videos up, keep titles above and centered === */
@media (max-width: 820px){
  /* Pull the hero content closer to the top bar on mobile */
  .hero-only{
    /* was: clamp(96px, 22vh, 220px); — much too large on phones */
    padding-top: clamp(12px, 6vh, 40px) !important;
  }
  /* Keep the first headline slightly spaced but compact */
  .hero-only .video-head{ margin-top: 6px; }
}


/* === Mobile-only: ultra-tight hero top spacing (final) === */
@media (max-width: 820px){
  /* Push hero content directly under the top bar, keep safe-area */
  .hero-only{
    padding-top: max(env(safe-area-inset-top, 0px), 6px) !important;
    margin-top: 0 !important;
  }
  /* Keep headline compact but readable */
  .hero-only .video-head{ 
    margin-top: 2px !important; 
  }
}