/* ==========================================================================
   Embyx Website  ·  Ergänzungen zu embyx.css
   embyx.css bleibt unverändert. Hier steht nur, was die Website zusätzlich
   braucht: Kopfleiste, große Überschriften, Programm-Karten, gezeichnete
   Programmfenster und die Animationen beim Scrollen.
   Alle Klassen beginnen mit "site-" (bzw. "mock-" für die Zeichnungen).
   ========================================================================== */

:root {
  --site-max: 1160px;
  --site-header-h: 60px;
  --site-reveal: 520ms;            /* Einblenden beim Scrollen */
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--site-header-h) + 16px); }
body.ex { overflow-x: hidden; }

.site-wrap { width: min(var(--site-max), calc(100% - 48px)); margin-inline: auto; }
.site-skip { position: absolute; left: 16px; top: -60px; z-index: 100; }
.site-skip:focus { top: 12px; }


/* ---------- Kopfleiste ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40; height: var(--site-header-h);
  background: rgba(5, 7, 13, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--ex-duration-base) var(--ex-ease), background-color var(--ex-duration-base) var(--ex-ease);
}
.site-header.is-scrolled { border-bottom-color: var(--ex-border); background: rgba(5, 7, 13, 0.86); }
.site-header__inner { display: flex; align-items: center; gap: var(--ex-space-5); height: 100%; }

.ex a.site-brand, .ex a.site-brand:hover { display: flex; align-items: center; gap: 10px; color: var(--ex-text); text-decoration: none; font-weight: var(--ex-weight-semibold); font-size: var(--ex-text-lg); letter-spacing: 0.02em; }
.site-brand img { width: 28px; height: 28px; }

.site-nav { display: flex; align-items: center; gap: 2px; }
.ex .site-nav a, .ex .site-nav a:hover {
  display: flex; align-items: center; height: 34px; padding: 0 12px; border-radius: var(--ex-radius-md);
  color: var(--ex-text-2); font-weight: var(--ex-weight-medium); text-decoration: none;
  transition: background-color var(--ex-duration-fast) var(--ex-ease), color var(--ex-duration-fast) var(--ex-ease);
}
.ex .site-nav a:hover { background: var(--ex-bg-3); color: var(--ex-text); }
.ex .site-nav a[aria-current="page"] { color: var(--ex-text); background: var(--ex-accent-soft); }

.ex .site-nav a.site-nav__dl { display: none; }
.site-header__end { margin-left: auto; display: flex; align-items: center; gap: var(--ex-space-2); }
.site-menu-btn { display: none; }
.site-menu-btn svg { width: 20px; height: 20px; }

@media (max-width: 820px) {
  .site-menu-btn { display: inline-flex; }
  .site-nav {
    position: fixed; left: 0; right: 0; top: var(--site-header-h);
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: var(--ex-space-3) var(--ex-space-4) var(--ex-space-5);
    background: var(--ex-bg-0); border-bottom: 1px solid var(--ex-border);
    opacity: 0; transform: translateY(-6px); pointer-events: none; visibility: hidden;
    transition: opacity var(--ex-duration-base) var(--ex-ease), transform var(--ex-duration-base) var(--ex-ease), visibility 0s linear var(--ex-duration-base);
  }
  .site-nav.is-open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
  .ex .site-nav a, .ex .site-nav a:hover { height: 46px; font-size: var(--ex-text-lg); }
  .ex .site-nav a.site-nav__dl { display: flex; color: var(--ex-accent-hover); }
  .site-header__end .site-header__dl { display: none; }
}


/* ---------- Typografie für die Website ---------- */
.site-display {
  font-size: clamp(42px, 7.2vw, 80px) !important; font-weight: var(--ex-weight-semibold);
  line-height: 1.04 !important; letter-spacing: -0.035em !important; margin: 0 0 var(--ex-space-5) !important;
}
.site-title { font-size: clamp(34px, 5vw, 56px) !important; line-height: 1.08 !important; letter-spacing: -0.03em !important; margin: 0 0 var(--ex-space-4) !important; }
.site-h2 { font-size: clamp(28px, 3.6vw, 42px) !important; line-height: 1.12 !important; letter-spacing: -0.025em !important; }
.site-glow-text {
  background: linear-gradient(180deg, #a9d2ff 0%, #2f8cff 70%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ex p.site-lead { font-size: clamp(16px, 1.9vw, 19px); line-height: 1.6; color: var(--ex-text-2); max-width: 640px; }
.site-center { text-align: center; }
.site-center .site-lead, .site-center .site-section__lead { margin-inline: auto; }

.ex-btn.site-btn-lg { height: 46px; padding: 0 24px; font-size: 15px; border-radius: 8px; }


/* ---------- Abschnitte ---------- */
.site-section { padding: 104px 0; }
.site-section--tight { padding: 64px 0; }
.site-section--line { border-top: 1px solid var(--ex-border); }
.site-section__head { max-width: 680px; margin-bottom: var(--ex-space-7); }
.site-section__head.site-center { margin-inline: auto; }
.ex p.site-section__lead { font-size: var(--ex-text-lg); line-height: 1.6; max-width: 600px; }
.site-overline { display: block; margin-bottom: var(--ex-space-3); }
.site-note { font-size: var(--ex-text-sm); color: var(--ex-text-3); }

@media (max-width: 760px) {
  .site-section { padding: 72px 0; }
  .site-section--tight { padding: 48px 0; }
  .site-section__head { margin-bottom: var(--ex-space-6); }
}


/* ---------- Startseite: großer Titel ---------- */
.site-hero { position: relative; isolation: isolate; padding: 120px 0 112px; text-align: center; overflow: hidden; }
.site-hero::before {
  content: ""; position: absolute; z-index: -1; left: 50%; bottom: -260px; width: 1100px; height: 560px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(47, 140, 255, 0.22), rgba(47, 140, 255, 0.06) 55%, transparent 100%);
  pointer-events: none;
}
/* der leuchtende Horizont: die Glut in der Tiefe */
.site-hero__horizon {
  position: absolute; z-index: -1; left: 50%; bottom: 0; width: min(900px, 90%); height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(90, 166, 255, 0.85), transparent);
  box-shadow: 0 0 24px 2px rgba(47, 140, 255, 0.45);
}
.site-hero__logo { position: relative; width: 104px; height: 104px; margin: 0 auto var(--ex-space-6); }
.site-hero__logo img { position: relative; width: 100%; height: 100%; }
.site-hero__logo::before {
  content: ""; position: absolute; inset: -56px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(47, 140, 255, 0.42), transparent);
  animation: site-breathe 6s var(--ex-ease-in-out) infinite;
}
@keyframes site-breathe { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
.site-hero .ex-row { justify-content: center; }
.site-hero__badge { margin-bottom: var(--ex-space-5); }

@media (max-width: 760px) {
  .site-hero { padding: 72px 0 80px; }
  .site-hero__logo { width: 84px; height: 84px; }
}


/* ---------- Seitenkopf der Unterseiten ---------- */
.site-pagehead { position: relative; isolation: isolate; padding: 88px 0 56px; }
.site-pagehead::before {
  content: ""; position: absolute; z-index: -1; right: -200px; top: -200px; width: 760px; height: 560px;
  background: radial-gradient(closest-side, rgba(47, 140, 255, 0.12), transparent);
  pointer-events: none;
}
.site-pagehead__grid { display: grid; grid-template-columns: auto 1fr; gap: var(--ex-space-6); align-items: start; }
.site-pagehead .ex-row { margin-top: var(--ex-space-5); }
@media (max-width: 760px) {
  .site-pagehead { padding: 56px 0 40px; }
  .site-pagehead__grid { grid-template-columns: 1fr; gap: var(--ex-space-5); }
}


/* ---------- App-Icon: Embyx-Logo + kleines Erkennungszeichen ---------- */
.site-appicon { position: relative; width: 48px; height: 48px; flex: none; }
.site-appicon > img { width: 100%; height: 100%; display: block; }
.site-appicon__badge {
  position: absolute; top: -5px; right: -5px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(180deg, var(--ex-accent-hover), var(--ex-accent-pressed));
  border: 2px solid var(--ex-bg-2); box-shadow: 0 0 10px var(--ex-accent-glow);
}
.site-appicon__badge svg { width: 11px; height: 11px; }
.site-appicon--lg { width: 88px; height: 88px; }
.site-appicon--lg .site-appicon__badge { width: 34px; height: 34px; top: -8px; right: -8px; border-width: 3px; border-color: var(--ex-bg-1); }
.site-appicon--lg .site-appicon__badge svg { width: 16px; height: 16px; }


/* ---------- Programm-Karten ---------- */
.site-products { display: grid; gap: var(--ex-space-4); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .site-products { grid-template-columns: 1fr; } }

.ex a.site-product, .ex a.site-product:hover {
  position: relative; display: flex; flex-direction: column; gap: var(--ex-space-4); overflow: hidden;
  padding: var(--ex-space-6); min-height: 280px; text-decoration: none; color: var(--ex-text);
  background: var(--ex-bg-2); border: 1px solid var(--ex-border); border-radius: 14px;
  transition: border-color var(--ex-duration-base) var(--ex-ease), background-color var(--ex-duration-base) var(--ex-ease), transform var(--ex-duration-base) var(--ex-ease);
}
.site-product::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ex-accent-hover), transparent);
  opacity: 0; transition: opacity var(--ex-duration-slow) var(--ex-ease);
}
.site-product::after {
  content: ""; position: absolute; left: 50%; top: -140px; width: 360px; height: 220px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(47, 140, 255, 0.16), transparent);
  opacity: 0; transition: opacity var(--ex-duration-slow) var(--ex-ease); pointer-events: none;
}
.ex a.site-product:hover { border-color: var(--ex-border-strong); background: #111a2d; transform: translateY(-2px); }
.site-product:hover::before, .site-product:hover::after { opacity: 1; }
.site-product h3 { margin: var(--ex-space-2) 0 0 !important; font-size: var(--ex-text-xl); }
.ex .site-product p { margin: 0; flex: 1; }
.site-product__more { display: inline-flex; align-items: center; gap: 6px; color: var(--ex-accent); font-weight: var(--ex-weight-medium); }
.site-product__more svg { width: 16px; height: 16px; transition: transform var(--ex-duration-base) var(--ex-ease); }
.site-product:hover .site-product__more svg { transform: translateX(4px); }
.site-product__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ex-space-3); }


/* ---------- Säulen / Funktionen ---------- */
.site-pillars { display: grid; gap: var(--ex-space-6) var(--ex-space-5); grid-template-columns: repeat(4, 1fr); }
.site-features { display: grid; gap: var(--ex-space-4); grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1040px) { .site-pillars, .site-features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .site-pillars, .site-features { grid-template-columns: 1fr; } }

.site-pillar h3, .site-feature h3 { font-size: var(--ex-text-lg) !important; margin: var(--ex-space-4) 0 var(--ex-space-2) !important; }
.ex .site-pillar p, .ex .site-feature p { margin: 0; }
.site-icon {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px;
  background: var(--ex-bg-3); border: 1px solid var(--ex-border-strong); color: var(--ex-accent-hover);
}
.site-icon svg { width: 20px; height: 20px; }
.site-feature { padding: var(--ex-space-5); background: var(--ex-bg-2); border: 1px solid var(--ex-border); border-radius: var(--ex-radius-lg); transition: border-color var(--ex-duration-base) var(--ex-ease); }
.site-feature:hover { border-color: var(--ex-border-strong); }


/* ---------- Zweispaltig (Text + Bild) ---------- */
.site-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ex-space-7); align-items: center; }
@media (max-width: 900px) { .site-split { grid-template-columns: 1fr; gap: var(--ex-space-6); } }


/* ---------- Formate ---------- */
.site-formats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ex-space-4); }
@media (max-width: 900px) { .site-formats { grid-template-columns: 1fr; } }
.site-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--ex-space-3); }
.site-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--ex-radius-sm); font-family: var(--ex-font-mono); font-size: var(--ex-text-xs); color: var(--ex-text-2); background: var(--ex-bg-3); border: 1px solid var(--ex-border); }
.site-chip--accent { color: #8ec2ff; background: var(--ex-accent-soft); border-color: rgba(47, 140, 255, 0.3); }


/* ---------- Aufruf am Seitenende ---------- */
.site-cta {
  position: relative; overflow: hidden; text-align: center; padding: 88px var(--ex-space-5);
  border: 1px solid var(--ex-border); border-radius: 18px;
  background: radial-gradient(70% 90% at 50% 120%, rgba(47, 140, 255, 0.26), transparent 70%), var(--ex-bg-2);
}
.site-cta .ex-row { justify-content: center; }
.site-cta::after {
  content: ""; position: absolute; left: 15%; right: 15%; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(90, 166, 255, 0.9), transparent);
}
@media (max-width: 760px) { .site-cta { padding: 56px var(--ex-space-4); } }


/* ---------- Fußzeile ---------- */
.site-footer { border-top: 1px solid var(--ex-border); padding: 56px 0 40px; margin-top: 104px; background: var(--ex-bg-0); }
.site-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--ex-space-6); }
.site-footer h4 { margin: 0 0 var(--ex-space-3); font-size: var(--ex-text-sm); font-weight: var(--ex-weight-semibold); color: var(--ex-text); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ex-space-2); }
.ex .site-footer a:not([class*="ex-"]) { color: var(--ex-text-2); }
.ex .site-footer a:not([class*="ex-"]):hover { color: var(--ex-text); text-decoration: none; }
.site-footer__bottom { margin-top: var(--ex-space-7); padding-top: var(--ex-space-5); border-top: 1px solid var(--ex-border); font-size: var(--ex-text-xs); color: var(--ex-text-3); display: flex; justify-content: space-between; gap: var(--ex-space-4); flex-wrap: wrap; }
@media (max-width: 700px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } .site-footer__brand { grid-column: 1 / -1; } }


/* ---------- Download-Seite ---------- */
.site-download { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; overflow: hidden; padding: 0 !important; }
.site-download__main { padding: var(--ex-space-7) var(--ex-space-6); border-right: 1px solid var(--ex-border); background: radial-gradient(80% 80% at 0% 100%, rgba(47, 140, 255, 0.14), transparent 70%); }
.site-download__steps { padding: var(--ex-space-7) var(--ex-space-6); }
.site-download__file { display: flex; align-items: center; gap: var(--ex-space-4); margin-bottom: var(--ex-space-6); }
.site-download__file img { width: 64px; height: 64px; }
.site-download__name { font-size: var(--ex-text-xl); font-weight: var(--ex-weight-semibold); }
.site-download__status { margin-top: var(--ex-space-4); }
@media (max-width: 860px) {
  .site-download { grid-template-columns: 1fr; }
  .site-download__main { border-right: 0; border-bottom: 1px solid var(--ex-border); padding: var(--ex-space-6) var(--ex-space-5); }
  .site-download__steps { padding: var(--ex-space-6) var(--ex-space-5); }
}
.site-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ex-space-5); counter-reset: step; }
.site-steps li { display: grid; grid-template-columns: 32px 1fr; gap: var(--ex-space-3); counter-increment: step; }
.site-steps li::before {
  content: counter(step); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font-weight: var(--ex-weight-semibold); font-size: var(--ex-text-sm); color: #8ec2ff;
  background: var(--ex-accent-soft); border: 1px solid rgba(47, 140, 255, 0.3);
}
.site-steps strong { display: block; color: var(--ex-text); margin: 5px 0 2px; }
.site-steps span { color: var(--ex-text-2); }
.site-table-wrap { overflow-x: auto; }
.site-table-app { display: flex; align-items: center; gap: var(--ex-space-3); font-weight: var(--ex-weight-medium); }
.site-table-app .site-appicon { width: 32px; height: 32px; }
.site-table-app .site-appicon__badge { width: 16px; height: 16px; top: -4px; right: -4px; }
.site-table-app .site-appicon__badge svg { width: 8px; height: 8px; }


/* ---------- Was ist neu ---------- */
.site-releases { display: grid; gap: var(--ex-space-4); }
.site-release { display: grid; grid-template-columns: 200px 1fr; gap: var(--ex-space-6); padding: var(--ex-space-6) !important; }
.site-release__side { display: flex; flex-direction: column; gap: var(--ex-space-3); }
.site-release__app { display: flex; align-items: center; gap: var(--ex-space-3); font-weight: var(--ex-weight-semibold); font-size: var(--ex-text-lg); }
.site-release__version { font-size: var(--ex-text-3xl); font-weight: var(--ex-weight-semibold); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.site-release__meta { font-size: var(--ex-text-xs); color: var(--ex-text-3); display: grid; gap: 2px; }
.site-release__notes { color: var(--ex-text-2); }
.site-release__notes ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.site-release__notes li::marker { color: var(--ex-accent); }
.site-release__notes h4 { margin: var(--ex-space-4) 0 var(--ex-space-2); color: var(--ex-text); font-size: var(--ex-text-md); }
.site-release__notes h4:first-child { margin-top: 0; }
.site-release__notes p { margin: 0 0 var(--ex-space-2); }
.site-release--empty { color: var(--ex-text-3); }
@media (max-width: 760px) { .site-release { grid-template-columns: 1fr; gap: var(--ex-space-4); padding: var(--ex-space-5) !important; } }
.site-skeleton { height: 160px; border-radius: var(--ex-radius-lg); background: linear-gradient(90deg, var(--ex-bg-2), var(--ex-bg-3), var(--ex-bg-2)); background-size: 200% 100%; animation: site-shimmer 1.4s linear infinite; border: 1px solid var(--ex-border); }
@keyframes site-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }


/* ---------- Einblenden beim Scrollen ----------
   Nur wenn JavaScript läuft (Klasse "js" auf <html>), sonst ist alles sofort sichtbar. */
.js [data-reveal] { opacity: 0; transform: translateY(8px); transition: opacity var(--site-reveal) var(--ex-ease), transform var(--site-reveal) var(--ex-ease); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
.js [data-reveal].d1 { transition-delay: 80ms; }
.js [data-reveal].d2 { transition-delay: 160ms; }
.js [data-reveal].d3 { transition-delay: 240ms; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; }
}


/* ==========================================================================
   Gezeichnetes Programmfenster ("mock-") – nur noch für Embyx Cloud,
   solange es von der Cloud keinen echten Screenshot gibt.
   Sie skalieren mit ihrer Breite (Container-Einheiten "cqw").
   ========================================================================== */
.site-shot { position: relative; margin: 0; }
.site-shot::before {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: -40px; height: 120px; z-index: -1;
  background: radial-gradient(closest-side, rgba(47, 140, 255, 0.28), transparent); filter: blur(10px);
}
.site-shot figcaption { margin-top: var(--ex-space-4); text-align: center; font-size: var(--ex-text-xs); color: var(--ex-text-3); }

.mock {
  container-type: inline-size; position: relative; isolation: isolate;
  border: 1px solid var(--ex-border-strong); border-radius: 12px; overflow: hidden;
  background: var(--ex-bg-0); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  user-select: none;
}
.mock * { box-sizing: border-box; }
.mock__titlebar { display: flex; align-items: center; gap: 1cqw; height: max(22px, 3.2cqw); padding: 0 1.4cqw; border-bottom: 1px solid var(--ex-border); background: #070a12; font-size: max(8px, 1.05cqw); color: var(--ex-text-3); }
.mock__titlebar img { width: max(12px, 1.6cqw); height: max(12px, 1.6cqw); }
.mock__titlebar b { color: var(--ex-text-2); font-weight: 500; }
.mock__winbtns { margin-left: auto; display: flex; gap: 2.2cqw; letter-spacing: 0; }
.mock__body { display: grid; font-size: max(7px, 0.95cqw); color: var(--ex-text-3); }
.mock-panel { background: var(--ex-bg-2); border-color: var(--ex-border); border-style: solid; border-width: 0; padding: 1.2cqw; min-width: 0; overflow: hidden; }
.mock-head { font-size: max(7px, 0.85cqw); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ex-text-3); margin-bottom: 1cqw; }
.mock-bar { height: max(4px, 0.55cqw); border-radius: 99px; background: var(--ex-bg-4); }

/* --- Embyx Cloud --- */
.mock-cloud .mock__body { grid-template-columns: 22% 1fr; height: 50cqw; }
.mock-cloud .mock-nav { background: var(--ex-bg-0); border-right-width: 1px; display: flex; flex-direction: column; gap: 0.5cqw; }
.mock-nav__brand { display: flex; align-items: center; gap: 0.8cqw; font-size: max(8px, 1.2cqw); font-weight: 600; color: var(--ex-text); margin-bottom: 1.6cqw; }
.mock-nav__brand img { width: 2.2cqw; height: 2.2cqw; }
.mock-nav__item { display: flex; align-items: center; gap: 0.9cqw; height: 3cqw; padding: 0 0.9cqw; border-radius: 0.5cqw; color: var(--ex-text-2); position: relative; }
.mock-nav__item::before { content: ""; width: 1.2cqw; height: 1.2cqw; border: max(1px, 0.14cqw) solid currentColor; border-radius: 0.25cqw; opacity: 0.7; }
.mock-nav__item.is-active { background: var(--ex-accent-soft); color: var(--ex-text); }
.mock-nav__item.is-active::after { content: ""; position: absolute; left: 0; top: 0.7cqw; bottom: 0.7cqw; width: 0.25cqw; border-radius: 0 0.2cqw 0.2cqw 0; background: var(--ex-accent); box-shadow: 0 0 0.8cqw var(--ex-accent-glow); }
.mock-storage { margin-top: auto; padding-top: 1.2cqw; border-top: 1px solid var(--ex-border); color: var(--ex-text-2); }
.mock-storage .ex-progress { height: max(3px, 0.4cqw); margin-top: 0.7cqw; }
.mock-cloud .mock-main { padding: 2cqw 2.4cqw; background: var(--ex-bg-1); }
.mock-cloud__top { display: flex; align-items: center; gap: 1.2cqw; margin-bottom: 2cqw; }
.mock-search { flex: 1; height: 3cqw; border-radius: 0.5cqw; border: 1px solid var(--ex-border-strong); background: var(--ex-bg-0); display: flex; align-items: center; padding: 0 1cqw; color: var(--ex-text-3); }
.mock-upload { height: 3cqw; padding: 0 1.6cqw; border-radius: 0.5cqw; background: var(--ex-accent); color: #fff; display: grid; place-items: center; font-weight: 500; }
.mock-folders { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2cqw; margin-bottom: 2cqw; }
.mock-folder { padding: 1.2cqw; border-radius: 0.7cqw; border: 1px solid var(--ex-border); background: var(--ex-bg-2); color: var(--ex-text); }
.mock-folder::before { content: ""; display: block; width: 2.6cqw; height: 2cqw; margin-bottom: 1cqw; border-radius: 0.3cqw; background: linear-gradient(180deg, #5aa6ff, #1f6fe0); clip-path: polygon(0 0, 40% 0, 50% 18%, 100% 18%, 100% 100%, 0 100%); opacity: 0.9; }
.mock-folder small { display: block; color: var(--ex-text-3); font-size: max(7px, 0.8cqw); }
.mock-rows { border: 1px solid var(--ex-border); border-radius: 0.7cqw; background: var(--ex-bg-2); }
.mock-row { display: grid; grid-template-columns: 1fr 14% 18%; align-items: center; height: 3.6cqw; padding: 0 1.2cqw; border-bottom: 1px solid var(--ex-border); color: var(--ex-text-2); }
.mock-row:last-child { border-bottom: 0; }
.mock-row:first-child { color: var(--ex-text-3); height: 2.8cqw; }
.mock-row b { color: var(--ex-text); font-weight: 500; }

/* Handy: Seitenbereiche in den Zeichnungen schmaler bzw. ausblenden */
@container (max-width: 520px) {
  .mock-cloud .mock__body { grid-template-columns: 0 1fr; }
  .mock-cloud .mock-nav { padding: 0; border-width: 0; }
  .mock-folders { grid-template-columns: repeat(2, 1fr); }
  .mock-folder:nth-child(n+3) { display: none; }
}

/* ---------- kleine Abstände ---------- */
.site-hero .site-lead { margin-inline: auto; }
.ex p.site-footer__text { margin-top: var(--ex-space-3); }
.ex p.site-chips-note { margin-top: var(--ex-space-4); }
.site-download-extra { margin-top: var(--ex-space-4); gap: var(--ex-space-4); align-items: stretch; }
.site-split .ex-row { align-items: flex-start; flex-wrap: nowrap; }
.site-split .ex-row strong { display: block; margin-bottom: 2px; }
.site-pagehead .ex-row:empty { display: none; }

/* Links, die wie Buttons aussehen, nie unterstreichen */
.ex a.ex-btn, .ex a.ex-btn:hover { text-decoration: none; }
.site-cta .site-lead { margin-inline: auto; }
/* Leuchten im Seitenkopf darf die Seite nicht breiter machen */
.site-pagehead, .site-hero { overflow-x: clip; }
.site-pagehead { overflow: hidden; }

/* "hidden" muss immer gewinnen, auch gegen ex-btn / ex-badge / ex-alert */
[hidden] { display: none !important; }
.site-appicon { display: inline-block; }
.site-table-wrap { margin-top: var(--ex-space-4); }


/* ---------- Echte Screenshots ---------- */
.site-zoom {
  display: block; width: 100%; padding: 0; margin: 0; font: inherit; cursor: zoom-in;
  background: var(--ex-bg-0); border: 1px solid var(--ex-border-strong); border-radius: 12px; overflow: hidden;
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.8);
  transition: border-color var(--ex-duration-base) var(--ex-ease), transform var(--ex-duration-slow) var(--ex-ease);
}
.site-zoom:hover { border-color: #34476b; }
.site-zoom img { display: block; width: 100%; height: auto; }
.site-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ex-space-5); align-items: start; }
.site-two--wide { grid-template-columns: 1.6fr 1fr; }
@media (max-width: 760px) { .site-two, .site-two--wide { grid-template-columns: 1fr; } }
.site-tabs { justify-content: center; margin-bottom: var(--ex-space-6); }
.site-video { display: block; width: 100%; border-radius: 12px; border: 1px solid var(--ex-border-strong); background: #000; box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.8); }
.site-video__cap { margin-top: var(--ex-space-4); text-align: center; font-size: var(--ex-text-xs); color: var(--ex-text-3); }

/* Großansicht beim Klick auf einen Screenshot */
.ex-dialog.site-lightbox { width: min(1400px, calc(100vw - 24px)); max-width: none; max-height: calc(100vh - 24px); background: var(--ex-bg-0); }
.site-lightbox img { display: block; width: 100%; height: auto; max-height: calc(100vh - 110px); object-fit: contain; }
.site-video { max-width: 880px; margin-inline: auto; }