/* ==========================================================================
   LA Department, demo.css
   Die Vorher/Nachher-Demo: ein Laptop, in dem zwei komplette Mini-Websites
   übereinander liegen. Herausgelöst aus style.css, damit die Startseite ihr
   Farbschema wechseln kann, ohne dass das Gerät mitwandert.

   Das Gerät bringt seine eigenen Tokens mit. Ein Laptop ist dunkel, egal wie
   hell die Seite drumherum ist, und die 2009er-Vorlage darin ist absichtlich
   hässlich. Beides darf nicht am Seiten-Theme hängen.
   ========================================================================== */

.demo {
  --ink: #08080a;
  --ink-raised: #101014;
  --ink-line: rgba(244, 242, 239, 0.14);
  --ink-line-soft: rgba(244, 242, 239, 0.07);
  --paper: #f4f2ef;
  --paper-dim: rgba(244, 242, 239, 0.58);
  --paper-faint: rgba(244, 242, 239, 0.51);
  --wine: #cf3a52;
  --wine-text: #d45468;
  --wine-solid: #bc354b;
  --radius-pill: 999px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.6s;
  --dur-fast: 0.28s;
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- Coding panel demo: laptop with a before/after wipe ----------
   It sits in the LAC panel, not in the hero: the hero speaks for all three
   disciplines, and a website comparison up top made the whole studio read as
   a web agency. Here it is evidence for the paragraph above it.
   The two panes are real pages authored at 1120x700 and scaled to fit the
   screen, so the proportions read as a website rather than as a graphic.
   --mini-scale is written by JS from the measured screen width. */
.demo {
  position: relative;
  width: 100%;
  /* Above 860px the panel is pinned at exactly 100svh and clips its overflow,
     so the device has to earn its height. The reserve covers the rest of the
     column at its worst case, which is the narrow two-column range just above
     the breakpoint where the paragraph wraps to seven lines. On wide screens
     the 620px cap is what binds. 1.6 is the screen aspect (1120/700). */
  max-width: min(620px, max(280px, (100svh - 400px) * 1.6));
  margin-top: clamp(28px, 4vh, 44px);
}

.laptop {
  position: relative;
  filter: drop-shadow(0 30px 56px rgba(8, 8, 10, 0.62));
}

.laptop__lid {
  /* The bezel is a token so the handle, which is a sibling of the screen,
     can line up with the screen box without repeating the numbers. */
  --lid-x: 12px;
  --lid-t: 12px;
  --lid-b: 20px;
  position: relative;
  padding: var(--lid-t) var(--lid-x) var(--lid-b);
  /* Flat surface, hairline edge, near-square corners: the same vocabulary as
     the rest of the page. A glossy gradient shell read as a stock render. */
  border: 1px solid var(--ink-line);
  border-radius: 3px 3px 0 0;
  /* Lighter than the screen it holds. Once the built page went dark too, a
     bezel at --ink-raised left no readable edge between device and content. */
  background: #17171d;
}

.laptop__cam {
  position: absolute;
  top: 5px;
  left: 50%;
  width: 3px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--ink-line);
  transform: translateX(-50%);
}

.laptop__screen {
  position: relative;
  aspect-ratio: 1120 / 700;
  overflow: hidden;
  background: var(--ink);
}

/* Base and its trackpad notch. Two elements, no illustration. */
.laptop__base {
  position: relative;
  width: 114%;
  height: 11px;
  margin-left: -7%;
  border: 1px solid var(--ink-line);
  border-top: none;
  border-radius: 0 0 3px 3px;
  background: #17171d;
}

.laptop__base span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 13%;
  height: 3px;
  background: var(--ink);
  transform: translateX(-50%);
}

.compare {
  position: absolute;
  inset: 0;
  cursor: ew-resize;
}

.compare__pane {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* The built version sits on top and is clipped open from the left.
   clip-path stays on the compositor; JS writes it directly on this
   element rather than through an inherited custom property. */
/* Resting at 45 percent, not at 0. Without JS the handle cannot move, so a
   0 percent default would leave the built page permanently unreachable and
   the device would just show the bad template. JS takes it to 0 itself
   before performing the reveal. */
.compare__pane--new {
  clip-path: inset(0 55% 0 0);
}

.compare.is-eased .compare__pane--new {
  transition: clip-path 0.42s var(--ease);
}

.demoseite {
  position: absolute;
  top: 0;
  left: 0;
  width: 1120px;
  height: 700px;
  transform: scale(var(--mini-scale, 0.5));
  transform-origin: 0 0;
  font-synthesis: initial;
  text-transform: none;
  letter-spacing: normal;
}

/* ---------- Mini site A: the template ---------- */
.demoseite--old {
  background: linear-gradient(180deg, #c8d6ea 0%, #eef2f7 22%, #eef2f7 100%);
  font-family: "Times New Roman", Times, serif;
  color: #111;
  padding: 22px 90px;
}

.demoseite--old .o-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 16px 20px;
  border: 2px solid #0a2f7a;
  border-bottom: none;
  background: linear-gradient(180deg, #2a5bbf 0%, #16388a 100%);
}

.demoseite--old .o-title {
  font-family: "Comic Sans MS", "Chalkboard SE", cursive;
  font-size: 40px;
  font-weight: 700;
  color: #ffd84d;
  text-shadow: 2px 2px 0 #06215c;
}

.demoseite--old .o-claim {
  font-size: 15px;
  font-style: italic;
  color: #fff;
}

.demoseite--old .o-nav {
  display: flex;
  gap: 3px;
  padding: 5px;
  border: 2px solid #0a2f7a;
  border-top: none;
  border-bottom: none;
  background: #d4d0c8;
}

.demoseite--old .o-nav span {
  padding: 5px 13px;
  border: 2px outset #f2f2f2;
  background: #ece9e1;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #0026a3;
  text-decoration: underline;
}

.demoseite--old .o-body {
  display: flex;
  gap: 16px;
  padding: 16px;
  border: 2px solid #0a2f7a;
  border-top: none;
  background: #fff;
}

.demoseite--old .o-side {
  flex: 0 0 190px;
}

.demoseite--old .o-box {
  margin-bottom: 14px;
  border: 2px groove #9fb4d8;
  background: #eef3fb;
}

.demoseite--old .o-box-h {
  padding: 4px 8px;
  background: #16388a;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

.demoseite--old .o-links {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 9px;
}

.demoseite--old .o-links span {
  font-size: 14px;
  color: #0026a3;
  text-decoration: underline;
}

.demoseite--old .o-counter {
  margin: 9px auto 4px;
  width: fit-content;
  padding: 3px 9px;
  background: #000;
  font-family: "Courier New", monospace;
  font-size: 19px;
  letter-spacing: 3px;
  color: #35ff5e;
}

.demoseite--old .o-upd {
  padding: 0 9px 10px;
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
  color: #444;
}

.demoseite--old .o-hours {
  display: grid;
  grid-template-columns: auto auto;
  gap: 5px 8px;
  padding: 9px;
  font-size: 13px;
}

.demoseite--old .o-hours span:nth-child(even) {
  text-align: right;
}

.demoseite--old .o-main {
  flex: 1;
}

.demoseite--old .o-welcome {
  padding-bottom: 7px;
  border-bottom: 1px solid #c00;
  font-size: 27px;
  font-weight: 700;
  text-align: center;
  color: #c00;
}

.demoseite--old .o-new {
  margin: 9px 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  color: #e00;
}

.demoseite--old .o-text {
  margin-bottom: 9px;
  font-size: 15px;
  line-height: 1.45;
  text-align: justify;
}

.demoseite--old .o-imgbox {
  display: grid;
  place-items: center;
  height: 96px;
  margin: 12px 0;
  border: 2px inset #b9c6dd;
  background: #f4f6fa;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  color: #7b8798;
}

.demoseite--old .o-mail {
  font-size: 14px;
  text-align: center;
  color: #0026a3;
  text-decoration: underline;
}

.demoseite--old .o-foot {
  padding: 8px;
  border: 2px solid #0a2f7a;
  border-top: none;
  background: #16388a;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  text-align: center;
  color: #c9d6ef;
}

/* ---------- Mini site B: the same company, built in this studio's language
   Same tokens, same type, same hairline discipline as the page around it, so
   the screen reads as this studio's work. It sits a shade above the page's
   own --ink, otherwise a dark screen on a dark page stops looking switched
   on. ---------- */
.demoseite--new {
  --n-ink: #0c0c10;
  --n-paper: #f4f2ef;
  --n-dim: rgba(244, 242, 239, 0.58);
  --n-faint: rgba(244, 242, 239, 0.51);
  --n-line: rgba(244, 242, 239, 0.14);
  --n-accent: #cf3a52;
  --n-accent-solid: #bc354b;
  /* Kein weicher Lichtfleck hinter der Überschrift. Stattdessen eine Kante
     Wärme, die von oben rechts hereinläuft: gerichtet statt schwebend. */
  background:
    linear-gradient(202deg, rgba(207, 58, 82, 0.2) 0%, rgba(207, 58, 82, 0) 38%),
    var(--n-ink);
  color: var(--n-paper);
  font-family: var(--font-display);
  padding: 0 76px;
  display: flex;
  flex-direction: column;
}

.demoseite--new .n-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px 0 0;
}

.demoseite--new .n-mark {
  font-variation-settings: "wght" 800, "wdth" 108;
  font-size: 17px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.demoseite--new .n-links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--n-dim);
}

.demoseite--new .n-phone {
  padding: 11px 20px;
  border-radius: var(--radius-pill);
  background: var(--n-paper);
  font-weight: 600;
  color: var(--n-ink);
}

.demoseite--new .n-hero {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  align-items: end;
  gap: 46px;
  padding: 66px 0 56px;
  flex: 1;
}

.demoseite--new .n-copy h2 {
  font-variation-settings: "wght" 800, "wdth" 108;
  font-size: 54px;
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.demoseite--new .n-copy p {
  max-width: 40ch;
  margin-top: 24px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--n-dim);
}

.demoseite--new .n-cta {
  display: flex;
  gap: 10px;
  margin-top: 34px;
}

/* Wine rather than paper here: at the resting wipe position this button is
   the only accent surface on screen, and the accent is what identifies the
   page as this studio's work. */
.demoseite--new .n-btn {
  padding: 14px 28px;
  border: 1px solid var(--n-accent-solid);
  border-radius: var(--radius-pill);
  background: var(--n-accent-solid);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--n-paper);
}

.demoseite--new .n-btn--ghost {
  border-color: var(--n-line);
  background: transparent;
  color: var(--n-paper);
}

/* The one filled accent surface on the page, same role the wine block plays
   in the sections below the hero. */
.demoseite--new .n-panel {
  padding: 30px 28px;
  background: var(--n-accent-solid);
  color: var(--n-paper);
}

.demoseite--new .n-panel-num {
  font-variation-settings: "wght" 800, "wdth" 108;
  font-size: 58px;
  line-height: 0.86;
  letter-spacing: -0.04em;
}

.demoseite--new .n-panel-num span {
  font-size: 24px;
}

.demoseite--new .n-panel-lbl {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.demoseite--new .n-panel-note {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(244, 242, 239, 0.8);
}

.demoseite--new .n-svc {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--n-line);
}

.demoseite--new .n-svc-h {
  display: block;
  font-variation-settings: "wght" 600, "wdth" 104;
  font-size: 16px;
}

.demoseite--new .n-svc-p {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--n-dim);
}

.demoseite--new .n-foot {
  display: flex;
  justify-content: space-between;
  padding: 28px 0 32px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--n-faint);
}

/* ---------- Wipe handle and legend ---------- */
/* Only JS can move it, so without JS it is not shown at all rather than
   sitting at an edge it cannot leave. The pane's CSS default still shows
   both halves, so the comparison survives. */
.compare__handle {
  display: none;
}

.js .compare__handle {
  display: block;
  position: absolute;
  top: var(--lid-t);
  bottom: var(--lid-b);
  left: var(--lid-x);
  width: 2px;
  background: var(--wine);
  cursor: ew-resize;
  touch-action: none;
  will-change: transform;
}

.compare__handle.is-eased {
  transition: transform 0.42s var(--ease);
}

.compare__grip {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-pill);
  background: var(--wine-solid);
  box-shadow: 0 6px 18px rgba(8, 8, 10, 0.44);
  transform: translate(-50%, -50%);
  transition: transform 0.16s var(--ease);
}

.compare__handle:active .compare__grip {
  transform: translate(-50%, -50%) scale(0.94);
}

.compare__handle:focus-visible {
  outline: none;
}

.compare__handle:focus-visible .compare__grip {
  outline: 2px solid var(--paper);
  outline-offset: 3px;
}

/* Chevrons drawn from borders. No icon library ships with this page. */
.chev {
  width: 6px;
  height: 6px;
  border-top: 2px solid var(--paper);
  border-right: 2px solid var(--paper);
}

.chev--l {
  transform: rotate(-135deg);
}

.chev--r {
  transform: rotate(45deg);
}