/* ================================================ FOUNDATION
   Tokens, line system, type face and browser surfaces. */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-variable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand colour, unchanged from the logos */
  --indigo: #4930ad;
  --indigo-deep: #36228a;
  --byt: #f9e24c;
  --fun-cyan: #009fe3;
  --fun-yellow: #ffe500;

  /* Neutrals */
  --paper: #fbfbfd;
  --ink: #15122b;
  --ink-2: #504b6a;
  --ink-3: #8a85a3;
  --hair: rgb(21 18 43 / 0.16);

  /* Line system. Nothing else draws a line.
     l1  secondary divider (hairline, --hair)
     l2  primary MaRe structure (always indigo)
     l4  rare brand accent (one per brand world, brand colour)
     Anything thicker is a colour field, not a border. */
  --l1: 1px;
  --l2: 2px;
  --l4: 4px;

  /* Archivo vertical metrics (upm 1000): ascent .878, descent .210, cap .686 */
  --asc: 0.878;
  --desc: 0.21;
  --cap: 0.686;

  /* Motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);

  --pad: clamp(20px, 3.4vw, 56px);
  --mast-h: 72px;

  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--ink-3) transparent;
  scrollbar-width: thin;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Archivo", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  font-kerning: normal;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
p,
dl,
dd,
ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

::selection {
  background: var(--indigo);
  color: var(--paper);
}

:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 4px;
}

/* the icon sprite holds symbols and the BYT clip path; it never takes room */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.i {
  width: 1em;
  height: 1em;
  flex: none;
  fill: currentColor;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: var(--pad);
  top: -100px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--paper);
}

.skip:focus {
  top: 12px;
}

/* ================================================ MaRe Handels GmbH · site
   One family, one line, one motion grammar.

   TYPE  Archivo variable only (wght 100-900, wdth 62-125), self-hosted.
     display  hero, process and closing sentence: uppercase 800, ONE fitted size per
              composition (process = closing sentence size); rows are set on the width
              axis (then tracking), never by size
     world    brand claims: uppercase 800; BYT condensed (wdth 62), werbeartikel.fun normal (100)
     name     brand names: one size; BYT 760/62 uppercase, werbeartikel.fun 700 in its own lowercase
     lead     400, 17-21px · body 400, 17px · label 640/82, 12.5px, uppercase, .08em
     key      620/96, 15px, sentence case (URLs keep their spelling); stretches to 112 on hover

   LINES  1px hair: subdivision only (masthead, footer)
          2px indigo: the MaRe line, the one structural thread through the page
          4px brand colour: the two brand halves of that line, and one fact rule per brand
          anything larger is a field, not a line */

:root {
  --gap: 24px;
  --fun-field: #0096d8; /* werbeartikel.fun brand field */
  --panel: 40%;         /* width of a brand field */
  --lh-caps: 0.86;      /* uppercase-only line height: no descenders to protect */
  --key-h: 52px;
  --fs-display: clamp(3rem, 10vw, 11rem); /* refined by a.js: one size for all rows */
  --fs-name: clamp(2.6rem, 7.6vw, 8.5rem);
  --fs-byt: min(11vw, 15svh);
  --fs-fun: min(6.6vw, 11svh);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
}

/* ------------------------------------------------ shared roles */

.label {
  font-size: 12.5px;
  font-weight: 640;
  font-variation-settings: "wdth" 82;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.lead {
  max-width: 40ch;
  color: var(--ink-2);
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.3125rem);
  line-height: 1.5;
}

.nw {
  white-space: nowrap;
}

section[id],
nav[id] {
  scroll-margin-top: var(--mast-h);
}

/* First paint: nothing in <main> shows until the font is in, the type is fitted and every
   layer has its starting state. The first visible frame is the intro's first frame. */
html.js:not(.is-ready) .home main {
  visibility: hidden;
}

/* ------------------------------------------------ masthead */

.mast {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 40px;
  height: var(--mast-h);
  padding: 0 var(--pad);
  background: var(--paper);
  border-bottom: var(--l1) solid var(--hair);
}

/* header-only wordmark (MARE without the subline): larger letters, same bar height */
.mast__logo img {
  width: auto;
  height: 30px;
}

.mast__nav {
  display: flex;
  gap: 34px;
  margin-left: auto;
  font-size: 13px;
}

/* ------------------------------------------------ links
   The 2px MaRe line used as a pointer: draws in from the left, leaves to the right. */

.u {
  padding-bottom: 3px;
  background: linear-gradient(var(--indigo), var(--indigo)) no-repeat right 100% / 0 var(--l2);
  transition: background-size 300ms var(--ease-out), color 200ms ease;
}

.u--rest {
  font-weight: 600;
  box-shadow: inset 0 calc(-1 * var(--l1)) 0 var(--hair);
}

/* ------------------------------------------------ keys
   One component: 52px, square, label + icon cell. Brands change colour, never shape.
   Hover speaks the page's own language: the fill is drawn in from the left like every
   line, the label stretches on the width axis, the icon is replaced by its twin. */

.key {
  --key-bg: var(--indigo);
  --key-fg: var(--paper);
  --key-fill: var(--ink);
  --key-fill-fg: var(--paper);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: var(--key-h);
  padding: 0 18px 0 22px;
  overflow: hidden;
  background: var(--key-bg);
  color: var(--key-fg);
  font-size: 15px;
  font-weight: 620;
  line-height: 1;
  white-space: nowrap;
  transition: transform 140ms var(--ease-out), color 240ms ease;
}

.key::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--key-fill);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 320ms var(--ease-out);
}

/* The label reserves its stretched width, so the key never changes size on hover. */
.key__label {
  display: grid;
}

.key__t,
.key__sz {
  grid-area: 1 / 1;
  font-variation-settings: "wdth" var(--kw, 96);
}

.key__t {
  transition: font-variation-settings 320ms var(--ease-out);
}

.key__sz {
  --kw: 112;
  visibility: hidden;
}

.key__ico {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  overflow: hidden;
}

.key__ico .i {
  position: absolute;
  inset: 0;
  width: 18px;
  height: 18px;
  transition: transform 300ms var(--ease-out);
}

.key__ico .i + .i {
  transform: translateX(-120%);
}

.key__ico--diag .i + .i {
  transform: translate(-120%, 120%);
}

.key:active {
  transform: scale(0.97);
}

.key--line {
  --key-bg: transparent;
  --key-fg: var(--ink);
  --key-fill: var(--indigo);
  box-shadow: inset 0 0 0 var(--l2) var(--indigo);
}

.key--byt {
  --key-bg: var(--byt);
  --key-fg: var(--ink);
  --key-fill: var(--indigo);
  --key-fill-fg: var(--byt);
}

.key--fun {
  --key-bg: var(--fun-cyan);
  --key-fg: var(--ink);
  --key-fill: var(--fun-yellow);
  --key-fill-fg: var(--ink);
}

.key--byt,
.key--fun {
  min-width: 17.5rem;
}

.key--cta {
  min-width: 17.5rem;
}

.mast__call {
  font-variant-numeric: tabular-nums;
}

@media (hover: hover) and (pointer: fine) {
  .u:hover {
    background-position-x: left;
    background-size: 100% var(--l2);
  }

  .key:hover {
    color: var(--key-fill-fg);
  }

  .key:hover::before {
    clip-path: inset(0 0 0 0);
  }

  .key:hover .key__t {
    --kw: 112;
  }

  .key:hover .key__ico .i {
    transform: translateX(120%);
  }

  .key:hover .key__ico .i + .i {
    transform: translate(0, 0);
  }

  .key:hover .key__ico--diag .i {
    transform: translate(120%, -120%);
  }

  .key:hover .key__ico--diag .i + .i {
    transform: translate(0, 0);
  }
}

/* ------------------------------------------------ display rows (hero + closing sentence) */

.rows {
  display: block;
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: var(--lh);
  letter-spacing: 0;
  text-transform: uppercase;
  --lh: var(--lh-caps);
}

.row {
  position: relative;
  display: block;
  white-space: nowrap;
}

/* Each row is its own mask. Top room for umlauts; the bottom edge sits exactly where the
   MaRe line runs (baseline + 0.07em), so words can sink into the line.
   In a line box of height L the baseline sits at L/2 + 0.334em (Archivo 0.878 / 0.21). */
.row__mask {
  display: block;
  clip-path: inset(-0.3em -100vw calc(var(--lh) * 0.5em - 0.404em) -100vw);
}

.row__t {
  display: inline-block;
  margin-right: calc(-1 * var(--ls, 0px));
  font-variation-settings: "wdth" var(--wdth, 112);
  letter-spacing: var(--ls, 0);
}

.w {
  display: inline-block;
}

.w--key {
  color: var(--indigo);
}

/* the MaRe line, first appearance: under "Marken auf" (static and small screens;
   on the held stage the two split halves draw it) */
.row--key::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--lh) * 0.5em + 0.404em);
  height: var(--l2);
  background: var(--indigo);
  transform: scaleX(var(--draw, 1));
  transform-origin: left;
}

/* ------------------------------------------------ hero */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4vh;
  min-height: calc(100svh - var(--mast-h));
  padding: clamp(16px, 3.6vh, 44px) var(--pad) clamp(24px, 4.5vh, 52px);
}

.hero__foot {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: end;
}

.hero__lead {
  grid-column: 1 / 7;
}

.acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
}

.hero__foot .acts {
  grid-column: 7 / 13;
  justify-content: flex-end;
}

/* ------------------------------------------------ brand index: one line, split in two
   BRAND YOUR TOWELS stands on the yellow half, werbeartikel.fun hangs from the cyan half. */

.index {
  position: relative;
  height: calc(100svh - var(--mast-h));
  min-height: 520px;
}

.split {
  position: absolute;
  top: calc(50% - 2px);
  width: 50%;
  height: var(--l4);
  transform-origin: 0 0;
}

.split--l {
  left: 0;
  background: var(--byt);
  clip-path: inset(0 6px 0 0);
}

.split--r {
  right: 0;
  background: var(--fun-cyan);
  clip-path: inset(0 0 0 6px);
}

.brand {
  position: absolute;
  display: block;
  font-size: var(--fs-name);
  line-height: var(--lh-caps);
  white-space: nowrap;
}

.brand__mask {
  display: block;
}

/* One font size for both names (a.js); the width axis gives each its voice:
   Brand Your Towels condensed (62), werbeartikel.fun near normal (solved to the same
   measure). --hw is the hover stretch. */
.brand__name {
  display: inline-block;
  font-variation-settings: "wdth" calc(var(--wdth) + var(--hw, 0));
}

/* each name stands on its half of the line: baseline 0.11em above it, the mask ends
   where the line begins, so the names rise out of their halves */
.brand--byt,
.brand--fun {
  bottom: calc(50% + 2px + 0.11em - 0.096em);
}

.brand--byt {
  left: var(--pad);
}

.brand--fun {
  left: calc(50% + 6px + var(--pad));
}

.brand__mask {
  clip-path: inset(-0.3em -0.3em 0.014em -0.3em);
}

.brand--byt .brand__name {
  --wdth: 62;
  font-weight: 760;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.brand--fun .brand__name {
  --wdth: 100;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.brand__dot {
  color: var(--fun-cyan);
}

.brand__meta {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 640;
  font-variation-settings: "wdth" 82;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.brand__meta .i {
  font-size: 15px;
  transition: transform 340ms var(--ease-out);
}

/* both descriptors hang under their half of the line */
.brand__meta {
  left: 0.02em;
  top: calc(100% + 30px);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* the one pointer response: the name breathes on its own width axis */
  .brand__name {
    transition: color 240ms ease, font-variation-settings 320ms var(--ease-out);
  }

  .brand:hover {
    --hw: 6;
  }
}

@media (hover: hover) and (pointer: fine) {
  .brand__name {
    transition: color 240ms ease;
  }

  .brand--byt:hover .brand__name {
    color: var(--indigo);
  }

  .brand--fun:hover .brand__name {
    color: var(--fun-cyan);
  }

  .brand:hover .brand__meta .i {
    transform: translateX(4px);
  }
}

/* ------------------------------------------------ brand worlds
   Both: a claim on the left, a brand field on the right. BYT's field unfolds
   vertically from the word "Logo."; werbeartikel.fun's opens from its mark. */

.world {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 5vh;
  min-height: calc(100svh - var(--mast-h));
  padding: 8vh var(--pad) 7vh;
}

.world__field {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--field);
  clip-path: inset(0 0 0 calc(100% - var(--panel)));
}

.world__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--panel);
  display: grid;
  place-items: center;
}

.logo {
  display: block;
  height: auto;
  overflow: visible;
}

.logo--byt {
  width: min(26vw, 470px);
}

.logo--fun {
  width: min(30vw, 520px);
}

.world__title,
.world__body {
  position: relative;
  z-index: 1;
  max-width: calc(100% - var(--panel));
}

.world__title {
  --lh: var(--lh-caps);
  font-weight: 800;
  line-height: var(--lh);
  text-transform: uppercase;
}

.wl {
  display: block;
  white-space: nowrap;
  clip-path: inset(-0.3em -100vw calc(var(--lh) * 0.5em - 0.404em) -100vw);
}

.wl__t {
  display: inline-block;
  font-variation-settings: "wdth" var(--wdth);
}

.wl__key {
  display: inline-block;
  color: var(--indigo);
}

.world--byt {
  --field: var(--byt);
}

.world--byt .world__title {
  --wdth: 62;
  font-size: var(--fs-byt);
  letter-spacing: 0.004em;
}

.world--fun {
  --field: var(--fun-field);
  margin-top: 0;
}

/* the Ü of "FÜR" needs air under the line above */
.world--fun .world__title {
  --lh: 0.98;
  --wdth: 100;
  font-size: var(--fs-fun);
  letter-spacing: -0.02em;
}

.world__body {
  padding-right: var(--gap);
}

.world__claim {
  max-width: 30ch;
  margin-bottom: 30px;
  font-size: clamp(1.375rem, 0.9rem + 1.2vw, 2.125rem);
  font-weight: 560;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.facts {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gap);
  margin-bottom: 34px;
  padding-top: 18px;
}

/* the one brand-accent rule per world */
.facts::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--l4);
  background: var(--accent);
  transform: scaleX(var(--draw, 1));
  transform-origin: left;
}

.world--byt .facts {
  --accent: var(--byt);
}

.world--fun .facts {
  --accent: var(--fun-cyan);
}

.facts dt {
  margin-bottom: 6px;
  color: var(--ink-2);
}

.facts dd {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

/* ------------------------------------------------ process: the MaRe process machine
   construct -> imprint -> scale -> converge, on one stage. Two roles only. Display:
   Archivo 800 uppercase at a normal width (the chapter line, small; the machine's
   words, large). Body: Archivo 400 (the numbered sentence). Without motion the three
   stages are simply listed. */

.flow {
  position: relative;
  padding: 14vh var(--pad) 12vh;
}

.flow__chapter {
  margin-bottom: 9vh;
  font-size: clamp(1.125rem, 0.75rem + 1vw, 1.75rem);
  font-weight: 800;
  font-variation-settings: "wdth" 100;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
}

.psteps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pstep + .pstep {
  margin-top: 8vh;
}

.pstep__word,
.mword {
  margin: 0;
  font-weight: 800;
  font-variation-settings: "wdth" var(--wdth, 100);
  line-height: var(--lh-caps);
  text-transform: uppercase;
  white-space: nowrap;
}

/* static list: each word stands on its own length of the line */
.pstep__word {
  --wdth: var(--pwdth, 100);
  width: fit-content;
  padding-bottom: 0.07em;
  border-bottom: var(--l2) solid var(--indigo);
  font-size: var(--fs-proc, clamp(2rem, 6vw, 6rem));
}

.pstep__note {
  max-width: 44ch;
  margin-top: 18px;
  color: var(--ink-2);
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.3125rem);
  line-height: 1.5;
}

.pstep__no {
  display: inline-block;
  min-width: 2.6em;
  color: var(--indigo);
  font-variant-numeric: tabular-nums;
}

/* the machine (a.js): absolutely placed parts on the stage */
.machine {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.machine > *,
.mline,
.mband {
  position: absolute;
  top: 0;
  left: 0;
}

.mword {
  color: var(--ink);
  font-size: inherit;
}

.mband span,
.mtrack span {
  display: inline-block;
}

.mword--brand {
  color: var(--indigo);
}

.mword--knock {
  color: var(--paper);
}

.mhead {
  background: var(--indigo);
}

/* construction guide at cap height: 1px, gone once the word stands */
.mguide {
  height: var(--l1);
  background: var(--hair);
}

.mline {
  height: var(--l2);
  background: var(--indigo);
}

/* ------------------------------------------------ close: the climax */

.close {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8vh;
  min-height: calc(100svh - var(--mast-h));
  padding: 12vh var(--pad);
}

.close__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
}

.close__alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
}

/* ------------------------------------------------ motion actors (hidden unless a.js runs them) */

.courier,
.drop,
.thread {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  pointer-events: none;
}

.courier {
  z-index: 8;
  width: 100px;
  height: 100px;
  background: var(--byt);
  transform-origin: 50% 50%;
}

.drop {
  z-index: 3;
  width: 100px;
  height: 100px;
  background: var(--indigo);
  transform-origin: 0 0;
}

.thread {
  z-index: 7;
  width: 100%;
  height: var(--l2);
  background: var(--indigo);
}

/* ------------------------------------------------ footer */

.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 40px;
  padding: 28px var(--pad) 36px;
  border-top: var(--l1) solid var(--hair);
  color: var(--ink-2);
  font-size: 15px;
}

.foot__name {
  color: var(--ink);
  font-weight: 600;
}

.foot__addr {
  font-style: normal;
}

.foot__legal {
  display: flex;
  gap: 12px 28px;
  margin-left: auto;
}

.foot__legal a {
  color: var(--ink);
  font-weight: 560;
}

/* ================================================ HELD STAGE (html.m-full)
   Set by a.js on wide, tall viewports when motion is allowed. The act is a tall scroll
   track with one sticky view; normal scrolling drives the timeline. */

html.m-full .view {
  position: sticky;
  top: var(--mast-h);
  height: calc(100vh - var(--mast-h));
  height: calc(100svh - var(--mast-h));
  overflow: clip;
}

html.m-full .layer {
  position: absolute;
  inset: 0;
  min-height: 0;
  height: auto;
  pointer-events: none;
}

html.m-full .layer.is-live {
  pointer-events: auto;
}

html.m-full .hero { z-index: 1; }
html.m-full .index { z-index: 2; }
html.m-full .world--byt { z-index: 3; }
html.m-full .world--fun { z-index: 4; }
html.m-full .flow { z-index: 5; }
html.m-full .close { z-index: 6; }

html.m-full .row--key::after {
  display: none;
}

/* The machine's stage. On the held stage (and on small screens, a short held stage of its
   own) the list becomes the fixed information position: chapter line top left, the
   active sentence under it. The words are drawn by the machine; the list keeps them for
   screen readers. */
html.m-full .flow__stage {
  position: absolute;
  inset: 0;
}

html.m-lite .flow {
  height: 330svh;
  padding: 0;
}

html.m-lite .flow__stage {
  position: sticky;
  top: var(--mast-h);
  height: calc(100svh - var(--mast-h));
  overflow: clip;
}

html.m-full .flow__chapter,
html.m-lite .flow__chapter {
  position: absolute;
  top: 6vh;
  left: var(--pad);
  margin: 0;
}

html.m-full .pstep + .pstep,
html.m-lite .pstep + .pstep {
  margin: 0;
}

html.m-full .pstep__word,
html.m-lite .pstep__word {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
}

html.m-full .pstep__note,
html.m-lite .pstep__note {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  margin: 0;
}

html.m-full .courier,
html.m-full .drop,
html.m-full .thread {
  display: block;
}

html.m-lite .drop {
  display: block;
}

html.m-full .flow {
  padding: 0;
}

html.m-full .close {
  justify-content: center;
  padding: 0 var(--pad);
}

/* ------------------------------------------------ short desktop viewports (1280 x 720) */

@media (min-width: 1024px) and (min-height: 600px) and (max-height: 820px) {
  .hero {
    gap: 2.4vh;
    padding-top: 2vh;
    padding-bottom: 3.4vh;
  }

  .hero__lead {
    grid-column: 1 / 8;
    max-width: 58ch;
    font-size: 1rem;
    line-height: 1.45;
  }

  .hero__foot .acts {
    grid-column: 8 / 13;
  }

  .world {
    padding-top: 6vh;
    padding-bottom: 5vh;
  }

  .world__claim {
    margin-bottom: 20px;
  }

  .facts {
    margin-bottom: 24px;
  }
}

/* ------------------------------------------------ small screens: one column, motion in place */

/* ------------------------------------------------ header below 900px: menu key replaces the row
   (the desktop row needs ~720px plus margins; below that it would crowd) */

@media (max-width: 899px) {
  :root {
    --mast-h: 64px;
  }

  .mast {
    gap: 8px;
  }

  .mast__nav {
    display: none;
  }

  .mast__logo {
    margin-right: auto;
  }

  .mast__logo img {
    height: 24px;
  }

  .mast__call {
    width: var(--key-h);
    padding: 0;
    justify-content: center;
  }

  .mast__call .key__label {
    display: none;
  }

  .mast__menu {
    display: inline-flex;
  }
}

/* ------------------------------------------------ COMPACT MODE: tablets, phones, short landscape
   One column, the same story told in place. Content-driven: below 1024px the brand worlds
   lose the room for a 40% field beside their claims; below 600px height the held stage
   cannot hold a scene. a.js uses the same query for its compact choreography. */

@media (max-width: 1023px), (max-height: 599px) {
  .hero {
    min-height: 0;
    justify-content: flex-start;
    gap: 14vh;
    padding-top: 6vh;
    padding-bottom: 8vh;
  }

  .hero__foot {
    display: block;
  }

  .hero__foot .acts {
    margin-top: 28px;
    justify-content: flex-start;
  }

  /* index: each brand keeps its half of the line, now full width */
  .index {
    display: grid;
    gap: 72px;
    height: auto;
    min-height: 0;
    padding: 14vh var(--pad);
  }

  .split {
    display: none;
  }

  .brand {
    position: static;
    display: grid;
    gap: 16px;
  }

  .brand::after {
    content: "";
    order: 2;
    height: var(--l4);
    margin: 0 calc(-1 * var(--pad));
    background: var(--accent);
    transform: scaleX(var(--draw, 1));
  }

  .brand--byt {
    --accent: var(--byt);
  }

  .brand--byt::after {
    transform-origin: left;
  }

  .brand--fun {
    --accent: var(--fun-cyan);
    text-align: left;
  }

  .brand--fun::after {
    transform-origin: left;
  }

  .brand__mask { order: 1; }
  .brand__meta { order: 3; }

  .brand__meta {
    position: static;
  }

  .brand--byt,
  .brand--fun {
    font-size: var(--fs-name);
  }

  /* type is wider than the screen for a moment while it compresses or stretches */
  .index,
  .flow,
  .close {
    overflow-x: clip;
  }

  .world {
    display: flex;
    min-height: 0;
    overflow-x: clip; /* a claim is wider than the screen while it compresses */
    padding: 12vh var(--pad) 10vh;
    gap: 0;
  }

  .world__title {
    order: 1;
    max-width: none;
    margin-bottom: 36px;
  }

  .world__field {
    order: 2;
    position: relative;
    inset: auto;
    height: min(74vw, 64vh);
    height: min(74vw, 64svh);
    margin: 0 calc(-1 * var(--pad)) 36px;
    clip-path: none;
  }

  .world__panel {
    inset: 0;
    width: auto;
  }

  .world__body {
    order: 3;
    max-width: none;
    padding: 0;
  }

  .logo--byt {
    width: min(56vw, 66svh, 440px);
  }

  .logo--fun {
    width: min(66vw, 62svh, 520px);
  }

  .world--byt .world__title {
    font-size: 15vw;
  }

  .world--fun .world__title {
    font-size: 9.4vw;
  }

  .flow {
    padding: 12vh var(--pad) 8vh;
  }

  /* three rows on small screens: open the leading so the Ü clears the row above */
  .rows--close {
    --lh: 0.96;
  }

  .close {
    min-height: 0;
    padding: 14vh var(--pad);
    gap: 48px;
  }

  .foot__legal {
    margin-left: 0;
  }
}

/* ------------------------------------------------ phones (< 600px): stacked facts and full-width brand keys */

@media (max-width: 599px) {
  .facts {
    grid-template-columns: 1fr;
    row-gap: 16px;
  }

  .key--byt,
  .key--fun,
  .key--cta,
  .close__alt .key {
    width: 100%;
    min-width: 0;
  }

  .close__acts,
  .close__alt {
    flex-direction: column;
    align-items: stretch;
  }

  /* the key the full stop releases comes first, right under the sentence */
  .key--cta {
    order: -1;
  }

  .close__alt .u {
    align-self: flex-start;
  }

  .foot {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ------------------------------------------------ reduced motion: content fades in, nothing travels */

html.m-quiet [data-layer]:not(.hero) {
  opacity: 0;
  transition: opacity 600ms ease;
}

html.m-quiet [data-layer].is-in {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .u,
  .key,
  .key__t,
  .key__ico .i,
  .brand__meta .i {
    transition-duration: 0ms;
  }

  .key::before {
    transition: none;
  }
}

/* ================================================ MOBILE MENU (< 900px)
   The key opens a sheet under the masthead: the three chapters as display rows standing on
   the MaRe line, then the two direct contacts. Same type, line and key language as the page. */

.mast__menu {
  display: none;
  min-width: var(--key-h);
  padding: 0 16px;
  gap: 12px;
}

.mast__menu .key__label {
  display: none;
}

/* two 2px lines that cross when the sheet is open */
.menu-ico {
  position: relative;
  width: 18px;
  height: 18px;
  flex: none;
}

.menu-ico::before,
.menu-ico::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--l2);
  background: currentColor;
  transition: transform 240ms var(--ease-out);
}

.menu-ico::before {
  top: 5px;
}

.menu-ico::after {
  top: 11px;
}

.mast__menu[aria-expanded="true"] .menu-ico::before {
  transform: translateY(3px) rotate(45deg);
}

.mast__menu[aria-expanded="true"] .menu-ico::after {
  transform: translateY(-3px) rotate(-45deg);
}

@media (min-width: 400px) {
  .mast__menu .key__label {
    display: grid;
  }
}

.menu {
  position: fixed;
  top: var(--mast-h);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 49;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: 6vh var(--pad) calc(5vh + env(safe-area-inset-bottom));
  overflow-y: auto;
  background: var(--paper);
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 320ms var(--ease-out), visibility 0s linear 320ms;
}

.menu.is-open {
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transition: clip-path 320ms var(--ease-out), visibility 0s;
}

.menu__nav {
  display: grid;
}

.menu__link {
  display: block;
  padding: 18px 0 12px;
  border-bottom: var(--l2) solid var(--indigo);
  font-size: clamp(2rem, 1rem + 6vw, 3.25rem);
  font-weight: 800;
  font-variation-settings: "wdth" 100;
  line-height: var(--lh-caps);
  text-transform: uppercase;
}

.menu__acts {
  display: grid;
  gap: 16px;
  justify-items: start;
}

html.menu-open {
  overflow: hidden;
}

@media (min-width: 900px) {
  .menu {
    display: none;
  }
}

/* no script: the header row wraps instead of hiding the chapters */
html:not(.js) .mast {
  flex-wrap: wrap;
  height: auto;
  min-height: var(--mast-h);
}

html:not(.js) .mast__nav {
  display: flex;
}

/* ================================================ SUB PAGES (Impressum, Datenschutz, 404)
   Calm reading pages in the same system: header, type, line and footer, no motion. */

.page {
  padding: 10vh var(--pad) 14vh;
}

.page__title {
  margin-bottom: 7vh;
  padding-bottom: 0.12em;
  border-bottom: var(--l2) solid var(--indigo);
  font-size: clamp(2.5rem, 1.2rem + 6vw, 6.5rem);
  font-weight: 800;
  font-variation-settings: "wdth" 100;
  line-height: var(--lh-caps);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.legal {
  max-width: 72ch;
}

.legal h2 {
  margin: 56px 0 18px;
  font-size: clamp(1.25rem, 0.9rem + 1vw, 1.75rem);
  font-weight: 800;
  font-variation-settings: "wdth" 100;
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-transform: uppercase;
}

.legal h2:first-child {
  margin-top: 0;
}

.legal h3 {
  margin: 32px 0 10px;
  font-size: 1.0625rem;
  font-weight: 700;
}

.legal p,
.legal li {
  overflow-wrap: anywhere;
}

.legal p + p {
  margin-top: 14px;
}

.legal ul {
  margin: 14px 0 0;
  padding-left: 1.2em;
  list-style: square;
}

.legal li + li {
  margin-top: 8px;
}

.legal li::marker {
  color: var(--indigo);
}

.legal a {
  color: var(--indigo);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* label / value pairs, one line each on wide screens, stacked on narrow ones */
.facts-list {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  margin: 0;
  border-top: var(--l1) solid var(--hair);
}

.facts-list dt,
.facts-list dd {
  padding: 14px 0;
  border-bottom: var(--l1) solid var(--hair);
}

.facts-list dt {
  padding-right: 24px;
  color: var(--ink-2);
}

.facts-list dd {
  overflow-wrap: anywhere;
}

.legal__stand {
  margin-top: 56px;
  color: var(--ink-2);
  font-size: 15px;
}

.page__back {
  margin-top: 6vh;
}

@media (max-width: 599px) {
  .facts-list {
    grid-template-columns: 1fr;
  }

  .facts-list dt {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .facts-list dd {
    padding-top: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu,
  .menu.is-open,
  .menu-ico::before,
  .menu-ico::after {
    transition: none;
  }
}

/* the menu key only exists below 900px (declared after its base rule so it wins) */
@media (max-width: 899px) {
  .mast__menu {
    display: inline-flex;
  }
}

/* ------------------------------------------------ unmeasured sizes
   site.js fits every display line to its measure (inline sizes, which win). Until it has,
   or wherever it cannot (no script, a build that could not measure), these caps keep the
   longest line inside the page: k = the line's width in em at its unfitted width axis. */
.rows {
  font-size: min(var(--fs-display), calc((100vw - 2 * var(--pad) - 24px) / var(--fit-k, 8.1)));
}

.rows--close {
  --fit-k: 12.8;
}

/* side by side: each name owns half the stage */
.brand {
  font-size: min(var(--fs-name), calc((50vw - var(--pad) - 40px) / 7.9));
}

.pstep__word {
  font-size: var(--fs-proc, min(clamp(2rem, 6vw, 6rem), calc((100vw - 2 * var(--pad) - 24px) / 13.3)));
}

@media (max-width: 1023px), (max-height: 599px) {
  .brand--byt,
  .brand--fun {
    font-size: min(var(--fs-name), calc((100vw - 2 * var(--pad) - 24px) / 7.9));
  }
}