/* Lichtbestand · Werkschau
   Idee: drei beleuchtete Schaufenster. Tiefes Nachtblau als Bühne, ein Lichtkegel in Lampengelb fällt auf die Handys.
   Schriften: Anybody (Überschriften, breit und schwer), Atkinson Hyperlegible Next (Text), Atkinson Hyperlegible Mono (Etiketten).
   Kein JavaScript. Bewegung nur per CSS, abschaltbar über prefers-reduced-motion. */

/* ---------- Schriften (lokal, OFL, Lizenzen in assets/fonts/) ---------- */
@font-face {
  font-family: "Anybody";
  src: url("../assets/fonts/anybody-latin.woff2") format("woff2");
  font-weight: 300 900; font-stretch: 75% 150%; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Anybody";
  src: url("../assets/fonts/anybody-latin-ext.woff2") format("woff2");
  font-weight: 300 900; font-stretch: 75% 150%; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../assets/fonts/atkinson-next-latin.woff2") format("woff2");
  font-weight: 200 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../assets/fonts/atkinson-next-latin-ext.woff2") format("woff2");
  font-weight: 200 800; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: url("../assets/fonts/atkinson-mono-latin.woff2") format("woff2");
  font-weight: 200 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: url("../assets/fonts/atkinson-mono-latin-ext.woff2") format("woff2");
  font-weight: 200 800; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Farben ---------- */
:root {
  color-scheme: light;
  --grund: #E9EEF6;          /* kühles Hellgrau-Blau, kein Papierton */
  --grund-2: #DCE3EF;
  --flaeche: #FFFFFF;
  --tinte: #0F1B3F;          /* Nachtblau */
  --tinte-2: #46516E;
  --linie: #C9D2E3;
  --licht: #FFD23F;          /* Lampengelb */
  --marker: #E2A900;
  --buehne: #13204A;         /* Schaufenster */
  --buehne-2: #1B2C5F;
  --buehne-tinte: #EEF1F8;
  --buehne-tinte-2: #B7C0D8;
  --knopf-grund: #0F1B3F;
  --knopf-tinte: #FFFFFF;
  --fokus: #0F1B3F;
  --schatten: 15 27 63;
  --strahl-mitte: rgb(255 255 255 / .95);   /* Licht macht die Fläche heller: im Hellen weiß */
  --strahl-unten: rgb(255 255 255 / .55);
  --pfuetze: rgb(255 210 63 / .8);

  --rand: clamp(16px, 4.4vw, 64px);
  --breite: 1360px;
  --anybody: "Anybody", "Arial Black", sans-serif;
  --text: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, sans-serif;
  --mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --grund: #090F24;
    --grund-2: #0E1631;
    --flaeche: #121B3B;
    --tinte: #EDF0F7;
    --tinte-2: #A9B3CC;
    --linie: #2A3766;
    --marker: #FFD23F;
    --buehne: #13204A;
    --buehne-2: #1D2D62;
    --knopf-grund: #FFD23F;
    --knopf-tinte: #0F1B3F;
    --fokus: #FFD23F;
    --schatten: 0 0 0;
    --strahl-mitte: rgb(150 172 255 / .17);   /* im Dunkeln: hellere Nacht, das Gelb bleibt bei Lampe und Lichtfleck */
    --strahl-unten: rgb(150 172 255 / .07);
    --pfuetze: rgb(255 210 63 / .5);
  }
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 900px) { body { font-size: 1.125rem; } }
img, svg { display: block; max-width: 100%; }
/* Lichtkegel ragen seitlich hinaus; abgeschnitten wird am Fensterrand, ohne Querscrollen */
main { overflow-x: clip; }
p, ul, h1, h2, h3, figure { margin: 0; }
a { color: inherit; }
::selection { background: var(--licht); color: #0F1B3F; }

:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: 4px; }
.fenster :focus-visible { outline-color: var(--licht); }

.sprung {
  position: absolute; left: 16px; top: -100px; z-index: 10;
  padding: 12px 18px; border-radius: 12px;
  background: var(--knopf-grund); color: var(--knopf-tinte); font-weight: 700; text-decoration: none;
}
.sprung:focus { top: 16px; }

.kopf, .held, .arbeiten, .dahinter, .kontakt, .fuss, .seite {
  width: min(100% - 2 * var(--rand), var(--breite));
  margin-inline: auto;
}

.kicker {
  font-family: var(--mono);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinte-2);
}

h2 {
  font-family: var(--anybody);
  font-weight: 820;
  font-stretch: 112%;
  font-size: clamp(2rem, 1.2rem + 3.6vw, 4rem);
  line-height: 1;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.textlink {
  font-weight: 700;
  text-decoration-line: underline;
  text-decoration-thickness: .14em;
  text-decoration-color: var(--marker);
  text-underline-offset: .22em;
  border-radius: 2px;
}
.textlink:hover { background: var(--licht); color: #0F1B3F; text-decoration-color: #0F1B3F; }

.knopf {
  display: inline-flex; align-items: center; gap: .55em;
  min-height: 52px;
  padding: .75em 1.35em;
  border-radius: 999px;
  background: var(--knopf-grund);
  color: var(--knopf-tinte);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.1;
  text-decoration: none;
  transition: box-shadow .25s ease, translate .25s ease;
}
.knopf:hover { box-shadow: 0 0 0 4px var(--licht), 0 14px 34px -10px rgb(255 196 0 / .85); translate: 0 -2px; }
.knopf .pfeil { width: 1.15em; height: 1.15em; flex: none; }
.knopf-licht { background: var(--licht); color: #0F1B3F; }
.knopf-licht:hover { box-shadow: 0 0 0 4px rgb(255 210 63 / .35), 0 16px 40px -8px rgb(255 210 63 / .75); }

/* ---------- Kopf ---------- */
.kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-block: clamp(14px, 2.4vw, 28px);
  position: relative; z-index: 2;
}
.marke { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; border-radius: 10px; }
.marke-zeichen { width: 36px; height: 36px; }
.marke-name {
  font-family: var(--anybody); font-weight: 800; font-stretch: 118%;
  font-size: 1.125rem; letter-spacing: -.01em;
}
.kopf-nav { display: flex; gap: clamp(4px, 2vw, 28px); }
.kopf-nav a {
  padding: 10px 6px; font-weight: 600; text-decoration: none; border-radius: 6px;
  background: linear-gradient(var(--licht), var(--licht)) no-repeat 50% 88% / 0 3px;
  transition: background-size .25s ease;
}
.kopf-nav a:hover { background-size: calc(100% - 12px) 3px; }
.nur-breit { display: none; }
@media (min-width: 560px) { .nur-breit { display: inline; } }
@media (max-width: 379px) { .marke-name { display: none; } }

/* ---------- Held ---------- */
.held {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  padding-block: clamp(20px, 5vw, 56px) clamp(56px, 9vw, 128px);
}
.held-kicker { margin-bottom: clamp(10px, 1.6vw, 18px); }
.held-titel {
  font-family: var(--anybody);
  font-weight: 860;
  /* füllt die Breite: Schriftgröße aus der Containerbreite, je Laufweite gemessen */
  font-stretch: 100%;
  font-size: calc(100cqi / 7.34);
  line-height: .9;
  letter-spacing: -.025em;
  margin-left: -.04em;
  white-space: nowrap;
}
@media (min-width: 600px) { .held-titel { font-stretch: 120%; font-size: calc(100cqi / 8.84); } }
@media (min-width: 1024px) { .held-titel { font-stretch: 140%; font-size: calc(100cqi / 10.36); } }

.held-raster { display: grid; gap: clamp(28px, 5vw, 48px); margin-top: clamp(22px, 3.4vw, 40px); }
.held-zeile {
  font-family: var(--anybody);
  font-weight: 420;
  font-stretch: 108%;
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -.01em;
  text-wrap: balance;
  max-width: 19ch;
}
.held-zeile mark { background: linear-gradient(transparent 64%, var(--licht) 64% 88%, transparent 88%); color: inherit; padding-inline: .04em; }
@media (prefers-color-scheme: dark) { .held-zeile mark { background: none; color: var(--licht); padding: 0; } }
.held-absatz { margin-top: 20px; max-width: 38ch; color: var(--tinte-2); font-size: 1.125rem; }
@media (min-width: 600px) and (max-width: 1023px) {
  .held-zeile { max-width: 21ch; font-size: clamp(2rem, 1rem + 3vw, 2.6rem); }
  .held-absatz { max-width: 46ch; }
}
.held-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 28px; }

.held-handys {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 100 / 104;
  max-width: 640px;
  width: 100%;
  margin-inline: auto;
}
.held-handy { position: absolute; }
.held-handy img {
  width: 100%; height: auto;
  filter: drop-shadow(0 3cqi 4cqi rgb(var(--schatten) / .32)) drop-shadow(0 .6cqi 1cqi rgb(var(--schatten) / .28));
}
.held-handy-mitte { width: 44cqi; left: 28cqi; top: 0; z-index: 3; }
.held-handy-links { width: 35cqi; left: 0; top: 13cqi; rotate: -7deg; z-index: 2; }
.held-handy-rechts { width: 35cqi; right: 0; top: 16cqi; rotate: 6deg; z-index: 2; }

/* Lichtkegel von oben auf die Handys */
.held-licht {
  position: absolute; inset: -60vh -30cqi 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, #000 82%, transparent);
}
.held-strahl {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgb(255 255 255 / 0) 0%, var(--strahl-mitte) 58%, var(--strahl-unten) 100%);
  clip-path: polygon(45% 0, 55% 0, 92% 100%, 8% 100%);
}
.held-pfuetze {
  position: absolute; left: 10%; right: 10%; bottom: 0; height: 22cqi;
  background: radial-gradient(closest-side, var(--pfuetze), transparent);
}
.held-lampe { display: none; }

@media (min-width: 1024px) {
  .held-raster { grid-template-columns: 5fr 7fr; align-items: end; margin-top: 0; }
  .held-text { align-self: center; padding-top: 8cqi; }
  .held-handys { margin-top: -3.2cqi; max-width: none; aspect-ratio: 100 / 96; }
  .held-handy-mitte { width: 40cqi; left: 30cqi; }
  .held-handy-links { width: 32cqi; left: 1cqi; top: 15cqi; }
  .held-handy-rechts { width: 32cqi; right: 1cqi; top: 19cqi; }
}

/* ---------- Abschnitte ---------- */
.abschnitt-kopf { display: grid; gap: 14px; max-width: 760px; }
.abschnitt-kopf > div { display: grid; gap: 14px; }
.dahinter .abschnitt-kopf { max-width: none; }
@media (min-width: 1024px) {
  .abschnitt-kopf-breit { max-width: none; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; }
  .abschnitt-kopf-breit .abschnitt-text { margin: 0 0 .3em; }
}
.abschnitt-text { color: var(--tinte-2); font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem); max-width: 52ch; margin-top: 6px; }

.arbeiten { padding-top: clamp(16px, 3vw, 48px); }

/* ---------- Werke ---------- */
.werk {
  display: grid;
  gap: clamp(28px, 4.4vw, 80px);
  align-items: center;
  margin-top: clamp(44px, 9vw, 140px);
}
@media (min-width: 900px) {
  .werk { grid-template-columns: 7fr 5fr; }
  .werk-gespiegelt { grid-template-columns: 5fr 7fr; }
  .werk-gespiegelt .fenster { order: 2; }
}

.fenster {
  --vorn-b: 46cqi; --vorn-x: 44cqi; --hinten-b: 38cqi; --hinten-x: 10cqi;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  container-type: inline-size;
  aspect-ratio: 1 / 1.2;
  border-radius: clamp(22px, 3vw, 36px);
  background:
    radial-gradient(120% 70% at 50% 110%, var(--buehne-2), transparent 70%),
    var(--buehne);
  color: var(--buehne-tinte);
  box-shadow: 0 1px 0 rgb(255 255 255 / .06) inset, 0 30px 60px -30px rgb(var(--schatten) / .55);
}
@media (min-width: 600px) {
  .fenster { aspect-ratio: 1; --vorn-b: 36cqi; --vorn-x: 48cqi; --hinten-b: 30cqi; --hinten-x: 17cqi; }
}
.werk-gespiegelt .fenster { --vorn-x: 15cqi; --hinten-x: 56cqi; }
@media (min-width: 600px) { .werk-gespiegelt .fenster { --vorn-x: 16cqi; --hinten-x: 53cqi; } }

.fenster-nummer {
  position: absolute; top: 3cqi; left: 5cqi; z-index: -1;
  font-family: var(--anybody); font-weight: 900; font-stretch: 150%;
  font-size: 34cqi; line-height: .8; letter-spacing: -.04em;
  color: rgb(255 255 255 / .055);
}
.werk-gespiegelt .fenster-nummer { left: auto; right: 5cqi; }

.lampe {
  position: absolute; top: 0; left: 50%; z-index: 1;
  width: 22cqi; height: 1.8cqi; min-height: 7px;
  translate: -50% 0;
  border-radius: 0 0 10px 10px;
  background: var(--licht);
  box-shadow: 0 0 3cqi 1cqi rgb(255 210 63 / .55), 0 0 12cqi 3cqi rgb(255 210 63 / .25);
}
.strahl {
  position: absolute; inset: 0 0 4cqi; z-index: -1;
  background: linear-gradient(to bottom, rgb(255 228 150 / .34), rgb(165 185 255 / .16) 38%, rgb(165 185 255 / .05));
  clip-path: polygon(39% 0, 61% 0, 98% 100%, 2% 100%);
}
.pfuetze {
  position: absolute; left: 4%; right: 4%; bottom: 3cqi; height: 16cqi; z-index: -1;
  background: radial-gradient(closest-side, rgb(255 210 63 / .62), rgb(255 210 63 / .14) 62%, transparent);
}

.handy {
  position: absolute;
  height: auto;
  filter: drop-shadow(0 3cqi 3.5cqi rgb(0 0 0 / .5)) drop-shadow(0 .5cqi .8cqi rgb(0 0 0 / .35));
}
.handy-vorn { width: var(--vorn-b); left: var(--vorn-x); bottom: 7cqi; z-index: 2; }
.handy-hinten { width: var(--hinten-b); left: var(--hinten-x); bottom: 12cqi; z-index: 1; rotate: -6deg; }
.werk-gespiegelt .handy-hinten { rotate: 6deg; }

.werk-text { max-width: 560px; container-type: inline-size; }
.werk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 18px; }
.etikett {
  display: inline-block;
  padding: .42em .8em;
  border-radius: 999px;
  background: var(--licht);
  color: #0F1B3F;
  font-family: var(--mono);
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .02em;
}
.etikett-leise { background: transparent; color: var(--tinte-2); box-shadow: inset 0 0 0 1.5px var(--linie); }
.werk-titel {
  font-family: var(--anybody);
  font-weight: 860;
  font-stretch: 128%;
  font-size: min(5.4rem, 100cqi / 7.8);   /* „Wegwarte“ füllt die Spalte, die anderen Titel stehen gleich groß */
  line-height: .92;
  letter-spacing: -.025em;
  margin-bottom: 20px;
}
.werk-satz { font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); line-height: 1.45; text-wrap: pretty; }
.merkmale { list-style: none; padding: 0; margin: 26px 0 32px; display: grid; gap: 12px; }
.merkmale li { position: relative; padding-left: 30px; color: var(--tinte-2); }
.merkmale li::before {
  content: "";
  position: absolute; left: 0; top: .36em;
  width: 16px; height: 12px;
  background: var(--marker);
  clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
}
.werk-link { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.adresse { font-family: var(--mono); font-size: .875rem; color: var(--tinte-2); }

/* ---------- Dahinter ---------- */
.dahinter {
  margin-top: clamp(72px, 12vw, 180px);
  padding-block: clamp(56px, 8vw, 112px);
  background: var(--grund-2);
  box-shadow: 0 0 0 100vmax var(--grund-2);
  clip-path: inset(0 -100vmax);
}
.prinzipien {
  list-style: none; padding: 0;
  container-type: inline-size;
  display: grid;
  gap: 16px;
  margin-top: clamp(28px, 4vw, 48px);
}
/* mittlere Breiten: drei oben, zwei unten */
@media (min-width: 600px) {
  .prinzipien { grid-template-columns: repeat(6, 1fr); }
  .prinzipien li { grid-column: span 2; }
  .prinzipien li:nth-child(n + 4) { grid-column: span 3; }
}
@media (min-width: 1100px) {
  .prinzipien { grid-template-columns: repeat(5, 1fr); }
  .prinzipien li, .prinzipien li:nth-child(n + 4) { grid-column: auto; }
}
.prinzipien li {
  position: relative;
  padding: 34px 24px 26px;
  border-radius: 22px;
  background: var(--flaeche);
  box-shadow: 0 1px 2px rgb(var(--schatten) / .06), 0 18px 40px -28px rgb(var(--schatten) / .4);
}
.prinzipien li::before {
  content: "";
  position: absolute; top: 0; left: 24px;
  width: 44px; height: 6px;
  border-radius: 0 0 6px 6px;
  background: var(--licht);
}
.prinzip-wert {
  font-family: var(--anybody);
  font-weight: 820;
  font-stretch: 100%;
  /* gleich groß in allen Karten: aus der Rasterbreite gerechnet, „Server in DE“ passt mit Luft */
  font-size: min(2.1rem, (100cqi - 48px) / 7.4);
  white-space: nowrap;
  line-height: 1;
  letter-spacing: -.015em;
  margin-bottom: 12px;
}
.prinzipien li p { color: var(--tinte-2); }
@media (min-width: 600px) { .prinzip-wert { font-size: min(2.1rem, ((100cqi - 32px) / 3 - 48px) / 7.4); } }
@media (min-width: 1100px) { .prinzip-wert { font-size: min(2.1rem, ((100cqi - 64px) / 5 - 48px) / 7.4); } }

/* ---------- Kontakt ---------- */
.kontakt { padding-block: clamp(72px, 11vw, 160px) clamp(40px, 6vw, 80px); }
.fenster-kontakt { aspect-ratio: auto; display: grid; place-items: center; text-align: center; padding: clamp(72px, 10vw, 140px) clamp(20px, 5vw, 64px) clamp(56px, 8vw, 110px); }
.fenster-kontakt .lampe { width: min(260px, 40%); height: 9px; }
.fenster-kontakt .strahl {
  inset: 0; clip-path: polygon(36% 0, 64% 0, 96% 100%, 4% 100%);
  background: linear-gradient(to bottom, rgb(255 228 150 / .22), rgb(165 185 255 / .11) 40%, rgb(165 185 255 / 0) 94%);
}
.kontakt-inhalt { display: grid; justify-items: center; gap: 22px; max-width: 760px; }
.kontakt-titel {
  font-size: clamp(2.1rem, 1rem + 5vw, 5rem);
  font-stretch: 118%;
  line-height: .98;
}
.kontakt-titel span { display: block; color: var(--licht); }
.kontakt-text { max-width: 46ch; color: var(--buehne-tinte-2); font-size: clamp(1.0625rem, 1rem + .3vw, 1.2rem); }
.knopf-licht { font-size: clamp(1.0625rem, 1rem + .5vw, 1.3rem); padding: .8em 1.5em; }
.absender { font-family: var(--mono); font-size: .875rem; letter-spacing: .04em; color: var(--buehne-tinte-2); }
.kontakt-website { margin-top: 28px; text-align: center; color: var(--tinte-2); }

/* ---------- Fuß ---------- */
.fuss {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px;
  padding-block: 28px 40px;
  color: var(--tinte-2);
  font-size: .9375rem;
}
.fuss-marke { font-family: var(--mono); font-size: .8125rem; letter-spacing: .04em; }
.fuss-nav { display: flex; gap: 8px 20px; }
.fuss-nav a { padding: 8px 0; text-decoration-thickness: .1em; text-underline-offset: .22em; text-decoration-color: var(--marker); }
.fuss-nav a:hover { color: var(--tinte); }

/* ---------- Unterseite (Datenschutz) ---------- */
.seite { padding-block: clamp(24px, 5vw, 64px) clamp(56px, 8vw, 112px); }
.seite-inhalt { max-width: 68ch; }
.seite h1 {
  font-family: var(--anybody); font-weight: 860; font-stretch: 125%;
  font-size: clamp(2.4rem, 1.2rem + 5vw, 4.6rem); line-height: .95; letter-spacing: -.025em;
  margin: 12px 0 28px;
}
.seite h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); font-stretch: 108%; margin: 44px 0 12px; }
.seite p + p, .seite p + ul, .seite ul + p { margin-top: 12px; }
.seite ul { padding-left: 1.2em; }
.seite li + li { margin-top: 6px; }
.seite li::marker { color: var(--marker); }
.seite a:not(.knopf) { text-decoration-thickness: .1em; text-decoration-color: var(--marker); text-underline-offset: .2em; }
.seite .stand { margin-top: 44px; color: var(--tinte-2); font-family: var(--mono); font-size: .875rem; }

/* ---------- Bewegung (nur wenn erwünscht) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .held-handy { animation: auftauchen 1s cubic-bezier(.2, .75, .2, 1) both; }
  .held-handy-links { animation-delay: .12s; }
  .held-handy-rechts { animation-delay: .24s; }
  .held-strahl, .held-pfuetze { animation: licht-an 1.6s ease-out .35s both; }

  @supports (animation-timeline: view()) {
    /* Licht geht an, sobald ein Schaufenster ins Bild kommt; das hintere Handy fächert heraus */
    .fenster .strahl, .fenster .pfuetze, .fenster .lampe {
      animation: licht-an linear both;
      animation-timeline: view();
      animation-range: entry 30% cover 42%;
    }
    .handy-vorn {
      animation: heben linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 50%;
    }
    .handy-hinten {
      animation: faechern linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 50%;
    }
    .werk-gespiegelt .handy-hinten { animation-name: faechern-gespiegelt; }
    .held-handy img {
      animation: spreizen linear both;
      animation-timeline: scroll(root);
      animation-range: 0 90vh;
    }
    .held-handy-links img { --weg-x: -4cqi; --weg-r: -4deg; }
    .held-handy-rechts img { --weg-x: 4cqi; --weg-r: 4deg; }
    .held-handy-mitte img { --weg-y: -5cqi; }
  }
}

@keyframes auftauchen { from { opacity: 0; translate: 0 10cqi; } }
@keyframes licht-an { from { opacity: .08; } }
@keyframes heben { from { translate: 0 14cqi; } }
@keyframes faechern { from { translate: 14cqi 6cqi; rotate: 0deg; } }
@keyframes faechern-gespiegelt { from { translate: -14cqi 6cqi; rotate: 0deg; } }
@keyframes spreizen { to { translate: var(--weg-x, 0) var(--weg-y, 0); rotate: var(--weg-r, 0deg); } }

@media (forced-colors: active) {
  .strahl, .pfuetze, .held-strahl, .held-pfuetze, .lampe { display: none; }
  .fenster { border: 2px solid CanvasText; }
}