/* =============================================================================
   Seitenstudie — Hülle (Startseite, Impressum, Datenschutz)
   Leitidee „Der Leuchttisch“ (Konzept: art-direction/demos-site/KONZEPT.md)
   Graphit ohne Blau · Papierweiß · EIN Registerrot (nur Marken, Linien, Fokus).
   Schriften: Bricolage Grotesque (variabel) + DM Mono, selbst gehostet (SIL OFL 1.1).
   Keine Inline-Styles; JS setzt nur Custom Properties per CSSOM (CSP-konform).
   ============================================================================= */

/* ---- Schriften ------------------------------------------------------------- */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("../assets/fonts/bricolage-grotesque-var.woff2") format("woff2");
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/dm-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/dm-mono-500.woff2") format("woff2");
}
/* Schriften der Studien, nur für die Namen in den Stilnotizen (je eine Datei, latin) */
@font-face { font-family: "S Space Grotesk"; font-weight: 500; font-display: swap; src: url("../assets/vendor/fonts/space-grotesk/space-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "S Inter"; font-weight: 400; font-display: swap; src: url("../assets/vendor/fonts/inter/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "S JetBrains Mono"; font-weight: 400; font-display: swap; src: url("../assets/vendor/fonts/jetbrains-mono/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "S Cormorant Garamond"; font-weight: 600; font-display: swap; src: url("../assets/vendor/fonts/cormorant-garamond/cormorant-garamond-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "S Outfit"; font-weight: 400; font-display: swap; src: url("../assets/vendor/fonts/outfit/outfit-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "S Plus Jakarta Sans"; font-weight: 600; font-display: swap; src: url("../assets/vendor/fonts/plus-jakarta-sans/plus-jakarta-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "S IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("../assets/vendor/fonts/ibm-plex-mono/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }

/* ---- Tokens ---------------------------------------------------------------- */
@property --lr { syntax: "<length-percentage>"; inherits: true; initial-value: 0px; }

:root {
  --table: #121212;
  --plate: #1A1A19;
  --plate-2: #22211F;
  --paper: #EDEBE6;
  --paper-dim: #B4AFA6;
  --meta: #A39E94;
  --meta-low: #8A857C;
  --rot: #E2483D;
  --rot-text: #EC5A4F;
  --hair: #2E2D2A;

  --sans: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --ease-lay: cubic-bezier(.2, .7, .1, 1);   /* „Auslegen“ */
  --ease-draw: cubic-bezier(.65, 0, .35, 1); /* „Zeichnen“ */

  --margin: clamp(20px, 4vw, 64px);
  --gutter: 24px;
  --cols: 12;
  --shadow-plate: 0 24px 60px rgba(0, 0, 0, .55), 0 0 80px rgba(237, 235, 230, .05);
}
@media (max-width: 639px) {
  :root { --margin: 20px; --gutter: 16px; --cols: 4; }
}

/* ---- Basis ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Sanftes Scrollen erst nach dem Laden (site.js setzt .is-smooth): Ankunft per #studie-0X und Reload springen sofort. */
html.is-smooth { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--table);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 400;
  font-optical-sizing: auto;
  line-height: 1.6;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--rot); }
:focus-visible { outline: 2px solid var(--rot); outline-offset: 3px; }
::selection { background: var(--rot); color: var(--table); }
p, h1, h2, h3, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--margin); top: -100px; z-index: 50;
  padding: 0.6rem 1rem; background: var(--paper); color: var(--table);
  font-family: var(--mono); font-size: 0.8125rem; text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
}
.skip-link:focus { top: 12px; }
@media (prefers-reduced-motion: reduce) { html, html.is-smooth { scroll-behavior: auto; } }

.wrap { width: min(100% - 2 * var(--margin), 1280px); margin-inline: auto; }
.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
}
.mono {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  line-height: 1.4;
}

/* Passkreuz (SVG, Strich in Registerrot) */
.passkreuz { fill: none; stroke: var(--rot); stroke-width: 1.5; overflow: visible; }

/* ---- Header (statisch) ----------------------------------------------------- */
.site-head { position: relative; z-index: 5; }
.head-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 0 1rem;
  flex-wrap: wrap; /* Sicherheitsnetz für sehr schmale Bildschirme: lieber umbrechen als überlaufen */
  min-height: 72px;
}
.wordmark {
  display: inline-flex; align-items: center; gap: 0.6rem;
  min-height: 44px;
  font-family: var(--sans); font-weight: 600; font-size: 1.125rem; letter-spacing: -0.01em;
  font-stretch: 100%;
  text-decoration: none; color: var(--paper);
}
.wordmark .passkreuz { width: 12px; height: 12px; flex: none; }
.head-nav { display: flex; gap: 1.5rem; }
.head-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em;
  color: var(--paper); text-decoration: none;
}
.head-nav a:hover { text-decoration: underline; text-decoration-color: var(--rot); }

/* ---- Hero: der Leuchttisch ------------------------------------------------- */
.hero {
  position: relative;
  min-height: 88vh;
  min-height: 88svh;
  display: flex;
  align-items: center;
  padding: 48px 0 96px;
  background:
    radial-gradient(ellipse 55% 60% at 70% 62%, rgba(255, 238, 214, .075), transparent 70%),
    radial-gradient(ellipse 35% 30% at 72% 70%, rgba(255, 238, 214, .05), transparent 70%),
    var(--table);
  overflow: hidden;
}
.hero-lines {
  position: absolute; inset: 0 0 0 0;
  width: min(100% - 2 * var(--margin), 1280px); margin-inline: auto;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
  pointer-events: none;
}
.hero-lines span { border-left: 1px solid rgba(237, 235, 230, .06); transform-origin: 50% 0; }
.hero-corner { position: absolute; width: 20px; height: 20px; }
.hero-corner--tl { top: 16px; left: 16px; }
.hero-corner--tr { top: 16px; right: 16px; }
.hero-corner--bl { bottom: 16px; left: 16px; }
.hero-corner--br { bottom: 16px; right: 16px; }
.hero-corner path, .hero-corner circle { stroke-dasharray: 1; stroke-dashoffset: 0; }

.hero-inner {
  position: relative;
  grid-template-rows: 1fr auto auto auto auto auto 1fr;
  align-items: start;
}
.hero-inner > .kennzeile { grid-column: 1 / 6; grid-row: 2; }
.hero-inner > .hero-h1   { grid-column: 1 / 7; grid-row: 3; }
.hero-inner > .hero-sub  { grid-column: 1 / 7; grid-row: 4; }
.hero-inner > .lead      { grid-column: 1 / 6; grid-row: 5; }
.hero-inner > .hinweis   { grid-column: 1 / 6; grid-row: 6; }
.hero-inner > .hero-plates { grid-column: 7 / 13; grid-row: 1 / -1; align-self: center; }

.kennzeile { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; line-height: 1.4; color: var(--meta); }
.hero-h1 {
  margin-top: 24px;
  font-family: var(--sans);
  font-size: clamp(3.5rem, 9vw, 8rem);
  font-weight: 700;
  font-stretch: 80%;
  letter-spacing: -0.02em;
  line-height: 0.95;
}
.mask { display: block; overflow: hidden; padding-bottom: 0.28em; margin-bottom: -0.28em; } /* Platz für Unterlängen (y in „Layoutstudien“ war abgeschnitten) */
.mask-in { display: block; }
/* Unterzeile direkt unter der H1 (04.10.2026, Michael): wer die Seiten gemacht hat und dass es
   Demo-Vorschauen sind. Zwei Zeilen, Gedankenstrich nur für Screenreader. */
.hero-sub {
  margin-top: 20px;
  max-width: 34rem;
  font-family: var(--sans);
  font-size: clamp(1.1875rem, 1.1rem + 0.5vw, 1.5rem);
  font-weight: 600;
  font-stretch: 90%;
  letter-spacing: -0.005em;
  line-height: 1.3;
  color: var(--paper);
}
.hero-sub__demo { display: block; font-weight: 500; color: var(--paper-dim); }
.hero-sub__sep { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.lead {
  margin-top: 24px;
  max-width: 30rem;
  font-size: 1.25rem; line-height: 1.5; color: var(--paper-dim);
}
.hinweis {
  margin-top: 32px;
  max-width: 30rem;
  padding: 12px 16px;
  border: 1px solid var(--rot);
  font-size: 1rem; line-height: 1.5; color: var(--paper);
}

/* Urheberhinweis (Kapitel 12): Kolophon, leise, gut lesbar */
.studie-credit {
  position: relative;
  padding-left: 20px;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-transform: none;
  color: var(--paper-dim);
}
.studie-credit::before {
  /* Schnittmarke: L-Winkel 10×10, 1 px, Registerrot, 10 px Abstand zum Text */
  content: "";
  position: absolute; left: 0; top: 0.25em;
  width: 10px; height: 10px;
  border-left: 1px solid var(--rot);
  border-bottom: 1px solid var(--rot);
}

/* Tafeln im Hero */
.hero-plates {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px 56px;
  padding: 16px 8px;
}
.hplate { --r: -2.5deg; transform: rotate(var(--r)); }
.hplate:nth-child(2) { --r: 1.8deg; }
.hplate:nth-child(3) { --r: 1.2deg; }
.hplate:nth-child(4) { --r: -2deg; }
.hplate a { display: block; text-decoration: none; color: inherit; }
.hplate-frame {
  position: relative; display: block;
  padding: 6px; background: var(--paper);
  box-shadow: var(--shadow-plate);
  transition: transform 200ms var(--ease-lay);
}
.hplate-frame img { width: 100%; height: auto; aspect-ratio: 16 / 10; background: var(--plate-2); }
.hplate-num { display: block; margin-top: 14px; color: var(--meta); }
.hplate a:hover .hplate-frame, .hplate a:focus-visible .hplate-frame { transform: translateY(-4px); }
.hplate a:focus-visible { outline: none; }
.hplate a:focus-visible .hplate-frame { outline: 2px solid var(--rot); outline-offset: 3px; }

/* Schnittmarken außerhalb der Ecken (auf Rahmen und großen Tafeln) */
.crop { position: absolute; inset: 0; pointer-events: none; --cm: 12px; --co: 4px; }
.crop i { position: absolute; width: 0; height: 0; }
.crop i::before, .crop i::after {
  content: ""; position: absolute; background: var(--rot);
  transition: transform 160ms var(--ease-lay);
}
.crop i::before { width: var(--cm); height: 1px; }
.crop i::after  { width: 1px; height: var(--cm); }
.crop i:nth-child(1) { left: 0; top: 0; }
.crop i:nth-child(1)::before { right: var(--co); top: 0; transform-origin: 100% 50%; }
.crop i:nth-child(1)::after  { left: 0; bottom: var(--co); transform-origin: 50% 100%; }
.crop i:nth-child(2) { right: 0; top: 0; }
.crop i:nth-child(2)::before { left: var(--co); top: 0; transform-origin: 0 50%; }
.crop i:nth-child(2)::after  { left: 0; bottom: var(--co); transform-origin: 50% 100%; }
.crop i:nth-child(3) { left: 0; bottom: 0; }
.crop i:nth-child(3)::before { right: var(--co); top: 0; transform-origin: 100% 50%; }
.crop i:nth-child(3)::after  { left: 0; top: var(--co); transform-origin: 50% 0; }
.crop i:nth-child(4) { right: 0; bottom: 0; }
.crop i:nth-child(4)::before { left: var(--co); top: 0; transform-origin: 0 50%; }
.crop i:nth-child(4)::after  { left: 0; top: var(--co); transform-origin: 50% 0; }
/* Hover: Schnittmarken um 4 px länger (12 → 16 px) */
.hplate a:hover .crop i::before, .hplate a:focus-visible .crop i::before { transform: scaleX(1.3333); }
.hplate a:hover .crop i::after,  .hplate a:focus-visible .crop i::after  { transform: scaleY(1.3333); }

/* ---- Studien: große Tafeln ------------------------------------------------- */
.studien { padding: 128px 0 160px; }
.studie { row-gap: 32px; align-items: center; }
.studie-media { grid-column: 1 / 8; }
.studie-text  { grid-column: 9 / 13; }
.studie:nth-of-type(even) .studie-media { grid-column: 6 / 13; grid-row: 1; }
.studie:nth-of-type(even) .studie-text  { grid-column: 1 / 5; grid-row: 1; }

.plate { position: relative; }
.plate-box {
  position: relative;
  padding: 6px; background: var(--paper);
  box-shadow: var(--shadow-plate);
  --lx: 50%; --ly: 50%; --lr: 0px;
  transition: --lr 160ms ease-out;
}
.plate.is-loupe .plate-box { transition: --lr 200ms ease-out; cursor: crosshair; }
.plate-clip { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--plate-2); }
.plate-img { width: 100%; height: 100%; object-fit: cover; }
.plate-x {
  position: absolute; inset: 0;
  clip-path: circle(var(--lr) at var(--lx) var(--ly));
  pointer-events: none;
}
.plate-x-in {
  position: absolute; inset: 0;
  transform-origin: var(--lx) var(--ly);
  transform: scale(1.6);
}
.plate-x-in img { width: 100%; height: 100%; object-fit: cover; }
.plate-grid { position: absolute; inset: 0; width: 100%; height: 100%; }
.plate-grid text { font-family: var(--mono); font-size: 20px; letter-spacing: 0.06em; }
.loupe-ring {
  position: absolute; left: 0; top: 0;
  width: calc(var(--lr) * 2); height: calc(var(--lr) * 2);
  border: 1px solid rgba(237, 235, 230, .7);
  border-radius: 50%;
  transform: translate3d(calc(var(--lx) - var(--lr)), calc(var(--ly) - var(--lr)), 0);
  pointer-events: none;
  opacity: 0;
}
.loupe-ring::before, .loupe-ring::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--rot);
}
.loupe-ring::before { width: 9px; height: 1px; margin: 0 0 0 -4.5px; }
.loupe-ring::after  { width: 1px; height: 9px; margin: -4.5px 0 0 0; }
.plate.is-loupe .loupe-ring { opacity: 1; }
/* Volles Overlay (Toggle, Touch-Tap): Raster über dem unvergrößerten Bild */
.plate.is-grid .plate-box { --lr: 150%; --lx: 50%; --ly: 50%; }
.plate.is-grid .plate-x-in { transform: none; }
.plate.is-grid .loupe-ring { opacity: 0; }
.plate .crop { inset: 0; }
.plate-dim {
  margin-top: 12px;
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--meta);
}

.studie-num { font-family: var(--mono); font-weight: 500; font-size: 0.875rem; letter-spacing: 0.12em; line-height: 1.2; color: var(--rot-text); }
.studie h2 {
  margin-top: 16px;
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 650; font-stretch: 90%; line-height: 1.05; letter-spacing: -0.01em;
}
.studie-branche { margin-top: 12px; color: var(--meta); }

.studie-konzept { margin-top: 16px; max-width: 60ch; font-size: 1.0625rem; line-height: 1.6; font-variation-settings: "opsz" 14; color: var(--paper); }
.notes { margin-top: 32px; display: grid; gap: 16px; }
.notes > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 4px 16px; padding-top: 12px; border-top: 1px solid var(--hair); }
.notes dt { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; line-height: 1.6; color: var(--meta); padding-top: 0.15em; }
.notes dd { font-size: 0.9375rem; line-height: 1.55; color: var(--paper); }
.swatches { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.swatches li { display: inline-flex; align-items: center; gap: 8px; }
.sw { width: 20px; height: 20px; flex: none; border: 1px solid var(--rot); }
.swatches code { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--paper-dim); }
.fontlist { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 1.0625rem; }
.f-space { font-family: "S Space Grotesk", var(--sans); font-weight: 500; }
.f-inter { font-family: "S Inter", var(--sans); }
.f-jetbrains { font-family: "S JetBrains Mono", var(--mono); font-size: 0.95em; }
.f-cormorant { font-family: "S Cormorant Garamond", serif; font-weight: 600; font-size: 1.15em; }
.f-outfit { font-family: "S Outfit", var(--sans); }
.f-jakarta { font-family: "S Plus Jakarta Sans", var(--sans); font-weight: 600; }
.f-plex { font-family: "S IBM Plex Mono", var(--mono); font-size: 0.95em; }
/* Farbfelder der Studien (Inhalt, nicht Hüllenfarbe) */
.sw--f5f2eb { background: #F5F2EB; } .sw--1a1a1a { background: #1A1A1A; } .sw--e85d04 { background: #E85D04; } .sw--2f6b4f { background: #2F6B4F; }
.sw--0a0809 { background: #0A0809; } .sw--f3ebe6 { background: #F3EBE6; } .sw--8b2e3e { background: #8B2E3E; } .sw--b84358 { background: #B84358; } .sw--c9a66b { background: #C9A66B; }
.sw--f5f8fb { background: #F5F8FB; } .sw--0f1c2a { background: #0F1C2A; } .sw--1d7ae0 { background: #1D7AE0; } .sw--1faa7a { background: #1FAA7A; }
.sw--0a0b0e { background: #0A0B0E; } .sw--e8eaed { background: #E8EAED; } .sw--00e5ff { background: #00E5FF; }

.studie .hinweis { margin-top: 32px; max-width: none; font-size: 0.9375rem; }
.actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px;
  border: 1px solid var(--paper); border-radius: 0;
  font: inherit; text-decoration: none; cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
.btn-paper { background: var(--paper); color: var(--table); font-weight: 600; font-size: 1rem; }
.btn-paper:hover { background: #FFFFFF; color: var(--table); text-decoration: none; }
.btn-ghost {
  background: transparent; color: var(--paper);
  border-color: var(--meta);
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em;
}
.btn-ghost:hover { background: var(--plate-2); }
.btn-ghost[aria-pressed="true"] { background: var(--plate-2); border-color: var(--rot); }

.passer { position: relative; height: 1px; margin: 160px 0; background: var(--hair); }
.passer .passkreuz { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; background: var(--table); }

/* ---- Footer ---------------------------------------------------------------- */
.site-foot { background: var(--plate); padding: 64px 0 48px; border-top: 1px solid var(--hair); }
.foot-inner { row-gap: 32px; }
.foot-main { grid-column: 1 / 8; }
.foot-side { grid-column: 9 / 13; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.site-foot .wordmark { font-size: 1rem; }
.foot-hinweis { margin-top: 16px; font-size: 0.9375rem; line-height: 1.55; color: var(--paper); }
.foot-ki { color: var(--paper-dim); font-size: 0.9375rem; }
.site-foot .studie-credit { margin: 24px 0 12px; }
.foot-copy { margin-top: 12px; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--meta); }
.foot-side a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.06em; color: var(--paper);
  text-decoration: none;
}
.foot-side a:hover { text-decoration: underline; text-decoration-color: var(--rot); }

/* ---- Rechtstexte ----------------------------------------------------------- */
.legal-main { padding: 48px 0 128px; }
.legal { max-width: 68ch; }
.legal .kennzeile { margin-bottom: 16px; }
.legal h1 { font-size: clamp(2rem, 10vw, 4rem); overflow-wrap: break-word; hyphens: auto; font-weight: 700; font-stretch: 85%; line-height: 1; letter-spacing: -0.02em; margin-bottom: 32px; }
.legal h2 { font-size: 1.375rem; font-weight: 600; line-height: 1.25; margin: 40px 0 12px; overflow-wrap: break-word; hyphens: auto; }
.legal p, .legal address { margin: 0 0 16px; color: var(--paper); overflow-wrap: break-word; hyphens: auto; }
.legal address { font-style: normal; }
.legal a { color: var(--paper); text-decoration: underline; }
.legal .placeholder { display: inline-block; padding: 0 6px; border: 1px solid var(--rot); font-family: var(--mono); font-size: 0.875rem; max-width: 100%; }

/* ---- Responsive ------------------------------------------------------------ */

.arbeitsweise { padding: 0 0 160px; }
.arbeitsweise .passer { margin: 0 0 160px; }
.arbeitsweise-h2 { grid-column: 1 / 5; font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 650; font-stretch: 90%; line-height: 1.05; letter-spacing: -0.01em; }
.arbeitsweise-list { grid-column: 5 / 13; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.arbeitsweise-list li { padding-top: 12px; border-top: 1px solid var(--hair); }
.arbeitsweise-num { display: block; font-family: var(--mono); font-weight: 500; font-size: 0.875rem; letter-spacing: 0.12em; line-height: 1.2; color: var(--rot-text); }
.arbeitsweise-list p { margin-top: 12px; font-size: 1.0625rem; line-height: 1.6; color: var(--paper); }

@media (max-width: 1023px) {
  .studie-media, .studie:nth-of-type(even) .studie-media { grid-column: 1 / -1; grid-row: auto; }
  .studie-text, .studie:nth-of-type(even) .studie-text { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 899px) {
  .hero { min-height: 0; padding: 24px 0 64px; }
  .hero-inner { grid-template-rows: none; }
  .hero-inner > * , .hero-inner > .hero-plates { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .hero-inner > .hero-plates { margin-top: 32px; }
  .hero-inner > .hinweis { margin-top: 24px; }
  .hero-lines { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
  .hero-lines span:nth-child(n + 5) { display: none; }
}
@media (max-width: 899px) and (min-width: 640px) {
  .hero-lines { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .hero-lines span:nth-child(n + 5) { display: block; }
}
@media (max-width: 639px) {
  .head-inner { min-height: 60px; }
  .hero-h1 { margin-top: 16px; }
  .lead { margin-top: 16px; font-size: 1.125rem; }
  .hero-plates { gap: 28px 16px; padding: 4px 2px; }
  .hplate { --r: -1deg; }
  .hplate:nth-child(2) { --r: 1deg; }
  .hplate:nth-child(3) { --r: 1deg; }
  .hplate:nth-child(4) { --r: -1deg; }
  .hplate-frame { padding: 4px; }
  .hplate-num { margin-top: 8px; }
  .hplate .crop { --cm: 5px; --co: 2px; }
  .hero-corner { width: 14px; height: 14px; }
  .hero-corner--tl, .hero-corner--tr { top: 8px; }
  .hero-corner--bl, .hero-corner--br { bottom: 8px; }
  .hero-corner--tl, .hero-corner--bl { left: 6px; }
  .hero-corner--tr, .hero-corner--br { right: 6px; }
  .studien { padding: 64px 0 96px; }
  .passer { margin: 96px 0; }
  .notes > div { grid-template-columns: 1fr; }
  .actions { flex-direction: column; }
  .actions .btn { width: 100%; }
  .foot-main, .foot-side { grid-column: 1 / -1; }
}

/* ---- Motion (nur unter html.is-motion; ohne JS/Reduced Motion: Endzustand) - */
html.no-trans *, html.no-trans *::before, html.no-trans *::after { transition: none !important; }

/* Hero: Startzustände */
.is-motion .hero:not(.is-set) .hero-lines span { transform: scaleY(0); }
.is-motion .hero:not(.is-set) .hero-corner path,
.is-motion .hero:not(.is-set) .hero-corner circle { stroke-dashoffset: 1; }
.is-motion .hero:not(.is-set) .mask-in { transform: translateY(135%); }
.is-motion .hero:not(.is-set) .hplate { transform: translateY(18px); opacity: 0; }
.is-motion .hero:not(.is-set) .hplate .crop i { transform: scale(0); }
.is-motion .hero:not(.is-set) .seq { opacity: 0; transform: translateY(8px); }
/* Hero: Sequenz (Zeiten aus Konzept Kap. 5) */
.hero-lines span { --d: 0ms; }
.is-motion .hero.is-set .hero-lines span { transition: transform 500ms var(--ease-draw) var(--d); }
.hero-lines span:nth-child(2) { --d: 40ms; }
.hero-lines span:nth-child(3) { --d: 80ms; }
.hero-lines span:nth-child(4) { --d: 120ms; }
.hero-lines span:nth-child(5) { --d: 160ms; }
.hero-lines span:nth-child(6) { --d: 200ms; }
.hero-lines span:nth-child(7) { --d: 240ms; }
.hero-lines span:nth-child(8) { --d: 280ms; }
.hero-lines span:nth-child(9) { --d: 320ms; }
.hero-lines span:nth-child(10) { --d: 360ms; }
.hero-lines span:nth-child(11) { --d: 400ms; }
.hero-lines span:nth-child(12) { --d: 440ms; }
.is-motion .hero.is-set .hero-corner path,
.is-motion .hero.is-set .hero-corner circle { transition: stroke-dashoffset 300ms var(--ease-draw) 300ms; }
.is-motion .hero.is-set .mask-in { transition: transform 520ms var(--ease-lay) 600ms; }
.is-motion .hero.is-set .hplate { transition: transform 420ms var(--ease-lay) var(--d), opacity 200ms linear var(--d); }
.is-motion .hero.is-set .hplate .crop i { transition: transform 240ms var(--ease-draw) calc(var(--d) + 300ms); }
.hplate:nth-child(1) { --d: 900ms; }
.hplate:nth-child(2) { --d: 1060ms; }
.hplate:nth-child(3) { --d: 1220ms; }
.hplate:nth-child(4) { --d: 1380ms; }
.is-motion .hero.is-set .seq { transition: opacity 400ms ease, transform 400ms var(--ease-lay); transition-delay: var(--d); }
.seq-1 { --d: 1900ms; } .seq-2 { --d: 2000ms; } .seq-3 { --d: 2100ms; } .seq-4 { --d: 2200ms; }

/* Studien: Scroll-Reveal (Bild per clip-path von links → Marken → Text) */
.is-motion .studie:not(.is-set) .plate-box { clip-path: inset(-120px 100% -120px -120px); }
.is-motion .studie:not(.is-set) .plate .crop i { transform: scale(0); }
/* Einblend-Elemente nie als Scroll-Anker verwenden (sonst verschiebt translateY die Wiederherstellung beim Reload um bis zu 8 px) */
.rv { overflow-anchor: none; }
.is-motion .studie:not(.is-set) .rv { opacity: 0; transform: translateY(8px); }
.is-motion .studie.is-set .plate-box { clip-path: inset(-120px -120px -120px -120px); transition: clip-path 600ms var(--ease-draw), --lr 160ms ease-out; }
.is-motion .studie.is-set .plate.is-loupe .plate-box { transition: clip-path 600ms var(--ease-draw), --lr 200ms ease-out; }
.is-motion .studie.is-set .plate .crop i { transition: transform 240ms var(--ease-draw) 600ms; }
.is-motion .studie.is-set .rv { transition: opacity 400ms ease, transform 400ms var(--ease-lay); transition-delay: var(--d); }
.rv-1 { --d: 840ms; } .rv-2 { --d: 930ms; } .rv-3 { --d: 1020ms; } .rv-4 { --d: 1110ms; } .rv-5 { --d: 1200ms; } .rv-6 { --d: 1290ms; }
/* Gestapeltes Layout (< 1024 px): Text steht unter der Tafel und startet erst, wenn er selbst ins Bild kommt
   (vorher an den Tafel-Start gekoppelt: Text erschien bis zu 1,7 s zu spät, Notizen noch später).
   Reihenfolge Nummer → Titel → Branche/Konzept → Notizen → Hinweis → Buttons bleibt, nur ohne Wartezeit auf die Tafel. */
@media (max-width: 1023px) {
  .is-motion .studie.is-set:not(.is-text) .rv { opacity: 0; transform: translateY(8px); }
  .rv-1 { --d: 0ms; } .rv-2 { --d: 90ms; } .rv-3 { --d: 180ms; } .rv-4 { --d: 270ms; } .rv-5 { --d: 360ms; } .rv-6 { --d: 450ms; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media (max-width: 899px) {
  .arbeitsweise-h2, .arbeitsweise-list { grid-column: 1 / -1; }
  .arbeitsweise-list { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
}
@media (max-width: 639px) {
  .arbeitsweise { padding-bottom: 96px; }
  .arbeitsweise .passer { margin-bottom: 64px; }
}

/* Responsive-Audit 03.10.2026: Kopfzeile unter 360 px ohne Überlauf („Arbeitsweise“ ragte bei 320 px 20 px hinaus) */
@media (max-width: 359px) {
  /* Finale QA 04.10.2026: H1 „Layoutstudien“ war bei 320 px 2 px breiter als die Maske (overflow: hidden) */
  .hero-h1 { font-size: 3.375rem; }
  .head-nav { gap: 0.875rem; }
  .head-nav a { letter-spacing: 0.04em; }
  .wordmark { gap: 0.45rem; }
}