/* Taktfaden – Website, Richtung C „Konstruktion“ (Karim 18.10.2026: „C hat Potenzial …
   wirkt noch ein bisschen kahl und zu weiß, soll aber auch nicht zu bunt sein“).
   Stahlgrauer Grund mit Raster, weiße Datenblätter, Graphit, der rote Faden.
   Zweite Schrift IBM Plex Mono für Maße, Werte und Knöpfe. Das Lineal mit Takt-Strichen
   trennt die Bereiche. Immer hell. Einziges Skript: seite.js. */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/assets/fonts/SchibstedGrotesk-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  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: "IBM Plex Mono";
  src: url("/assets/fonts/IBMPlexMono-Regular-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/IBMPlexMono-Bold-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Farben und Maße ---------- */

:root {
  /* Marke */
  --graphit: #1A1C1F;
  --schiefer: #52565C;
  --stahl: #EEF0F2;
  --stahl-2: #E3E6EA;
  --linie: #D3D7DC;
  --linie-hell: #E4E7EA;
  --papier: #FFFFFF;
  --faden: #B42318;
  --raster: rgb(26 28 31 / 0.05);
  --raster-stark: rgb(26 28 31 / 0.085);
  --hilfe: #8A8E95;
  --dunkel-text-2: #A8ADB4;

  /* Rollen */
  --grund: var(--stahl);
  --flaeche: var(--papier);
  --text: var(--graphit);
  --text-2: var(--schiefer);
  --trenn: var(--linie);
  --rot: var(--faden);
  --knopf: var(--graphit);
  --knopf-text: var(--papier);
  --band: var(--stahl-2);
  --dunkel: var(--graphit);
  --dunkel-text: var(--papier);
  --schatten: 0 1px 2px rgb(26 28 31 / 0.06), 0 12px 28px rgb(26 28 31 / 0.08);

  --sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --weich: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Maße */
  --breite: 70rem;
  --rand: clamp(1rem, 4.5vw, 3rem);
  --links: max(var(--rand), (100vw - var(--breite)) / 2);
  --einzug: max(0px, 3.5rem - var(--links));
  --abschnitt: clamp(4.5rem, 3.5rem + 5vw, 8rem);
  --radius: 0.625rem;
  --kopf-hoehe: 4rem;

  color-scheme: light;
}

/* ---------- Grundlage ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--grund);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

main { flex: 1 0 auto; }

img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
h1, h2, h3 { hyphens: manual; overflow-wrap: break-word; }
a { color: inherit; }

::selection { background: color-mix(in srgb, var(--rot) 22%, transparent); }

:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
  border-radius: 0.25rem;
}

[id] { scroll-margin-top: calc(var(--kopf-hoehe) + 2rem); }

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

.innen {
  width: min(100% - 2 * var(--rand), var(--breite));
  margin-inline: auto;
}

.innen-schmal {
  width: min(100% - 2 * var(--rand), 46rem);
  margin-inline: auto;
}

.skip {
  position: absolute;
  left: var(--rand);
  top: 0.75rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius);
  background: var(--graphit);
  color: var(--papier);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip:focus { transform: none; }

/* Raster wie auf Millimeterpapier: fein alle 24 px, kräftiger alle 120 px */
.raster-grund {
  background-image:
    linear-gradient(var(--raster-stark) 1px, transparent 1px),
    linear-gradient(90deg, var(--raster-stark) 1px, transparent 1px),
    linear-gradient(var(--raster) 1px, transparent 1px),
    linear-gradient(90deg, var(--raster) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: center top;
}

/* Lineal mit Takt-Strichen: kurz alle 8 px, lang alle 40 px */
.lineal {
  height: 1.25rem;
  border-bottom: 1px solid var(--linie);
  background:
    repeating-linear-gradient(90deg, var(--schiefer) 0 1px, transparent 1px 40px) left bottom / 100% 0.75rem no-repeat,
    repeating-linear-gradient(90deg, var(--linie) 0 1px, transparent 1px 8px) left bottom / 100% 0.375rem no-repeat;
}

.mono {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* ---------- Zeichen ---------- */

.zeichen { flex: none; overflow: visible; }
.zeichen path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.zeichen .z-tf { stroke: currentColor; }
.zeichen .z-q { stroke: var(--rot); }

/* ---------- Kopf und Menü ---------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgb(255 255 255 / 0.9);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid var(--linie);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .kopf { background: var(--papier); }
}

@media (prefers-reduced-transparency: reduce) {
  .kopf { background: var(--papier); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

.kopf-innen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 0.75rem;
  min-height: var(--kopf-hoehe);
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  color: var(--text);
  text-decoration: none;
}

.marke .zeichen { width: 1.75rem; height: 1.75rem; }

.wortmarke {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}

.hauptmenue {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
}

.menue {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(0.25rem, 1.2vw, 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Menüpunkt: ein rotes Quadrat schiebt sich davor */
.menue a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  transition: padding-left 0.25s var(--weich);
}

.menue a::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 50%;
  width: 0.375rem;
  height: 0.375rem;
  margin-top: -0.1875rem;
  background: var(--rot);
  transform: scale(0);
  transition: transform 0.25s var(--weich);
}

.menue a:hover,
.menue a[aria-current="page"] { padding-left: 1.25rem; }

.menue a:hover::before,
.menue a[aria-current="page"]::before { transform: scale(1); }

.menue-knopf { display: none; }

/* Am Handy klappt das Menü hinter einem Knopf zusammen. Ohne Skript bleibt es offen sichtbar. */
@media (max-width: 56rem) {
  .mit-skript .menue-knopf {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0 1rem;
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    background: var(--papier);
    color: var(--text);
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    cursor: pointer;
  }

  .mit-skript .menue-knopf[aria-expanded="true"] { border-color: var(--graphit); }

  .mit-skript .hauptmenue {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding: 0.5rem var(--rand) 1.5rem;
    background: var(--papier);
    border-bottom: 1px solid var(--linie);
    box-shadow: 0 16px 32px rgb(26 28 31 / 0.10);
  }

  .mit-skript .hauptmenue.offen { display: flex; }
  .mit-skript .hauptmenue .menue { flex-direction: column; }

  .mit-skript .hauptmenue .menue a {
    width: 100%;
    min-height: 3.25rem;
    padding-inline: 0;
    font-size: 1.125rem;
    border-bottom: 1px solid var(--linie-hell);
  }

  .mit-skript .hauptmenue .menue a::before { left: 0; }
  .mit-skript .hauptmenue .menue a:hover,
  .mit-skript .hauptmenue .menue a[aria-current="page"] { padding-left: 0.875rem; }

  html:not(.mit-skript) .hauptmenue { width: 100%; padding-bottom: 0.75rem; }
}

/* ---------- Knöpfe und Verweise ---------- */

/* Knopf: Graphit, beim Drüberfahren füllt er sich von links rot */
.knopf {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 3rem;
  padding: 0 1.375rem;
  border-radius: var(--radius);
  background: var(--knopf);
  color: var(--knopf-text);
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.2s var(--weich);
}

.knopf::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--rot);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--weich);
}

.knopf:hover::before,
.knopf:focus-visible::before { transform: scaleX(1); }
.knopf:active { transform: scale(0.98); }

.knopf .pfeil { transition: transform 0.3s var(--weich); }
.knopf:hover .pfeil { transform: translateX(0.25rem); }

.knopf-klein {
  min-height: 2.5rem;
  padding: 0 1rem;
  font-size: 0.75rem;
}

/* Heller Knopf auf dem dunklen Band */
.knopf-hell {
  --knopf: var(--papier);
  --knopf-text: var(--graphit);
}

.knopf-hell:hover { color: var(--papier); }

/* Verweis in Mono mit Strich darunter */
.mehr {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.45em;
  transition: color 0.2s var(--weich), text-decoration-color 0.2s var(--weich);
}

.mehr:hover,
.mehr:focus-visible {
  color: var(--rot);
  text-decoration-color: var(--rot);
}

.mehr .pfeil { transition: transform 0.3s var(--weich); }
.mehr:hover .pfeil { transform: translateX(0.25rem); }

/* ---------- Bühne (Start) ---------- */

.buehne {
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(3rem, 2rem + 3vw, 4.5rem);
}

.buehne-gitter {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}

@media (min-width: 56rem) {
  .buehne-gitter { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}

.buehne .vorzeile { color: var(--text-2); }

.buehne h1 {
  margin-top: 1.25rem;
  font-size: clamp(2.5rem, 1.2rem + 5.2vw, 5rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.02;
  text-wrap: balance;
}

.lead {
  max-width: 40ch;
  margin-top: 1.25rem;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
  line-height: 1.5;
  color: var(--text-2);
  text-wrap: pretty;
}

/* Vier Stichwörter zu den Leistungen */
.leistungs-marken {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

.leistungs-marken a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.25rem;
  padding: 0 0.75rem;
  border: 1px solid var(--linie);
  border-radius: 0.375rem;
  background: var(--papier);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.2s var(--weich);
}

.leistungs-marken a::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  background: var(--linie);
  transition: background-color 0.2s var(--weich);
}

.leistungs-marken a:hover { border-color: var(--graphit); }
.leistungs-marken a:hover::before { background: var(--rot); }

/* Am Handy zwei mal zwei statt drei und einer allein */
@media (max-width: 30rem) {
  .leistungs-marken { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.knoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.75rem;
  margin-top: 2rem;
}

/* Die Konstruktionszeichnung mit Fadenkreuz */
.zeichnung {
  position: relative;
  padding: 1rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--papier);
  box-shadow: var(--schatten);
}

.zeichnung-kopf,
.zeichnung-fuss {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  color: var(--text-2);
}

.zeichnung-kopf { margin-bottom: 0.75rem; }
.zeichnung-fuss { margin-top: 0.75rem; }

.zeichnung-flaeche {
  position: relative;
  cursor: crosshair;
}

.konstruktion {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  color: var(--graphit);
}

.k-raster { fill: none; stroke: #E7E9EC; stroke-width: 0.3; }
.k-hilfe { fill: none; stroke: var(--hilfe); stroke-width: 0.45; }
.k-hilfe path { stroke-dasharray: 1.6 1.4; }
.k-hilfe circle { stroke-dasharray: 1.2 1.2; }
.k-punkt { fill: var(--hilfe); }

/* Registriert, damit das Fadenkreuz beim selbstständigen Messen weich gleiten kann */
@property --kx { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --ky { syntax: "<length>"; inherits: true; initial-value: 0px; }

.kreuz {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--kx) var(--ky), transparent 0.4rem, var(--rot) 0.4rem 0.53rem, transparent 0.6rem);
  transition: opacity 0.2s var(--weich);
}

.zeichnung-flaeche:hover .kreuz,
.zeichnung.misst .kreuz { opacity: 1; }

.zeichnung.misst .kreuz {
  transition: opacity 0.2s var(--weich), --kx 0.9s var(--weich), --ky 0.9s var(--weich);
}

.kreuz::before,
.kreuz::after {
  content: "";
  position: absolute;
  background: var(--rot);
}

.kreuz::before { left: 0; right: 0; top: var(--ky); height: 1px; }
.kreuz::after { top: 0; bottom: 0; left: var(--kx); width: 1px; }

.koordinaten {
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  background: var(--graphit);
  color: var(--papier);
  font-variant-numeric: tabular-nums;
}


@keyframes auftauchen {
  from { opacity: 0; transform: translateY(0.375rem); }
}

/* ---------- Abschnitte ---------- */

.abschnitt { padding-top: var(--abschnitt); }
.abschnitt-ende { padding-bottom: var(--abschnitt); }

.kopfzeile {
  max-width: 46rem;
  margin-bottom: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem);
}

/* Der Faden kommt vom linken Rand und führt zur Überschrift. */
.vorzeile {
  position: relative;
  padding-left: var(--einzug);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.25rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
}

.vorzeile::before {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  right: calc(100% - var(--einzug) + 0.875rem);
  width: 100vw;
  height: 2px;
  background: var(--rot);
  transform-origin: right center;
}

.kopfzeile h1,
.kopfzeile h2,
.seite h1 {
  margin-top: 0.875rem;
  font-size: clamp(2.125rem, 1.2rem + 3.2vw, 3.375rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.06;
  text-wrap: balance;
}

.unter {
  max-width: 40rem;
  margin-top: 1rem;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  line-height: 1.5;
  color: var(--text-2);
  text-wrap: pretty;
}

.zwischentitel {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: clamp(3rem, 2rem + 3vw, 4.5rem) 0 1.25rem;
  font-size: clamp(1.375rem, 1.15rem + 0.8vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.kopfzeile + .zwischentitel { margin-top: 0; }

.seite-start { padding-top: clamp(3rem, 2rem + 4vw, 6rem); }

.mehr-zeile { margin-top: 1.75rem; }

/* ---------- Datenblätter (Leistungen, Apps) ---------- */

.blaetter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: clamp(1rem, 0.5rem + 1.25vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Datenblatt: weiß auf Stahl, beim Drüberfahren rasten vier rote Ecken ein */
.blatt {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--papier);
  transition: transform 0.35s var(--weich), box-shadow 0.35s var(--weich), border-color 0.35s var(--weich);
}

.blatt::after {
  content: "";
  position: absolute;
  inset: -0.875rem;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(var(--rot), var(--rot)) left top / 0.875rem 2px no-repeat,
    linear-gradient(var(--rot), var(--rot)) left top / 2px 0.875rem no-repeat,
    linear-gradient(var(--rot), var(--rot)) right top / 0.875rem 2px no-repeat,
    linear-gradient(var(--rot), var(--rot)) right top / 2px 0.875rem no-repeat,
    linear-gradient(var(--rot), var(--rot)) left bottom / 0.875rem 2px no-repeat,
    linear-gradient(var(--rot), var(--rot)) left bottom / 2px 0.875rem no-repeat,
    linear-gradient(var(--rot), var(--rot)) right bottom / 0.875rem 2px no-repeat,
    linear-gradient(var(--rot), var(--rot)) right bottom / 2px 0.875rem no-repeat;
  transition: inset 0.35s var(--weich), opacity 0.2s var(--weich);
}

.blatt:hover {
  transform: translateY(-2px);
  border-color: #BEC3C9;
  box-shadow: var(--schatten);
}

.blatt:hover::after {
  inset: -0.4375rem;
  opacity: 1;
}

.blatt-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
  color: var(--text-2);
}

.blatt-symbol {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--linie);
  border-radius: 0.5rem;
  color: var(--graphit);
  transition: border-color 0.3s var(--weich), color 0.3s var(--weich);
}

.blatt-symbol svg {
  width: 1.375rem;
  height: 1.375rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.blatt:hover .blatt-symbol { border-color: var(--rot); color: var(--rot); }

.blatt h3 {
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.blatt p { max-width: 34rem; color: var(--text-2); }

/* Werte wie auf einem technischen Datenblatt */
.werte {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.375rem 1.25rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px dashed var(--linie);
  font-family: var(--mono);
  font-size: 0.8125rem;
}

.werte dt { color: var(--text-2); text-transform: uppercase; letter-spacing: 0.07em; }
.werte dd { color: var(--text); }

/* App-Symbole in den Datenblättern */
.app-symbol {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 22.5%;
  box-shadow: var(--schatten);
}

.blatt .app-symbol { margin-bottom: 0.5rem; }

.blatt-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  margin-top: 0.75rem;
}

/* ---------- Taktleiste (Ablauf, Mittesten) ---------- */

.takt {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: takt;
  border-top: 1px solid var(--linie);
}

.takt li {
  counter-increment: takt;
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding: 1.75rem 1.5rem 1.75rem 0;
  border-bottom: 1px solid var(--linie);
}

/* Takt-Strich: steht über jedem Schritt und wird beim Drüberfahren rot und länger */
.takt li::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 2px;
  height: 0.875rem;
  background: var(--graphit);
  transform-origin: top center;
  transition: transform 0.3s var(--weich), background-color 0.3s var(--weich);
}

.takt li:hover::before { transform: scaleY(2); background: var(--rot); }

.takt-nr { color: var(--text-2); padding-left: 1rem; }
.takt-nr::after { content: counter(takt); }

.takt h3 {
  padding-left: 1rem;
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.takt p { padding-left: 1rem; color: var(--text-2); }

@media (min-width: 56rem) {
  .takt { border-top: 0; }
  .takt-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .takt li {
    padding: 2.25rem 1.5rem 0 0;
    border-bottom: 0;
    border-top: 1px solid var(--linie);
    background:
      repeating-linear-gradient(90deg, var(--linie) 0 1px, transparent 1px 8px) left top / 100% 0.375rem no-repeat;
  }

  .takt li::before { height: 1.25rem; }
  .takt li:hover::before { transform: scaleY(1.6); }
  .takt-nr, .takt h3, .takt p { padding-left: 0; }
}

@media (min-width: 64rem) {
  .takt-fuenf { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (min-width: 56rem) and (max-width: 63.99rem) {
  .takt-fuenf { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2.5rem; }
}

.testen-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
}

.hinweis { color: var(--text-2); }

/* ---------- Referenzen (Kacheln) ---------- */

.werke {
  display: grid;
  gap: clamp(1rem, 0.5rem + 1.25vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .werke { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .werke-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.werk { padding: 0; overflow: visible; }

.werk-bild {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  max-width: 100%;
  overflow: hidden;
  border-bottom: 1px solid var(--linie);
  border-radius: var(--radius) var(--radius) 0 0;
  background-color: var(--stahl);
}

.werk-bild-foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  transition: transform 0.6s var(--weich), scale 1.2s var(--weich);
}

.werk:hover .werk-bild-foto { transform: scale(1.03); }

.werk-text {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1.25rem 1.5rem 1.5rem;
}

.werk-art { color: var(--text-2); }

.werk h3 {
  font-size: 1.3125rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.werk-text p:last-child { color: var(--text-2); }

.werk-link { color: inherit; text-decoration: none; }

.werk-link:hover,
.werk-link:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--rot);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

.stand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-2);
}

.stand::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  background: var(--rot);
}

/* ---------- Grundsätze ---------- */

.grundsaetze {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

.grundsaetze .kopfzeile { margin-bottom: 0; }

@media (min-width: 56rem) {
  .grundsaetze {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }

  .grundsaetze .kopfzeile {
    position: sticky;
    top: calc(var(--kopf-hoehe) + 2.5rem);
  }

  .grundsaetze .name { grid-column: 1 / -1; }
}

.regeln {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linie);
}

.regeln li {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  column-gap: 0.75rem;
  padding-block: 1.375rem;
  border-bottom: 1px solid var(--linie);
}

/* Prüfhaken im Quadrat */
.regeln li::before {
  content: "";
  grid-row: span 2;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.25rem;
  border: 1.5px solid var(--graphit);
  border-radius: 0.1875rem;
  background:
    linear-gradient(45deg, transparent 45%, var(--rot) 45% 60%, transparent 60%) 22% 62% / 45% 40% no-repeat,
    linear-gradient(-45deg, transparent 42%, var(--rot) 42% 57%, transparent 57%) 75% 45% / 60% 70% no-repeat;
}

.regeln h3 {
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.regeln p { max-width: 36rem; margin-top: 0.25rem; color: var(--text-2); }

.name {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  align-items: center;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--papier);
}

@media (min-width: 44rem) {
  .name { grid-template-columns: auto minmax(0, 1fr); }
}

.name-zeichen {
  width: 7.5rem;
  height: 7.5rem;
  padding: 1rem;
  border: 1px solid var(--linie);
  border-radius: 0.5rem;
  color: var(--graphit);
}

.name h3 {
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.name p { max-width: 38rem; margin-top: 0.625rem; color: var(--text-2); }

/* ---------- Häufige Fragen ---------- */

.fragen {
  max-width: 52rem;
  border-top: 1px solid var(--linie);
}

.fragen details { border-bottom: 1px solid var(--linie); }

.fragen summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 3.75rem;
  padding-block: 1rem;
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
  transition: color 0.2s var(--weich);
}

.fragen summary::-webkit-details-marker { display: none; }

/* Plus im Quadrat, das beim Öffnen zum Minus wird */
.fragen summary::after {
  content: "";
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--linie);
  border-radius: 0.375rem;
  background:
    linear-gradient(var(--text), var(--text)) center / 0.75rem 1.5px no-repeat,
    linear-gradient(var(--text), var(--text)) center / 1.5px 0.75rem no-repeat,
    var(--papier);
  transition: border-color 0.2s var(--weich), transform 0.35s var(--weich);
}

.fragen details[open] summary::after { transform: rotate(180deg); }

.fragen details[open] summary::after {
  background:
    linear-gradient(var(--rot), var(--rot)) center / 0.75rem 1.5px no-repeat,
    var(--papier);
  border-color: var(--rot);
}

.fragen summary:hover { color: var(--rot); }
.fragen summary:hover::after { border-color: var(--graphit); }

.fragen details p {
  max-width: 44rem;
  padding: 0 3.25rem 1.25rem 0;
  color: var(--text-2);
}

/* ---------- Bänder ---------- */

.band {
  background-color: var(--band);
  border-block: 1px solid var(--linie);
}

.band-abschnitt { padding-block: var(--abschnitt); }

/* Dunkles Band als Abschluss: Graphit mit feinem hellem Raster */
.band-dunkel {
  --text: var(--dunkel-text);
  --text-2: var(--dunkel-text-2);
  --trenn: rgb(255 255 255 / 0.14);
  background-color: var(--dunkel);
  background-image:
    linear-gradient(rgb(255 255 255 / 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.06) 1px, transparent 1px);
  background-size: 120px 120px;
  color: var(--text);
}

.band-dunkel .mehr { color: var(--text); }
.band-dunkel .mehr:hover { color: #FFFFFF; text-decoration-color: var(--rot); }

.kontakt { padding-block: var(--abschnitt); }
.kontakt .kopfzeile { margin-bottom: 0; }

/* ---------- Fuß ---------- */

.fuss {
  padding-block: 2.25rem 2.75rem;
  border-top: 1px solid var(--linie);
  background: var(--band);
  font-size: 0.9375rem;
  color: var(--text-2);
}

.fuss-innen {
  display: grid;
  gap: 1rem 2rem;
}

@media (min-width: 48rem) {
  .fuss-innen {
    grid-template-columns: auto 1fr auto;
    align-items: center;
  }
}

.fuss-marke {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  color: var(--text);
}

.fuss-marke .marke { min-height: 0; }
.fuss-marke .zeichen { width: 1.5rem; height: 1.5rem; }
.fuss-marke .wortmarke { font-size: 1.0625rem; }
.slogan { color: var(--text-2); }

.fuss-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fuss-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
}

.fuss-links a:hover,
.fuss-links a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--rot);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.4em;
}

.fuss-hinweis { grid-column: 1 / -1; color: var(--text-2); }

/* ---------- Rechtliches ---------- */

.seite { padding-block: clamp(3rem, 2rem + 4vw, 6rem) var(--abschnitt); }

.seite .text {
  padding: clamp(1.5rem, 1rem + 2vw, 3rem);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--papier);
}

.text h2 {
  margin-top: 2.5rem;
  font-size: 1.3125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.text p { max-width: 42rem; margin-top: 0.75rem; }
.text .unter { margin-top: 1rem; }

.text a {
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.text a:hover {
  color: var(--rot);
  text-decoration-color: var(--rot);
  text-decoration-thickness: 2px;
}

/* ---------- Fehlerseite ---------- */

.fehlseite {
  padding-block: clamp(4rem, 3rem + 6vw, 8rem);
  text-align: center;
}

.faden-buehne {
  position: relative;
  display: flex;
  justify-content: center;
}

.faden-buehne::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: calc(42.5% - 1px);
  height: 2px;
  background: var(--rot);
}

.faden-buehne.endet::before { right: 50%; }

.faden-buehne .zeichen {
  position: relative;
  width: clamp(6rem, 4rem + 8vw, 9rem);
  height: auto;
  aspect-ratio: 1;
  color: var(--graphit);
}

@media (prefers-reduced-motion: no-preference) {
  .faden-buehne::before {
    transform-origin: left center;
    animation: faden-ein 1.4s cubic-bezier(0.2, 0.75, 0.2, 1) 0.15s both;
  }
}

@keyframes faden-ein {
  from { transform: scaleX(0); }
}

.fehlseite h1 {
  margin-top: clamp(1.5rem, 0.75rem + 2vw, 2.5rem);
  font-size: clamp(2.5rem, 1.2rem + 5vw, 4.5rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.02;
  text-wrap: balance;
}

.fehlseite .unter { margin-inline: auto; }
.fehlseite .knoepfe { justify-content: center; }

/* ---------- Pfeil nach oben ---------- */

/* Läuft unten rechts mit. Mit Skript erscheint er erst nach einem Stück Scrollen. */
.nach-oben {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  z-index: 9;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: rgb(255 255 255 / 0.94);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  backdrop-filter: saturate(1.6) blur(12px);
  box-shadow: var(--schatten);
  color: var(--graphit);
  transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease, color 0.2s ease, visibility 0s linear 0s;
}

.nach-oben svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nach-oben:hover { border-color: var(--rot); color: var(--rot); }

.mit-skript .nach-oben:not(.sichtbar) {
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

/* ---------- Bewegung ----------
   Alles, was sich bewegt, hat einen Grund: Die Zeichnung entsteht, das Fadenkreuz misst,
   der Faden führt zur Überschrift, die Taktleiste schlägt nacheinander, Haken werden gesetzt.
   Nur transform und opacity, ein Rhythmus für alle. Ohne Skript und bei „Bewegung reduzieren“
   steht alles sofort fertig da. */

:root {
  --feder: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Lesefaden: wächst im Kopf mit, je weiter man liest */
.fortschritt {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--rot);
  transform-origin: left center;
  transform: scaleX(var(--fortschritt, 0));
  pointer-events: none;
}

.kopf { transition: box-shadow 0.3s var(--weich); }
.kopf.gescrollt { box-shadow: 0 8px 24px rgb(26 28 31 / 0.08); }

/* Rückmeldung beim Antippen, auch ohne Maus */
.knopf:active::before { transform: scaleX(1); transition-duration: 0.15s; }
.blatt:active { transform: scale(0.99); }

.takt li:nth-child(2), .regeln li:nth-child(2) { --n: 1; }
.takt li:nth-child(3), .regeln li:nth-child(3) { --n: 2; }
.takt li:nth-child(4), .regeln li:nth-child(4) { --n: 3; }
.takt li:nth-child(5), .regeln li:nth-child(5) { --n: 4; }
[data-zeigen="1"] { --i: 1; }
[data-zeigen="2"] { --i: 2; }
[data-zeigen="3"] { --i: 3; }

@media (prefers-reduced-motion: no-preference) {
  /* Start: Text steigt nacheinander auf, die Zeichnung entsteht Strich für Strich */
  .mit-skript .buehne-gitter > div > * { animation: aufsteigen 0.8s var(--weich) both; }
  .mit-skript .buehne-gitter > div > :nth-child(2) { animation-delay: 0.08s; }
  .mit-skript .buehne-gitter > div > :nth-child(3) { animation-delay: 0.18s; }
  .mit-skript .buehne-gitter > div > :nth-child(4) { animation-delay: 0.28s; }
  .mit-skript .buehne-gitter > div > :nth-child(5) { animation-delay: 0.38s; }
  .mit-skript .buehne .vorzeile::before { animation: faden-ziehen 1s var(--weich) 0.1s both; }
  .mit-skript .zeichnung { animation: aufsteigen 0.9s var(--weich) 0.12s both; }

  /* Die Zeichnung entsteht, sobald sie zu sehen ist: Hilfslinien, dann t und f, dann der Faden */
  .zeigen-bereit .zeichnung:not(.zeichnet) .z-tf,
  .zeigen-bereit .zeichnung:not(.zeichnet) .z-q,
  .zeigen-bereit .zeichnung:not(.zeichnet) .k-hilfe { opacity: 0; }
  .zeichnung.zeichnet .k-hilfe { animation: auftauchen 0.9s var(--weich) 0.05s both; }
  .zeichnung.zeichnet .z-tf { stroke-dasharray: 1; animation: zeichnen 1.1s var(--weich) 0.3s both; }
  .zeichnung.zeichnet .z-q { stroke-dasharray: 1; animation: zeichnen 0.7s var(--weich) 1.2s both; }

  /* Beim Scrollen: Bereiche bauen sich auf */
  .zeigen-bereit [data-zeigen] {
    transition: opacity 0.7s var(--weich), translate 0.7s var(--weich), transform 0.35s var(--weich), box-shadow 0.35s var(--weich), border-color 0.35s var(--weich);
    transition-delay: calc(var(--i, 0) * 80ms), calc(var(--i, 0) * 80ms), 0s, 0s, 0s;
  }

  .zeigen-bereit [data-zeigen]:not(.da) { opacity: 0; translate: 0 1.25rem; }

  .zeigen-bereit .kopfzeile[data-zeigen] .vorzeile::before { transition: transform 0.9s var(--weich) 0.15s; }
  .zeigen-bereit .kopfzeile[data-zeigen]:not(.da) .vorzeile::before { transform: scaleX(0); }

  /* Datenblatt: die roten Ecken rasten beim Erscheinen einmal ein */
  .zeigen-bereit .blatt[data-zeigen].da::after { animation: einrasten 1.3s var(--weich) calc(var(--i, 0) * 80ms + 0.35s) backwards; }

  /* Taktleiste: die Striche schlagen nacheinander wie ein Takt */
  .zeigen-bereit .takt[data-zeigen].da li::before { animation: takt-schlag 0.8s var(--feder) calc(var(--n, 0) * 150ms + 0.25s) backwards; }

  /* Grundsätze: die Haken werden nacheinander gesetzt */
  .zeigen-bereit .regeln[data-zeigen].da li::before { animation: haken-setzen 0.55s var(--feder) calc(var(--n, 0) * 90ms + 0.2s) backwards; }

  /* Lineal: die Striche laufen von links ein. Eine Abdeckung in Grundfarbe zieht sich nach
     rechts zurück; das Lineal selbst bleibt ungeschnitten, damit der Beobachter es sieht. */
  .zeigen-bereit .lineal[data-zeigen]:not(.da) { opacity: 1; translate: none; }
  .zeigen-bereit .lineal[data-zeigen] { position: relative; overflow: hidden; }
  .zeigen-bereit .lineal[data-zeigen]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--grund);
    transform-origin: right center;
    transition: transform 1.4s var(--weich);
  }
  .zeigen-bereit .lineal[data-zeigen].da::after { transform: scaleX(0); }

  /* Referenzen: Bild und Symbol setzen sich beim Erscheinen */
  .zeigen-bereit .werk[data-zeigen] .app-symbol { transition: scale 1.2s var(--weich); }
  .zeigen-bereit .werk[data-zeigen]:not(.da) .werk-bild-foto,
  .zeigen-bereit .werk[data-zeigen]:not(.da) .app-symbol { scale: 1.08; }

  /* Fragen klappen weich auf, wo der Browser das kann */
  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    .fragen details::details-content {
      block-size: 0;
      overflow: hidden;
      transition: block-size 0.35s var(--weich), content-visibility 0.35s allow-discrete;
    }
    .fragen details[open]::details-content { block-size: auto; }
  }
}

@keyframes aufsteigen {
  from { opacity: 0; translate: 0 1rem; }
}

@keyframes faden-ziehen {
  from { transform: scaleX(0); }
}

@keyframes zeichnen {
  0% { stroke-dashoffset: 1; opacity: 0; }
  6% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes einrasten {
  0% { opacity: 0; transform: scale(1.06); }
  35% { opacity: 1; transform: scale(1); }
  75% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

@keyframes takt-schlag {
  0% { transform: scaleY(0); background-color: var(--rot); }
  55% { transform: scaleY(1.8); background-color: var(--rot); }
  100% { transform: scaleY(1); }
}

@keyframes haken-setzen {
  from { transform: scale(0.3); opacity: 0; }
}

/* ---------- Besondere Darstellungen ---------- */

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

@media (forced-colors: active) {
  .faden-buehne::before,
  .vorzeile::before,
  .kreuz::before,
  .kreuz::after {
    background: CanvasText;
    forced-color-adjust: none;
  }
}

@media print {
  .kopf { position: static; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .skip, .hauptmenue, .menue-knopf, .nach-oben { display: none; }
}