@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Next";
  src: url("../fonts/atkinson-next-var.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --nacht: #070B14;
  --tiefe: #0D1526;
  --kalk: #E4E2DD;
  --dunst: #CFCBC2;
  --cyan: #00C2FF;
  --kobalt: #1E7FFF;
  --linie: #33384A;
  --fehler: #FF9580;

  --display: "Outfit", "Segoe UI", sans-serif;
  --text: "Atkinson Next", "Segoe UI", Arial, sans-serif;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  --kante: 4px;
  --breite: 1600px;
  --rand: clamp(20px, 5vw, 48px);
  --kopfhoehe: 72px;
  --kopfzeile: 0px;
  --spalt: clamp(32px, 6vw, 96px);
}

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

html {
  /* Bezugsrahmen fuer die Mosaik-Huelle, damit sie genau so hoch ist wie das Dokument */
  position: relative;
  min-height: 100%;
  /* Doppeltippen zoomt nicht mehr (auf dem iPhone beim schnellen Antippen der Schubladen passiert),
     mit zwei Fingern zoomen geht weiter */
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--kopfhoehe) + var(--kopfzeile, 0px) + var(--s5));
  background: var(--nacht);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  color: var(--kalk);
  font-family: var(--text);
  font-size: 1.125rem;
  line-height: 1.65;
}

.mosaik-huelle {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}
/* Ein Band von knapp drei Bildschirmhoehen, pixl.js setzt Hoehe und Lage */
.mosaik {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: block;
  pointer-events: none;
  will-change: transform;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; }
p, li, dd, dt, label, address, .zeile { text-shadow: 0 0 2px rgba(7, 11, 20, .9), 0 1px 3px rgba(7, 11, 20, .7); }
.anruf, .anruf * { text-shadow: none; }
p + p { margin-top: var(--s4); }

a { color: var(--cyan); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

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

.sprung {
  position: absolute;
  left: var(--s4);
  top: -100px;
  z-index: 100;
  background: var(--kalk);
  color: var(--nacht);
  padding: var(--s3) var(--s4);
  font-weight: 700;
  border-radius: var(--kante);
}
.sprung:focus { top: var(--s4); }

.innen {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.paar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spalt);
}
@media (max-width: 860px) {
  .paar { grid-template-columns: 1fr; gap: var(--s8); }
}

.zeile {
  font-family: var(--display);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dunst);
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s5);
}
.zeile::before {
  content: "";
  width: 10px; height: 10px;
  background: var(--cyan);
  border-radius: 1px;
  flex: none;
}
.mitte { text-align: center; }
.mitte .zeile { justify-content: center; }


.anruf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  min-height: 48px;
  padding: var(--s3) var(--s5);
  background: var(--kalk);
  color: var(--nacht);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 0;
  border-radius: var(--kante);
  cursor: pointer;
}
.anruf:hover {
  transform: translate(var(--mx), calc(var(--my) - 2px));
  box-shadow: 0 10px 28px -10px rgba(228, 226, 221, .45);
}
.anruf:active { transform: translate(var(--mx), var(--my)); box-shadow: none; }
.anruf, .anfrage, .bewegung {
  --mx: 0px; --my: 0px;
  position: relative;
  transform: translate(var(--mx), var(--my));
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}
.anruf::after, .anfrage::after, .bewegung::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .anruf:hover::after, .anfrage:hover::after, .bewegung:hover::after { animation: puls 1.4s cubic-bezier(.2, .6, .3, 1) infinite; }
}
@keyframes puls {
  0% { opacity: 1; box-shadow: 0 0 0 0 rgba(0, 194, 255, .55); }
  100% { opacity: 1; box-shadow: 0 0 0 14px rgba(0, 194, 255, 0); }
}

/* Kopf */
.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7, 11, 20, .94);
  border-bottom: 1px solid var(--linie);
}
.kopf .innen {
  height: var(--kopfhoehe);
  display: flex;
  align-items: center;
  gap: var(--s6);
}
.marke {
  --wm: 36px;
  display: inline-flex;
  align-items: flex-end;
  gap: 0.75em;
  min-height: 44px;
  color: var(--kalk);
  text-decoration: none;
  white-space: nowrap;
  font-size: clamp(11px, calc(var(--wm) * 0.36), 15px);
}
.wortmarke {
  display: block;
  flex: none;
  width: calc(var(--wm) * 155 / 90);
  height: var(--wm);
  position: relative;
  background: currentColor;
  --bild: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 155 90'%3E%3Crect x='0.12' y='30.12' width='9.76' height='59.76' rx='1.3'/%3E%3Crect x='10.12' y='20.12' width='19.76' height='9.76' rx='1.3'/%3E%3Crect x='30.12' y='30.12' width='9.76' height='29.76' rx='1.3'/%3E%3Crect x='10.12' y='60.12' width='19.76' height='9.76' rx='1.3'/%3E%3Crect x='43.87' y='0.12' width='9.76' height='9.76' rx='1.3'/%3E%3Crect x='43.87' y='20.12' width='9.76' height='49.76' rx='1.3'/%3E%3Crect x='57.62' y='20.12' width='9.76' height='19.76' rx='1.3'/%3E%3Crect x='87.62' y='20.12' width='9.76' height='19.76' rx='1.3'/%3E%3Crect x='67.62' y='40.12' width='19.76' height='9.76' rx='1.3'/%3E%3Crect x='57.62' y='50.12' width='9.76' height='19.76' rx='1.3'/%3E%3Crect x='87.62' y='50.12' width='9.76' height='19.76' rx='1.3'/%3E%3Crect x='101.37' y='30.12' width='9.76' height='29.76' rx='1.3'/%3E%3Crect x='111.37' y='20.12' width='19.76' height='9.76' rx='1.3'/%3E%3Crect x='131.37' y='30.12' width='9.76' height='19.76' rx='1.3'/%3E%3Crect x='101.37' y='40.12' width='39.76' height='9.76' rx='1.3'/%3E%3Crect x='111.37' y='60.12' width='29.76' height='9.76' rx='1.3'/%3E%3Crect x='145.12' y='0.12' width='9.76' height='69.76' rx='1.3'/%3E%3C/svg%3E");
  -webkit-mask: var(--bild) no-repeat center / contain;
  mask: var(--bild) no-repeat center / contain;
}
.wortmarke > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.marke .studio {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1em;
  line-height: 1;
  margin-bottom: calc(var(--wm) * 0.2222 - 0.13em);
  letter-spacing: 0.34em;
  margin-right: -0.34em;
  color: var(--dunst);
}
.marke:hover .studio, .marke:focus-visible .studio { color: var(--kalk); }
.kopf nav { margin-left: auto; }
.bewegung {
  width: 44px; height: 44px;
  display: inline-grid;
  place-items: center;
  background: transparent;
  color: var(--kalk);
  border: 1px solid var(--linie);
  border-radius: var(--kante);
  cursor: pointer;
  flex: none;
}
.bewegung:hover { border-color: var(--dunst); }
.bewegung svg { fill: currentColor; }
.bewegung .weiter-zeichen { display: none; }
.bewegung[aria-pressed="true"] .pause { display: none; }
.bewegung[aria-pressed="true"] .weiter-zeichen { display: inline; }
.kopf nav ul { list-style: none; display: flex; gap: var(--s2); margin: 0; padding: 0; }
.kopf nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--s3);
  color: var(--kalk);
  text-decoration: none;
  font-size: 1rem;
}
.kopf nav a:hover { color: var(--cyan); }
.kopf .anruf { min-height: 44px; padding: var(--s2) var(--s4); font-size: 1rem; }
.kopf .anruf .kurz { display: none; }
@media (max-width: 860px) {
  /* Die Ziele wandern in eine eigene Zeile unter den Kopf. Wischbar, falls der Platz nicht reicht. */
  :root { --kopfhoehe: 56px; --kopfzeile: 47px; }
  .kopf .innen { flex-wrap: wrap; height: auto; gap: var(--s4); }
  .kopf .marke, .kopf .bewegung, .kopf .anruf { margin-block: 4px; }
  .bewegung { margin-left: auto; }
  .kopf nav {
    order: 3;
    width: calc(100% + 2 * var(--rand));
    margin-inline: calc(var(--rand) * -1);
    margin-top: 0;
    border-top: 1px solid var(--linie);
  }
  .kopf nav ul {
    gap: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    padding-inline: var(--rand);
    /* Am rechten Rand laeuft die Zeile aus: so sieht man, dass dort noch etwas steht */
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
  }
  .kopf nav ul::-webkit-scrollbar { display: none; }
  .kopf nav a { min-height: 46px; padding-inline: var(--s4); white-space: nowrap; }
  .kopf nav li:first-child a { padding-left: 0; }
}
@media (max-width: 380px) {
  .marke .studio { display: none; }
  .kopf .innen { gap: var(--s2); }
}
@media (max-width: 480px) {
  .kopf .innen { gap: var(--s3); }
  .marke { gap: 0.55em; }
  .kopf .anruf .lang { display: none; }
  .kopf .anruf .kurz { display: inline; }
}

section { padding-block: var(--s10); }
@media (max-width: 860px) {
  section { padding-block: var(--s9); }
}

/* Auftakt */
.auftakt {
  position: relative;
  padding-block: var(--s9) var(--s10);
  min-height: min(760px, calc(100svh - var(--kopfhoehe) - var(--kopfzeile, 0px)));
  display: flex;
  align-items: center;
}
.auftakt .paar { align-items: center; }
.auftakt::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* Unten 16 Streifen: der Links-rechts-Verlauf geht stetig in 0,75 über, ohne Kante zum nächsten Abschnitt */
  background:
    linear-gradient(90deg, rgba(5,10,30,0.880) 0%, rgba(5,10,30,0.750) 40%, rgba(5,10,30,0.202) 70%, rgba(5,10,30,0.002) 100%) 0 calc(100% - 150px) / 100% 10px no-repeat,
    linear-gradient(90deg, rgba(5,10,30,0.877) 0%, rgba(5,10,30,0.750) 40%, rgba(5,10,30,0.214) 70%, rgba(5,10,30,0.019) 100%) 0 calc(100% - 140px) / 100% 10px no-repeat,
    linear-gradient(90deg, rgba(5,10,30,0.871) 0%, rgba(5,10,30,0.750) 40%, rgba(5,10,30,0.236) 70%, rgba(5,10,30,0.049) 100%) 0 calc(100% - 130px) / 100% 10px no-repeat,
    linear-gradient(90deg, rgba(5,10,30,0.864) 0%, rgba(5,10,30,0.750) 40%, rgba(5,10,30,0.267) 70%, rgba(5,10,30,0.092) 100%) 0 calc(100% - 120px) / 100% 10px no-repeat,
    linear-gradient(90deg, rgba(5,10,30,0.855) 0%, rgba(5,10,30,0.750) 40%, rgba(5,10,30,0.306) 70%, rgba(5,10,30,0.145) 100%) 0 calc(100% - 110px) / 100% 10px no-repeat,
    linear-gradient(90deg, rgba(5,10,30,0.844) 0%, rgba(5,10,30,0.750) 40%, rgba(5,10,30,0.350) 70%, rgba(5,10,30,0.205) 100%) 0 calc(100% - 100px) / 100% 10px no-repeat,
    linear-gradient(90deg, rgba(5,10,30,0.833) 0%, rgba(5,10,30,0.750) 40%, rgba(5,10,30,0.399) 70%, rgba(5,10,30,0.271) 100%) 0 calc(100% - 90px) / 100% 10px no-repeat,
    linear-gradient(90deg, rgba(5,10,30,0.821) 0%, rgba(5,10,30,0.750) 40%, rgba(5,10,30,0.449) 70%, rgba(5,10,30,0.340) 100%) 0 calc(100% - 80px) / 100% 10px no-repeat,
    linear-gradient(90deg, rgba(5,10,30,0.809) 0%, rgba(5,10,30,0.750) 40%, rgba(5,10,30,0.501) 70%, rgba(5,10,30,0.410) 100%) 0 calc(100% - 70px) / 100% 10px no-repeat,
    linear-gradient(90deg, rgba(5,10,30,0.797) 0%, rgba(5,10,30,0.750) 40%, rgba(5,10,30,0.551) 70%, rgba(5,10,30,0.479) 100%) 0 calc(100% - 60px) / 100% 10px no-repeat,
    linear-gradient(90deg, rgba(5,10,30,0.786) 0%, rgba(5,10,30,0.750) 40%, rgba(5,10,30,0.600) 70%, rgba(5,10,30,0.545) 100%) 0 calc(100% - 50px) / 100% 10px no-repeat,
    linear-gradient(90deg, rgba(5,10,30,0.775) 0%, rgba(5,10,30,0.750) 40%, rgba(5,10,30,0.644) 70%, rgba(5,10,30,0.605) 100%) 0 calc(100% - 40px) / 100% 10px no-repeat,
    linear-gradient(90deg, rgba(5,10,30,0.766) 0%, rgba(5,10,30,0.750) 40%, rgba(5,10,30,0.683) 70%, rgba(5,10,30,0.658) 100%) 0 calc(100% - 30px) / 100% 10px no-repeat,
    linear-gradient(90deg, rgba(5,10,30,0.759) 0%, rgba(5,10,30,0.750) 40%, rgba(5,10,30,0.714) 70%, rgba(5,10,30,0.701) 100%) 0 calc(100% - 20px) / 100% 10px no-repeat,
    linear-gradient(90deg, rgba(5,10,30,0.753) 0%, rgba(5,10,30,0.750) 40%, rgba(5,10,30,0.736) 70%, rgba(5,10,30,0.731) 100%) 0 calc(100% - 10px) / 100% 10px no-repeat,
    linear-gradient(90deg, rgba(5,10,30,0.750) 0%, rgba(5,10,30,0.750) 40%, rgba(5,10,30,0.748) 70%, rgba(5,10,30,0.748) 100%) 0 calc(100% - 0px) / 100% 10px no-repeat,
    linear-gradient(90deg, rgba(5,10,30,0.880) 0%, rgba(5,10,30,0.750) 40%, rgba(5,10,30,0.200) 70%, rgba(5,10,30,0.000) 100%) 0 0 / 100% calc(100% - 160px) no-repeat;
}
.logoebene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.auftakt::after { content: none; }

main > section:not(.auftakt), .fuss { position: relative; }
main > section:not(.auftakt)::before, .fuss::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: rgba(5,10,30,0.75);
}
main > section.leitsatz::before {
  -webkit-mask-image: radial-gradient(ellipse min(980px, 60vw) calc(var(--ls) * 2.3) at 50% calc(var(--ls-oben) + var(--ls) * 1.02), rgba(0,0,0,0.43) 0%, rgba(0,0,0,0.43) 30%, #000 100%);
  mask-image: radial-gradient(ellipse min(980px, 60vw) calc(var(--ls) * 2.3) at 50% calc(var(--ls-oben) + var(--ls) * 1.02), rgba(0,0,0,0.43) 0%, rgba(0,0,0,0.43) 30%, #000 100%);
}
/* Dasselbe Licht hinter allen drei Kapitel-Überschriften. Mitte und Größe misst pixl.js am Text,
   ohne Skript bleibt nur das feste Licht des Leitsatzes. */
.js main > section.licht::before {
  -webkit-mask-image: radial-gradient(ellipse var(--licht-w, 1px) var(--licht-h, 1px) at var(--licht-x, 50%) var(--licht-y, 0px), rgba(0,0,0,0.43) 0%, rgba(0,0,0,0.43) 30%, #000 100%);
  mask-image: radial-gradient(ellipse var(--licht-w, 1px) var(--licht-h, 1px) at var(--licht-x, 50%) var(--licht-y, 0px), rgba(0,0,0,0.43) 0%, rgba(0,0,0,0.43) 30%, #000 100%);
}
main > section:not(.auftakt) > .innen, .fuss > .innen { position: relative; z-index: 1; }
.auftakt > .innen { position: relative; z-index: 1; }
@media (max-width: 767px) {
  .auftakt::before { background: rgba(5,10,30,0.75); }
  .auftakt::after { display: none; }
}
.auftakt h1 {
  font-size: clamp(2.1rem, 3.3vw + 0.6rem, 3.7rem);
  margin-bottom: var(--s5);
}
.auftakt h1 em { --akzent-hero: #7fe3ff; display: block; font-style: normal; color: var(--akzent-hero); }
.auftakt .paar > div > p:not(.zeile):not(.zeiten) { font-size: 1.1875rem; max-width: 32em; }
.handlung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4) var(--s5);
  margin-top: var(--s6);
}
.anfrage {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--s3) var(--s5);
  border: 2px solid var(--kalk);
  border-radius: var(--kante);
  color: var(--kalk);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.0625rem;
  text-decoration: none;
}
.anfrage:hover { background: rgba(0, 194, 255, .12); }
.auftakt .zeiten { margin-top: var(--s4); }
.zeiten { color: var(--dunst); font-size: 1rem; line-height: 1.4; }
.zeiten strong { color: var(--kalk); font-weight: 600; display: block; }

.zeichenfeld {
  height: 590px;
  margin-left: calc(var(--spalt) / -2);
}
@media (max-width: 860px) {
  .auftakt { min-height: 0; padding-block: var(--s7) var(--s6); }
  .zeichenfeld {
    height: 234px;
    margin-inline: calc(-1 * var(--rand));
    width: calc(100% + 2 * var(--rand));
  }
}

/* Problem: hier wird das Mosaik grau */
.problem .paar { align-items: start; }
.problem h2 { font-size: clamp(2rem, 4vw, 3.4rem); }
.problem p { font-size: 1.1875rem; }
/* Was wir ändern */
.leistungen h2, .arbeitsweise h2, .arbeiten > .innen > h2, .kontakt h2 { font-size: clamp(2rem, 3.6vw, 3rem); margin-bottom: var(--s5); }
.einleitung { font-size: 1.1875rem; max-width: 44em; margin-bottom: var(--s8); }
.wir .einleitung { font-size: 1.0625rem; margin-bottom: var(--s5); }
.abschluss { margin-top: var(--s8); max-width: 44em; color: var(--dunst); }
.vier {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s8) var(--spalt);
}
.vier h3, .drei h3 {
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  margin-bottom: var(--s3);
  padding-top: var(--s5);
  position: relative;
}
.vier h3::before, .drei h3::before {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 12px; height: 12px;
  background: var(--cyan);
  border-radius: 1px;
}
.vier p, .drei p { color: var(--dunst); max-width: 30em; }
.drei {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s7) var(--s7);
}
.nummeriert { list-style: none; margin: 0; padding: 0; counter-reset: leistung; }
.nummeriert li { counter-increment: leistung; }
.nummeriert h3 { padding-top: 0; }
.nummeriert h3::before {
  content: counter(leistung, decimal-leading-zero);
  position: static;
  display: block;
  width: auto; height: auto;
  background: none;
  color: var(--cyan);
  font-size: 1.125rem;
  letter-spacing: 0;
  margin-bottom: var(--s2);
}
@media (max-width: 960px) {
  .drei { grid-template-columns: 1fr; gap: var(--s6); }
}
@media (max-width: 760px) {
  .vier { grid-template-columns: 1fr; gap: var(--s7); }
}

/* Leitsatz */
.leitsatz { --ls: clamp(2.4rem, 6.4vw, 5.6rem); --ls-oben: var(--s10); }
@media (max-width: 860px) { .leitsatz { --ls-oben: var(--s9); } }
.leitsatz h2 {
  font-size: var(--ls);
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin-bottom: var(--s6);
}
.leitsatz h2 em { font-style: normal; color: var(--cyan); display: block; }
.leitsatz { overflow-x: clip; }
.leitsatz p { font-size: 1.1875rem; }
/* Vier Teile nebeneinander, links bündig. Dahinter wird es wieder dunkel: hell bleibt nur die Überschrift */
.leitsatz .teile {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s7) var(--spalt);
  margin-top: var(--s8);
  text-align: left;
}

.leitsatz .teile p + p { margin-top: 0; }
.leitsatz .teile p { padding-top: var(--s5); position: relative; }
.leitsatz .teile p::before {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 10px; height: 10px;
  background: var(--cyan);
  border-radius: 1px;
}
@media (max-width: 1100px) {
  .leitsatz .teile { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .leitsatz .teile { grid-template-columns: 1fr; gap: var(--s6); margin-top: var(--s7); }
}


/* Arbeiten */
.arbeit {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--spalt);
  align-items: center;
}
.arbeit + .arbeit { margin-top: calc(var(--s10) + var(--s5)); }
/* Zweite Arbeit seitenverkehrt: Text links, Bildschirm rechts */
.arbeit.gedreht { grid-template-columns: 5fr 7fr; }
.arbeit.gedreht .buehne { order: 2; padding: 0 0 0 5%; }
.arbeit.gedreht .monitor { margin-left: auto; }
.arbeit.gedreht .handy { right: auto; left: 0; }
@media (max-width: 860px) {
  .arbeit { grid-template-columns: 1fr; gap: var(--s7); }
  .arbeit.gedreht { grid-template-columns: 1fr; }
  .arbeit.gedreht .buehne { order: 0; padding: 0 5% 0 0; }
  .arbeit.gedreht .handy { right: 0; left: auto; }
  .arbeit + .arbeit { margin-top: var(--s9); }
}
.buehne { position: relative; margin: 0; padding: 0 5% 0 0; }
/* Monitor auf dem Schreibtisch: schmaler Rahmen, Kinn mit dem Punkt, Hals, Sockel mit Schatten */
.monitor { position: relative; width: 94%; }
.schirm {
  position: relative;
  padding: 1.3% 1.3% 4%;
  border-radius: 12px;
  background: linear-gradient(180deg, #242d3f 0%, #141a27 55%, #0e131d 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    inset 0 -1px 0 rgba(0, 0, 0, .6),
    0 50px 90px -45px rgba(0, 0, 0, .95),
    0 0 70px -25px rgba(0, 194, 255, .22);
}
.schirm img { display: block; width: 100%; height: auto; border-radius: 3px; background: #0B0B0B; }
.schirm::after {
  content: "";
  position: absolute;
  left: 1.3%; right: 1.3%; top: 1.3%;
  aspect-ratio: 1600 / 1011;
  border-radius: 3px;
  background: linear-gradient(118deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .02) 38%, transparent 38.2%);
  pointer-events: none;
}
.plakette {
  position: absolute;
  left: 50%;
  bottom: 1.4%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--cyan);
}
.hals {
  width: 13%;
  aspect-ratio: 13 / 8;
  margin: 0 auto;
  background: linear-gradient(90deg, #0c111a 0%, #222b3c 30%, #2c3649 50%, #1b2333 70%, #0c111a 100%);
  clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%);
}
.sockel {
  position: relative;
  width: 36%;
  height: 12px;
  margin: 0 auto;
  border-radius: 3px 3px 10px 10px;
  background: linear-gradient(180deg, #3a4559 0%, #1d2535 35%, #0f141e 100%);
}
.sockel::after {
  content: "";
  position: absolute;
  left: -30%; right: -30%;
  top: 70%;
  height: 34px;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .75), transparent);
  z-index: -1;
}
/* Handy steht vorn auf dem Tisch */
.handy {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 21%;
  padding: 2.4% 1.1% 1.1%;
  border-radius: 20px;
  background: linear-gradient(160deg, #2a3446, #121823 60%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 30px 50px -20px rgba(0, 0, 0, .95), 0 0 40px -15px rgba(0, 194, 255, .2);
}
.handy::before {
  content: "";
  position: absolute;
  top: 1%;
  left: 50%;
  transform: translateX(-50%);
  width: 22%;
  height: 1%;
  min-height: 4px;
  border-radius: 4px;
  background: #06090f;
}
.handy img { display: block; width: 100%; height: auto; border-radius: 12px; }
.arbeit .fall blockquote { margin-bottom: var(--s6); }
.arbeit blockquote {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.2rem, 3.8vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.arbeit blockquote p::before { content: "„"; color: var(--cyan); }
.arbeit blockquote p::after { content: "“"; color: var(--cyan); }
.arbeit h3 { font-size: 1.5rem; margin-bottom: var(--s3); }
.weiter { margin-top: var(--s5); }
.weiter a { display: inline-flex; align-items: center; min-height: 44px; }

/* Wer wir sind, Ablauf */
.wir h2 { font-size: clamp(1.75rem, 2.6vw, 2.25rem); margin-bottom: var(--s6); }
.wir .paar > div > p { font-size: 1.1875rem; }
.rollen { margin: var(--s6) 0 0; display: grid; gap: var(--s4); }
.rollen dt { font-family: var(--display); font-weight: 700; font-size: 1.375rem; }
.rollen dd { margin: 0; color: var(--dunst); }
.schritte { list-style: none; margin: 0; padding: 0; counter-reset: schritt; }
.schritte li {
  counter-increment: schritt;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--s4);
  padding-block: var(--s3);
}
.schritte li::before {
  content: counter(schritt, decimal-leading-zero);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--cyan);
  line-height: 1.4;
}
.schritte h3 { font-size: 1.25rem; margin-bottom: var(--s1); letter-spacing: -0.01em; }
.schritte p { color: var(--dunst); }

/* Kontakt */
.kontakt-kopf { margin-bottom: var(--s8); }
.kontakt-kopf h2 { font-size: clamp(2.2rem, 5vw, 4rem); margin-bottom: var(--s4); }
.kontakt-kopf p { font-size: 1.1875rem; }
.kontakt h3 { font-size: 1.5rem; margin-bottom: var(--s2); }
.nummer {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--cyan);
  text-decoration: none;
  margin-block: var(--s3) var(--s4);
  white-space: nowrap;
  min-height: 48px;
}
.nummer:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.telefon .zeiten { font-size: 1.125rem; }
.anfrageform > p:first-of-type { color: var(--dunst); margin-bottom: var(--s5); }
.feld { display: grid; gap: var(--s1); margin-bottom: var(--s5); }
.feld label { font-weight: 600; font-size: 1rem; }
.feld .wahl { color: var(--dunst); font-weight: 400; }
.feld input, .feld textarea {
  font: inherit;
  font-size: 1.0625rem;
  color: var(--kalk);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--dunst);
  border-radius: 0;
  padding: var(--s2) 0;
  min-height: 48px;
  width: 100%;
}
.feld input::placeholder { color: var(--dunst); opacity: 1; }
.feld input:focus-visible, .feld textarea:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
  border-bottom-color: var(--cyan);
}
.feld [aria-invalid="true"] { border-bottom-color: var(--fehler); }
.feld textarea { min-height: 112px; resize: vertical; }
.anfrageform .anruf { width: 100%; margin-top: var(--s2); }
.zusatz { margin-top: var(--s4); }
.kontakt .paar > div > p { font-size: 1.1875rem; max-width: 30em; }
.rollen dd strong { color: var(--kalk); font-weight: 600; }
.meldung { margin-top: var(--s4); font-weight: 600; color: var(--fehler); }
.meldung:empty { display: none; }
.meldung.ok { color: var(--kalk); }
.versteckt { display: none; }
.hinweis { font-size: 0.9375rem; color: var(--dunst); margin-top: var(--s4); }

/* Schubladen, nur auf dem Handy. Am Rechner ist alles offen und nichts klickbar. */
.lade > summary { list-style: none; }
.lade > summary::-webkit-details-marker { display: none; }
@media (min-width: 861px) {
  .lade > summary { display: contents; }
  .lade-inhalt { display: contents; }
}
@media (max-width: 860px) {
  /* Geschlossen liegt die Platte leicht nach hinten gekippt und etwas gedämpft. Gedämpft wird über die
     Deckkraft, nicht über einen Filter: elf gefilterte Ebenen kosten Safari beim Scrollen jedes Bild. */
  .lade {
    position: relative;
    padding: var(--s3) 0 var(--s3) var(--s5);
    transform-origin: 50% 0;
    transform: perspective(620px) rotateX(7.5deg) translateZ(-10px);
    transition: transform 0.55s cubic-bezier(.2, .9, .25, 1), opacity 0.55s ease;
    opacity: 0.84;
  }
  /* Die Schublade in der Lesezone richtet sich ein Stück auf, ihre Kante wird heller,
     und einmal läuft Licht an den Kacheln der Kante hinunter */
  .lade.wach:not([open]) {
    transform: perspective(620px) rotateX(2.5deg) translateZ(-3px);
    opacity: 0.97;
  }
  .lade.wach::before { opacity: 0.85; }
  .lade.wach > summary::after { color: var(--kalk); }
  .lade::after {
    content: "";
    position: absolute;
    left: 0; top: var(--s2); bottom: var(--s2);
    width: 3px;
    background: repeating-linear-gradient(180deg, var(--cyan) 0 6px, transparent 6px 9px);
    -webkit-mask: linear-gradient(180deg, transparent 38%, #000 50%, transparent 62%) 0 100% / 100% 300% no-repeat;
    mask: linear-gradient(180deg, transparent 38%, #000 50%, transparent 62%) 0 100% / 100% 300% no-repeat;
    pointer-events: none;
  }
  .lade.wach:not([open])::after { animation: funke 1.5s 0.12s cubic-bezier(.45, 0, .3, 1) both; }
  @keyframes funke {
    from { -webkit-mask-position: 0 100%; mask-position: 0 100%; }
    to { -webkit-mask-position: 0 0; mask-position: 0 0; }
  }
  /* Offen oder gerade angetippt: aufgerichtet, Kante und Pfeil in Cyan. Beim Schliessen kippt sie gleich zurück. */
  .lade[open]:not(.schliesst), .lade.kommt {
    transform: perspective(620px) rotateX(0deg) translateZ(0);
    opacity: 1;
  }
  /* Offen schliesst sich der Rahmen: zur senkrechten Kante kommt eine waagerechte darunter */
  .lade-inhalt::after {
    content: "";
    display: block;
    height: 3px;
    margin-top: var(--s4);
    background: repeating-linear-gradient(90deg, var(--cyan) 0 6px, transparent 6px 9px);
    transform-origin: left;
    animation: kante-aus 0.5s 0.12s cubic-bezier(.2, .9, .25, 1) both;
  }
  @keyframes kante-aus { from { transform: scaleX(0); opacity: 0; } }
  /* Die Kante ist keine Umrandung, sondern eine Reihe Kacheln: links senkrecht, unten waagerecht */
  .lade::before {
    content: "";
    position: absolute;
    left: 0; top: var(--s2); bottom: var(--s2);
    width: 3px;
    color: var(--dunst);
    background: repeating-linear-gradient(180deg, currentColor 0 6px, transparent 6px 9px);
    opacity: 0.5;
    transition: opacity 0.4s ease, color 0.4s ease;
  }
  .lade[open]:not(.schliesst)::before, .lade.kommt::before { opacity: 1; color: var(--cyan); }
  .lade > summary {
    display: flex;
    align-items: center;
    gap: var(--s4);
    min-height: 48px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .lade > summary h3 { margin: 0; flex: 1; }
  /* Das Zeichen rechts: derselbe Pfeil aus 5, 3 und 1 Kachel wie unter den Kapiteln, kleiner */
  .lade > summary::after {
    content: "";
    flex: none;
    width: 2px; height: 2px;
    margin: 0 10px 4px 0;
    color: var(--dunst);
    background: currentColor;
    box-shadow: 2px 0 currentColor, 4px 0 currentColor, 6px 0 currentColor, 8px 0 currentColor,
      2px 2px currentColor, 4px 2px currentColor, 6px 2px currentColor, 4px 4px currentColor;
    transform-origin: 5px 3px;
    transition: transform 0.45s cubic-bezier(.2, .9, .25, 1), color 0.45s ease;
  }
  .lade[open]:not(.schliesst) > summary::after, .lade.kommt > summary::after { transform: rotate(180deg); color: var(--cyan); }
  .lade > summary:active { transform: translateZ(0) scale(0.985); }
  .lade-inhalt > p { margin-top: var(--s3); }
  .vier > li, .drei > div, .schritte > li > div { overflow: visible; }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .lade, .lade::before, .lade > summary::after { transition: none; }
  .lade, .lade.wach:not([open]) { transform: none; }
  .lade::after { display: none; }
  .lade.wach:not([open]) { opacity: 0.84; }
  .lade.wach:not([open])::before { opacity: 0.5; }
  .lade.wach:not([open]) > summary::after { color: var(--dunst); }
}

/* Kapitel: auf dem Handy klappen Leistungen, Arbeitsweise und Leitsatz als Ganzes auf.
   Unter der Überschrift liegt eine Leiste aus kleinen Kacheln, in der Mitte ein Pfeil aus 5, 3 und 1 Kachel.
   Das Aufklappen selbst (Kachelregen, Text Spalte für Spalte) macht pixl.js. */
.kapitel > summary { list-style: none; }
.kapitel > summary::-webkit-details-marker { display: none; }
@media (min-width: 861px) {
  .kapitel > summary, .kapitel-inhalt { display: contents; }
}
@media (max-width: 860px) {
  .kapitel > summary {
    display: block;
    position: relative;
    padding-bottom: 20px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  /* Die drei Kapitel sind gleichrangig und sehen gleich aus: gleiche Größe, zentriert über dem mittigen
     Pfeil, ohne Cyan. Cyan heißt in dieser Liste "offen" (Leiste und Pfeil), nicht "wichtiger".
     Am Rechner bleibt der Leitsatz groß und blau, dort steht er allein. */
  .kapitel > summary h2 {
    /* 28 px bei 360 bis 32 px ab 412: so bleibt jede Überschrift auch auf schmalen Handys zweizeilig */
    font-size: clamp(1.75rem, 7.8vw, 2rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    text-align: center;
    margin-bottom: var(--s5);
  }
  .kapitel > summary h2 em { color: inherit; }
  .kapitel > summary::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 4px;
    color: var(--dunst);
    opacity: 0.4;
    background:
      repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px) left / calc(50% - 22px) 100% no-repeat,
      repeating-linear-gradient(270deg, currentColor 0 4px, transparent 4px 7px) right / calc(50% - 22px) 100% no-repeat;
    transition: color 0.45s ease, opacity 0.45s ease;
  }
  .kapitel > summary::before {
    content: "";
    position: absolute;
    left: calc(50% - 7.5px);
    top: calc(100% - 6.5px);
    width: 3px; height: 3px;
    color: var(--kalk);
    background: currentColor;
    box-shadow: 3px 0 currentColor, 6px 0 currentColor, 9px 0 currentColor, 12px 0 currentColor,
      3px 3px currentColor, 6px 3px currentColor, 9px 3px currentColor, 6px 6px currentColor;
    transform-origin: 7.5px 4.5px;
    transition: transform 0.5s cubic-bezier(.2, .9, .25, 1), color 0.45s ease;
  }
  .kapitel[open]:not(.schliesst) > summary::after, .kapitel.kommt > summary::after { color: var(--cyan); opacity: 1; }
  .kapitel[open]:not(.schliesst) > summary::before, .kapitel.kommt > summary::before { color: var(--cyan); transform: rotate(180deg); }
  .kapitel-inhalt { padding-top: var(--s7); }
  /* Leinwand für den Kachelregen, nur während des Aufklappens, unter dem Text */
  .regen { position: absolute; z-index: -1; pointer-events: none; }
  .kapitel-inhalt > .einleitung { margin-bottom: var(--s7); }
  /* Zugeklappt ruht der Abschnitt enger, damit drei Kapitel nicht in Leere schwimmen */
  main > section:has(.kapitel:not([open])) { padding-bottom: 0; }
  main > section:has(.kapitel:not([open])) + section:has(.kapitel) { padding-top: var(--s8); }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .kapitel > summary::after, .kapitel > summary::before { transition: none; }
}

/* Fuß */
.fuss { padding-block: var(--s7) var(--s8); font-size: 1rem; color: var(--dunst); text-align: center; }
.fuss .marke { --wm: 45px; justify-content: center; }
.fuss address { font-style: normal; margin-top: var(--s3); }

/* Bewegung */


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

@media (max-width: 860px) {
  .problem .paar { gap: var(--s5); }
}

main:focus { outline: none; }
.recht-links { list-style: none; display: flex; justify-content: center; gap: var(--s5); margin: var(--s3) 0 0; padding: 0; }
.recht-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: var(--kalk); }

@media (forced-colors: active) {
  .mosaik, .logoebene { display: none; }
  .auftakt::before, .auftakt::after, main > section::before, .fuss::before { display: none; }
}

/* Rechtliche Unterseiten */
.recht { padding-block: var(--s9) var(--s10); }
.schmal { max-width: 820px; }
.recht h1 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); margin-bottom: var(--s6); hyphens: auto; overflow-wrap: break-word; }
.recht h2 { font-size: 1.25rem; letter-spacing: -0.01em; margin: var(--s7) 0 var(--s3); }
.recht p + p { margin-top: var(--s3); }
.recht .offen { color: var(--fehler); font-weight: 600; }
.recht .stand { color: var(--dunst); margin-top: var(--s8); font-size: 1rem; }

/* Überschriften: heller Schein. Einblenden: der Buchstabe selbst erscheint durch ein Kachelraster, das feiner wird */
@property --k { syntax: "<length>"; inherits: false; initial-value: 0.16em; }
@property --kv { syntax: "<percentage>"; inherits: false; initial-value: 76%; }
h1, h2, h3 { text-shadow: 0 0 18px rgba(127, 227, 255, 0.28), 0 0 3px rgba(127, 227, 255, 0.2); }
.nur-vorlesen {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.wort { white-space: nowrap; }
.recht h1 .wort { white-space: normal; hyphens: auto; }
.rg-fall.los .pz {
  -webkit-mask: none;
  mask: none;
  -webkit-text-fill-color: currentColor;
  display: inline-block;
  animation: fallen 0.46s cubic-bezier(.2, 1.5, .45, 1) both;
  animation-delay: calc(var(--i) * var(--takt));
}
@keyframes fallen {
  0% { opacity: 0; transform: translateY(-1.7em); }
  55% { opacity: 1; transform: translateY(0.16em); }
  78% { transform: translateY(-0.07em); }
  100% { opacity: 1; transform: translateY(0); }
}

.pz, .wz {
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}
.los .pz, .los .wz {
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.los .pz {
  animation: pz-bau 0.51s linear both;
  animation-delay: calc(var(--d, 0ms) + var(--i) * var(--takt, 36ms));
}
@keyframes pz-bau {
  0% { opacity: 0; -webkit-text-fill-color: #7fe3ff; -webkit-mask-image: linear-gradient(90deg, #000 76%, transparent 0), linear-gradient(#000 76%, transparent 0); mask-image: linear-gradient(90deg, #000 76%, transparent 0), linear-gradient(#000 76%, transparent 0); -webkit-mask-size: 0.16em 0.16em; mask-size: 0.16em 0.16em; }
  1%, 24% { opacity: 0.32; -webkit-text-fill-color: #7fe3ff; -webkit-mask-image: linear-gradient(90deg, #000 76%, transparent 0), linear-gradient(#000 76%, transparent 0); mask-image: linear-gradient(90deg, #000 76%, transparent 0), linear-gradient(#000 76%, transparent 0); -webkit-mask-size: 0.16em 0.16em; mask-size: 0.16em 0.16em; }
  25%, 49% { opacity: 0.55; -webkit-text-fill-color: #7fe3ff; -webkit-mask-image: linear-gradient(90deg, #000 76%, transparent 0), linear-gradient(#000 76%, transparent 0); mask-image: linear-gradient(90deg, #000 76%, transparent 0), linear-gradient(#000 76%, transparent 0); -webkit-mask-size: 0.1em 0.1em; mask-size: 0.1em 0.1em; }
  50%, 72% { opacity: 0.78; -webkit-text-fill-color: currentColor; -webkit-mask-image: linear-gradient(90deg, #000 76%, transparent 0), linear-gradient(#000 76%, transparent 0); mask-image: linear-gradient(90deg, #000 76%, transparent 0), linear-gradient(#000 76%, transparent 0); -webkit-mask-size: 0.062em 0.062em; mask-size: 0.062em 0.062em; }
  73%, 90% { opacity: 0.92; -webkit-text-fill-color: currentColor; -webkit-mask-image: linear-gradient(90deg, #000 76%, transparent 0), linear-gradient(#000 76%, transparent 0); mask-image: linear-gradient(90deg, #000 76%, transparent 0), linear-gradient(#000 76%, transparent 0); -webkit-mask-size: 0.036em 0.036em; mask-size: 0.036em 0.036em; }
  91%, 100% { opacity: 1; -webkit-text-fill-color: currentColor; -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000); mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000); -webkit-mask-size: auto; mask-size: auto; text-shadow: 0 0 18px rgba(127, 227, 255, 0.28), 0 0 3px rgba(127, 227, 255, 0.2); }
}

/* Texte: Wort für Wort, gleiche Kachelsprache, feiner und schneller */
.los .wz {
  animation: wz-bau 0.34s linear both;
  animation-delay: calc(var(--d, 0ms) + var(--j) * 14ms);
}
@keyframes wz-bau {
  0% { opacity: 0; -webkit-text-fill-color: #7fe3ff; -webkit-mask-image: linear-gradient(90deg, #000 76%, transparent 0), linear-gradient(#000 76%, transparent 0); mask-image: linear-gradient(90deg, #000 76%, transparent 0), linear-gradient(#000 76%, transparent 0); -webkit-mask-size: 0.22em 0.22em; mask-size: 0.22em 0.22em; }
  1%, 32% { opacity: 0.4; -webkit-text-fill-color: #7fe3ff; -webkit-mask-image: linear-gradient(90deg, #000 76%, transparent 0), linear-gradient(#000 76%, transparent 0); mask-image: linear-gradient(90deg, #000 76%, transparent 0), linear-gradient(#000 76%, transparent 0); -webkit-mask-size: 0.22em 0.22em; mask-size: 0.22em 0.22em; }
  33%, 64% { opacity: 0.7; -webkit-text-fill-color: currentColor; -webkit-mask-image: linear-gradient(90deg, #000 76%, transparent 0), linear-gradient(#000 76%, transparent 0); mask-image: linear-gradient(90deg, #000 76%, transparent 0), linear-gradient(#000 76%, transparent 0); -webkit-mask-size: 0.12em 0.12em; mask-size: 0.12em 0.12em; }
  65%, 88% { opacity: 0.9; -webkit-text-fill-color: currentColor; -webkit-mask-image: linear-gradient(90deg, #000 76%, transparent 0), linear-gradient(#000 76%, transparent 0); mask-image: linear-gradient(90deg, #000 76%, transparent 0), linear-gradient(#000 76%, transparent 0); -webkit-mask-size: 0.07em 0.07em; mask-size: 0.07em 0.07em; }
  89%, 100% { opacity: 1; -webkit-text-fill-color: currentColor; -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000); mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000); -webkit-mask-size: auto; mask-size: auto; text-shadow: 0 0 2px rgba(7, 11, 20, .9), 0 1px 3px rgba(7, 11, 20, .7); }
}

/* Knöpfe, Formularfelder und Absätze mit Links: aus Kacheln, die feiner werden */
@property --kb { syntax: "<length>"; inherits: false; initial-value: 12px; }
.rg-knopf, .rg-block { opacity: 0; }
.rg-knopf.los, .rg-block.los {
  -webkit-mask: linear-gradient(90deg, #000 var(--kv), transparent 0) 0 0 / var(--kb) var(--kb), linear-gradient(#000 var(--kv), transparent 0) 0 0 / var(--kb) var(--kb);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  animation: knopf-bau 0.5s linear both;
  animation-delay: var(--d, 0ms);
}
@keyframes knopf-bau {
  0% { opacity: 0; --kb: 12px; }
  1%, 33% { opacity: 0.5; --kb: 12px; }
  34%, 66% { opacity: 0.8; --kb: 6px; }
  67%, 90% { opacity: 1; --kb: 3px; }
  91%, 100% { opacity: 1; --kb: 1px; --kv: 100%; }
}

/* Zeichen und Zahlen gehören zum Auftritt: Nummern sind echte Buchstaben (pixl.js), Quadrate bauen sich aus 2x2 Kacheln */
.nr { display: block; font-family: var(--display); font-weight: 700; color: var(--cyan); letter-spacing: 0; }
.nummeriert .nr { font-size: 1.125rem; line-height: 1.08; margin-bottom: var(--s2); }
.nummeriert.mit-nr h3::before, .schritte.mit-nr li::before { content: none; }
.schritte .nr { font-size: 1.25rem; line-height: 1.4; }
.drei h3.rg-titel::before, .zeile.rg-text::before, .leitsatz .teile p.rg-text::before { opacity: 0; }
.drei h3.los::before, .zeile.los::before, .leitsatz .teile p.los::before {
  -webkit-mask: linear-gradient(90deg, #000 var(--kv), transparent 0) 0 0 / var(--kb) var(--kb), linear-gradient(#000 var(--kv), transparent 0) 0 0 / var(--kb) var(--kb);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  animation: zeichen-bau 0.5s linear both;
  animation-delay: var(--d, 0ms);
}
@keyframes zeichen-bau {
  0% { opacity: 0; --kb: 6px; }
  1%, 45% { opacity: 0.7; --kb: 6px; }
  46%, 80% { opacity: 0.9; --kb: 4px; }
  81%, 100% { opacity: 1; --kv: 100%; }
}
.zeile.los::before, .leitsatz .teile p.los::before { animation-name: zeichen-bau-klein; }
@keyframes zeichen-bau-klein {
  0% { opacity: 0; --kb: 5px; }
  1%, 45% { opacity: 0.7; --kb: 5px; }
  46%, 80% { opacity: 0.9; --kb: 3.4px; }
  81%, 100% { opacity: 1; --kv: 100%; }
}
.arbeit blockquote p.rg-text::before, .arbeit blockquote p.rg-text::after { -webkit-text-fill-color: transparent; }
.arbeit blockquote p.los::before, .arbeit blockquote p.los::after {
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  animation: wz-bau 0.34s linear both;
  animation-delay: var(--d, 0ms);
}
.arbeit blockquote p.los::after { animation-delay: calc(var(--d, 0ms) + var(--n, 0) * 14ms); }

@media (prefers-reduced-motion: reduce), (forced-colors: active) {
.pz, .wz { -webkit-text-fill-color: currentColor !important; text-shadow: inherit !important; }
  .rg-knopf, .rg-block { opacity: 1 !important; -webkit-mask: none !important; mask: none !important; }
  .rg-titel::before, .rg-text::before, .rg-text::after { opacity: 1 !important; -webkit-text-fill-color: currentColor !important; -webkit-mask: none !important; mask: none !important; }
}

/* Vorspann: die Seite wartet, bis pixl.js sie freigibt. Kommt pixl.js nicht, zeigt sie sich nach 4 s von selbst. */
html { scrollbar-gutter: stable; }
html.sperre { overflow: hidden; }
/* Die Seite wird nicht versteckt, sondern verdeckt: eine deckende Flaeche liegt darueber, bis der
   Vorspann sie freigibt. So malt der Browser den Inhalt sofort, statt auf das Skript zu warten.
   Kommt das Skript nicht, verschwindet die Flaeche nach 4 s von selbst. */
/* Die Flaeche selbst haelt Klicks ab, solange sie liegt. Der Inhalt darunter bleibt bedienbar,
   damit die Seite auch ohne Skript benutzbar ist: nach vier Sekunden wird die Flaeche unsichtbar
   UND durchlaessig. */
.warten:not(.frei)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 54;
  background: var(--nacht);
  animation: notfall 0s 4s forwards;
}
.warten.laeuft:not(.frei)::before { animation-delay: 12s; }
@keyframes notfall { to { opacity: 0; pointer-events: none; } }
.frei :is(.kopf, main, .fuss) { transition: opacity 0.75s ease; }
.vorspann-weiter {
  position: fixed;
  right: var(--s5);
  bottom: var(--s5);
  z-index: 60;
  min-height: 44px;
  padding: var(--s2) var(--s4);
  background: rgba(7, 11, 20, 0.7);
  color: var(--dunst);
  font: inherit;
  font-size: 1rem;
  border: 1px solid var(--linie);
  border-radius: var(--kante);
  cursor: pointer;
  animation: weiter-da 0.3s ease both;
}
.vorspann-weiter:hover { color: var(--kalk); border-color: var(--dunst); }
@keyframes weiter-da { from { opacity: 0; } }

/* Nach dem Auftritt: Masken weg, damit der fertige Text nichts mehr kostet */
.fertig .pz, .fertig .wz, .rg-knopf.fertig, .rg-block.fertig, .fertig::before, .fertig::after { -webkit-mask: none; mask: none; }

/* Vorbeigescrollt, ohne Auftritt: sofort im Endzustand */
.ohne .pz { -webkit-text-fill-color: currentColor; text-shadow: 0 0 18px rgba(127, 227, 255, 0.28), 0 0 3px rgba(127, 227, 255, 0.2); }
.ohne .wz { -webkit-text-fill-color: currentColor; text-shadow: 0 0 2px rgba(7, 11, 20, .9), 0 1px 3px rgba(7, 11, 20, .7); }
.rg-knopf.ohne, .rg-block.ohne, .drei h3.ohne::before, .zeile.ohne::before, .leitsatz .teile p.ohne::before { opacity: 1; }
.arbeit blockquote p.ohne::before, .arbeit blockquote p.ohne::after { -webkit-text-fill-color: currentColor; }

/* Startseite: statt Formular der Weg zur Anfrage */
.kontakt-weg { align-self: center; justify-self: start; }
.anruf.gross { min-height: 60px; padding: var(--s4) var(--s6); font-size: 1.25rem; }
.kontakt-weg .zusatz { margin-top: var(--s5); color: var(--dunst); max-width: 26em; }

/* Unterseite Projekt anfragen */
.anfrage-seite { padding-block: var(--s9) var(--s10); }
.anfrage-seite .paar { align-items: start; }
.anfrage-info h1 { font-size: clamp(2.4rem, 4.6vw, 4.4rem); margin-bottom: var(--s5); }
.anfrage-info .lead { font-size: 1.1875rem; max-width: 30em; }
.anfrage-info h2 {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dunst);
  text-shadow: none;
  margin: var(--s8) 0 var(--s4);
}
.anfrage-info .schritte h3 { margin: 0; line-height: 1.4; }
.anfrage-info .rollen { margin-top: 0; }
.anfrageform { padding-top: var(--s2); }
.felder { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s6); }
.felder .breit { grid-column: 1 / -1; }
.anfrage-seite .feld { margin-bottom: var(--s6); }
/* Felder in Kachelsprache: Kachel vor der Beschriftung, Linie aus Kacheln, die beim Fokus von links aufleuchten */
.anfrage-seite .feld { margin-bottom: var(--s7); }
.anfrage-seite .feld label {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dunst);
}
.anfrage-seite .feld .wahl { font-family: var(--text); text-transform: none; letter-spacing: 0; font-weight: 400; }
.anfrage-seite .feld label::before {
  content: "";
  flex: none;
  width: 10px; height: 10px;
  border-radius: 1px;
  background: #13499F;
  transition: background-color .3s ease, box-shadow .3s ease;
}
.anfrage-seite .feld:focus-within label::before { background: transparent; box-shadow: inset 0 0 0 2px var(--cyan); }
.anfrage-seite .feld.voll label::before { background: var(--cyan); box-shadow: 0 0 10px rgba(0, 194, 255, .55); }
.anfrage-seite .feld:focus-within label { color: var(--kalk); }
.anfrage-seite .feld input, .anfrage-seite .feld textarea {
  font-size: 1.1875rem;
  border-bottom: 0;
  padding: var(--s3) 0 var(--s4);
  caret-color: var(--cyan);
  background:
    repeating-linear-gradient(90deg, var(--cyan) 0 7px, transparent 7px 10px) left bottom / 0% 3px no-repeat,
    repeating-linear-gradient(90deg, var(--dunst) 0 7px, transparent 7px 10px) left bottom / 100% 3px no-repeat;
  transition: background-size .5s cubic-bezier(.2, .8, .2, 1);
}
.anfrage-seite .feld input:focus, .anfrage-seite .feld textarea:focus { background-size: 100% 3px, 100% 3px; }
.anfrage-seite .feld input:focus-visible, .anfrage-seite .feld textarea:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.anfrage-seite .feld [aria-invalid="true"] {
  background:
    repeating-linear-gradient(90deg, var(--fehler) 0 7px, transparent 7px 10px) left bottom / 100% 3px no-repeat;
}
.anfrage-seite .feld textarea { min-height: 7lh; resize: vertical; }
@supports (field-sizing: content) {
  .anfrage-seite .feld textarea { field-sizing: content; resize: none; }
}
.absenden { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5) var(--s6); }
.absenden .zusatz { margin: 0; max-width: 17em; color: var(--dunst); }
.anfrage-seite .hinweis { margin-top: var(--s6); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .anfrageform.bereit .absenden .anruf::after { animation: puls 1.4s cubic-bezier(.2, .6, .3, 1) 2; }
}
.anfrage-seite .anfrageform .anruf { width: auto; min-height: 60px; padding: var(--s4) var(--s7); font-size: 1.25rem; }
@media (min-width: 861px) {
  .anfrage-seite .paar { grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; row-gap: 0; }
  .anfrage-kopf { grid-column: 1; grid-row: 1; }
  .anfrage-mehr { grid-column: 1; grid-row: 2; }
  .anfrageform { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 860px) {
  .anfrage-seite { padding-block: var(--s7) var(--s9); }
  .anfrage-info h2 { margin-top: var(--s6); }
}
@media (max-width: 600px) {
  .felder { grid-template-columns: 1fr; }
  .anfrage-seite .anfrageform .anruf { width: 100%; }
}
@media (forced-colors: active) {
  .anfrage-seite .feld input, .anfrage-seite .feld textarea { border-bottom: 2px solid CanvasText; }
}

/* Vorspann-Vorhang über der Seite; beim Zusammensetzen liegt die Seite schon sichtbar darunter */
.vorhang { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 55; pointer-events: none; display: block; transition: opacity 0.85s cubic-bezier(.4, 0, .2, 1); }
.vorhang.weg { opacity: 0; }
.frei.hart :is(.kopf, main, .fuss) { transition: none; }

/* Referenzbild: aus großen Kacheln, die feiner werden */
.buehne.rg-block.los { animation-name: bild-bau; animation-duration: 0.8s; }
@keyframes bild-bau {
  0% { opacity: 0; --kb: 48px; }
  1%, 25% { opacity: 0.5; --kb: 48px; }
  26%, 50% { opacity: 0.75; --kb: 24px; }
  51%, 75% { opacity: 0.9; --kb: 12px; }
  76%, 92% { opacity: 1; --kb: 6px; }
  93%, 100% { opacity: 1; --kb: 6px; --kv: 100%; }
}

/* Häkchen vor dem Absenden: Kästchen mit Kachel, nie vorangekreuzt */
.haken { display: flex; align-items: flex-start; gap: var(--s3); margin-bottom: var(--s4); }
.haken + .absenden { margin-top: var(--s5); }
.haken input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 24px; height: 24px;
  margin: 0;
  display: grid;
  place-content: center;
  background: transparent;
  border: 2px solid var(--dunst);
  border-radius: 2px;
  cursor: pointer;
  transition: border-color .2s ease;
}
.haken input::before {
  content: "";
  width: 12px; height: 12px;
  border-radius: 1px;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(0, 194, 255, .6);
  transform: scale(0);
  transition: transform .2s cubic-bezier(.2, .8, .2, 1);
}
.haken input:checked { border-color: var(--cyan); }
.haken input:checked::before { transform: scale(1); }
.haken input:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.haken input[aria-invalid="true"] { border-color: var(--fehler); }
.haken label { font-size: 1rem; line-height: 1.5; cursor: pointer; }
@media (forced-colors: active) {
  .haken input { appearance: auto; -webkit-appearance: auto; }
  .haken input::before { display: none; }
}