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

:root {
  /* Grundton aus dem Startbild: kühl und perlmuttfarben statt warm. Die
     Fläche unter dem Startbereich liegt eine Spur tiefer als die Tafeln, die
     darauf schweben — daraus kommt deren Abhebung. */
  color-scheme: light;
  /* Deckung des Schleiers unterhalb des Startbereichs. Auf dem Telefon
     stärker, dort soll die Bewegung noch weiter zurücktreten. */
  --schleier-deckung: 0.92;
  --grund: #e8ecf3;
  --grund-hoch: #f7f9fc;

  /* Die Farben der Seifenblase, stark verdünnt. Sie tragen die Lichter auf
     der Grundfläche und den Schimmer an den Tafelkanten. Mehr Farbe als hier
     kippt die Seite ins Bunte. */
  --schimmer-cyan: rgba(150, 202, 232, 0.30);
  --schimmer-flieder: rgba(191, 180, 232, 0.26);

  /* Tinte ebenfalls kühl, damit Schrift und Grund derselben Familie angehören. */
  --tinte: #111823;
  --tinte-weich: rgba(23, 32, 48, 0.68);
  --tinte-mittel: rgba(23, 32, 48, 0.54);
  --tinte-zart: rgba(23, 32, 48, 0.44);
  --tinte-fein: rgba(23, 32, 48, 0.28);
  --linie: rgba(23, 32, 48, 0.12);
  --linie-fein: rgba(23, 32, 48, 0.08);
  --linie-stark: rgba(23, 32, 48, 0.2);
  --schrift: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Archivo, selbst ausgeliefert. Eine veränderliche Schrift mit den Achsen
   Gewicht (100–900) und Breite (62–125 %) — daraus kommt der ganze Satz der
   Seite, vom schweren schmalen Anzeigegrad bis zum Fließtext. Dieselbe
   Familie trägt den Schriftzug der Marke.

   Örtlich statt von einem fremden Netz: keine IP-Adresse geht beim Aufruf an
   Dritte, und Archivo steht unter der Open Font License, anders als der
   Helvetica-Nachbau, der hier vorher von einem fremden Anbieter kam. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("./schriften/archivo-latin.woff2") format("woff2");
  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: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("./schriften/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

body { margin: 0; }
html { scroll-behavior: smooth; }
html, body { width: 100%; overflow-x: hidden; background: var(--grund); color: var(--tinte); }
html, body {
  font-family: var(--schrift);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Hintergrundvideo */
.bg-video {
  position: fixed; top: 0; left: 0;
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 1;
  pointer-events: none;
}

/* Filter-Container */
.glass-defs { position: absolute; width: 0; height: 0; pointer-events: none; }

/* Bühne */
.hero {
  position: relative; z-index: 10;
  display: flex; flex-direction: column;
  width: 100%; min-height: 100vh; min-height: 100dvh;
  padding-top: 5rem;
  color: var(--tinte);
  pointer-events: none;
}
.icon { flex: none; }

/* Senkrechte Linien */
.rule { position: absolute; top: 0; bottom: 0; display: none; flex-direction: column; align-items: center; }
.rule--left  { left: 1.25rem; }
.rule--right { right: 1.25rem; }
.rule__seg { width: 1px; background: var(--linie-stark); }
.rule__seg--end { height: 15%; }
.rule__seg--mid { flex: 1 1 0%; }
.rule__plus { font-size: 0.75rem; line-height: 1; color: var(--tinte-zart); padding: 0.25rem 0; }
@media (min-width: 768px) { .rule { display: flex; } }

/* Navigationsleiste */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem; }
.nav__item {
  display: inline-flex; align-items: center; gap: 0.625rem;
  color: var(--tinte); background: none; border: 0; font: inherit; text-decoration: none;
  cursor: pointer; pointer-events: auto; transition: opacity 300ms;
}
.nav__item:hover { opacity: 0.6; }
.nav__label { font-size: 0.875rem; line-height: 1.25rem; letter-spacing: 0.025em; }
.nav__label--menu { display: none; }

@media (min-width: 640px) { .nav { padding: 1.25rem 1.5rem; } .nav__label--menu { display: inline; } }
@media (min-width: 768px) { .nav { padding: 1.5rem 3rem; } }

/* Untere Reihe */
.hero-bottom {
  position: relative; z-index: 2;
  margin-top: auto;
  display: flex; flex-direction: column; gap: 1.5rem;
  padding: 0 1.25rem 1.5rem;
}
@media (min-width: 640px) { .hero-bottom { padding: 0 1.5rem 2rem; } }
@media (min-width: 768px) {
  .hero-bottom {
    flex: 1; margin-top: 0;
    flex-direction: row; align-items: stretch; justify-content: space-between;
    gap: 3rem; padding: 2rem 3rem 3rem;
  }
  .lede { align-self: flex-start; }
  .card { align-self: flex-end; }
}

/* Textspalte */
/* Keine feste Breite mehr: der Schriftzug bestimmt sie, der Fließtext hat
   seine eigene. min-width verhindert, dass die Spalte im Flex-Kasten
   über ihre Berechnung hinauswächst. */
.lede { min-width: 0; max-width: none; }
/* Gerechnet, nicht geschätzt: „SCHOCKER" belegt in Archivo bei Breite 88 und
   dieser Laufweite gemessene 4,983 em. Der Teiler 5,6 lässt auf dem Telefon
   Luft zum Rand. */
.lede__title {
  margin: 0;
  font-size: min(5.5rem, calc((100vw - 2.5rem) / 5.6));
  font-weight: 700;
  font-variation-settings: "wdth" 88, "wght" 700;
  line-height: 0.84;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--tinte);
}
.lede__body  { margin-top: 0.75rem; margin-bottom: 0; max-width: 280px; font-size: 0.75rem; line-height: 1.625; color: var(--tinte-weich); }

@media (min-width: 640px)  { .lede__body { font-size: 0.875rem; } }
/* Ab hier steht die Karte daneben. Der Schriftzug bekommt genau die Breite,
   die neben ihr frei bleibt: Fensterbreite minus Polster (2 × 3 rem), Fuge
   (3 rem) und Kartenbreite (340 px). Der dritte Wert deckelt über die
   Fensterhöhe, damit auf flachen Bildschirmen die Aktionen nicht unter den
   Rand rutschen. */
@media (min-width: 768px)  {
  .lede__title { font-size: min(13rem, calc((100vw - 484px) / 5.05), calc((100vh - 20rem) / 1.72)); }
  .lede__body  { margin-top: 1.25rem; max-width: 22rem; font-size: 0.9375rem; }
}

/* Abgeschrägte Schaltfläche */
.chamfer {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  width: 220px; height: 44px; margin-top: 1.5rem; padding: 0 1.25rem;
  color: var(--tinte); text-decoration: none; pointer-events: auto; transition: opacity 300ms;
}
.chamfer:hover { opacity: 0.7; }

.chamfer__glass {
  position: absolute; inset: 0;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--linie-stark);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.chamfer__outline { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chamfer__label { position: relative; font-size: 0.75rem; letter-spacing: 0.025em; }
.chamfer .icon { position: relative; }

@media (min-width: 640px) {
  .chamfer { width: 260px; height: 48px; padding: 0 1.5rem; }
  .chamfer__label { font-size: 0.875rem; }
  .chamfer__glass { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: transparent; }
}
@media (min-width: 768px) { .chamfer { margin-top: 2rem; } }

/* Glaskarte */
.card {
  position: relative;
  display: flex; flex-direction: column;
  width: 340px; max-width: 100%; min-height: 380px;
  padding: 2rem;
  border-radius: 48px;
  overflow: hidden;
  background: transparent;
  border: 1px solid rgba(47, 47, 47, 0.15);
  pointer-events: auto;
  animation: fade-slide-up-card 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes fade-slide-up-card {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

#dup-video-container { position: absolute; left: 0; top: 0; z-index: 0; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 200ms; }
/* Die Brechung wird auf halber Kantenlänge gerechnet und danach vom
   Compositor auf die volle Fläche gezogen. Das ist ein Viertel der Bildpunkte
   und damit ein Viertel der Filterarbeit; sichtbar ist der Unterschied nicht,
   weil das Ergebnis ohnehin eine weiche Brechung ist. Die Längen im Filter
   sind entsprechend halbiert, die Rauschfrequenz verdoppelt. */
#dup-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 50%;
  transform: scale(2);
  transform-origin: 0 0;
  filter: url(#liquid-glass-refraction);
}

.card__frost {
  position: absolute; inset: 0; z-index: 1;
  border-radius: 48px; pointer-events: none;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1.5px 2px rgba(255, 255, 255, 0.3),
              inset 0 -1px 2px rgba(0, 0, 0, 0.15);
  transition: background 400ms;
}
.card.group:hover .card__frost { background: rgba(255, 255, 255, 0.1); }

.card__head, .card__body { position: relative; z-index: 2; }

.card__title, .card__index, .finding__title, .finding__text { margin: 0; }

.card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
              padding-bottom: 0.75rem; border-bottom: 1px solid var(--linie); }
.card__title { font-size: 1rem; font-weight: 600; letter-spacing: -0.025em; }
.card__index { font-size: 0.75rem; color: var(--tinte-zart); }
.card__body { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.finding__title { font-size: 0.875rem; font-weight: 600; letter-spacing: -0.025em; }
.finding__text { margin-top: 0.25rem; font-size: 0.75rem; line-height: 1.625; color: var(--tinte-mittel); }

@media (min-width: 640px) { .card__title { font-size: 1.125rem; } }
@media (min-width: 768px) {
  .card__head { padding-bottom: 1rem; }
  .card__title { font-size: 1.25rem; }
  .card__body { gap: 1.25rem; margin-top: 1.25rem; }
  .finding__title { font-size: 1rem; }
  .finding__text { font-size: 0.875rem; margin-top: 0.375rem; }
}

/* Menü */
.menu { position: fixed; inset: 0; z-index: 50; visibility: hidden; pointer-events: none;
        transition: visibility 0s linear 500ms; }
.menu.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; }

.menu__backdrop { position: absolute; inset: 0; background: var(--tinte-zart);
                  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
                  opacity: 0; transition: opacity 500ms; }
.menu.is-open .menu__backdrop { opacity: 1; }

.menu__panel { position: absolute; top: 0; left: 0; display: flex; flex-direction: column;
               width: 100%; height: 100%; padding: 1.5rem 2rem; background: var(--grund-hoch);
               transform: translateX(-100%);
               transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1); }
.menu.is-open .menu__panel { transform: translateX(0); }
@media (min-width: 640px) { .menu__panel { width: 380px; padding: 1.5rem 2.5rem; } }

.menu__close { display: inline-flex; align-items: center; gap: 0.625rem; align-self: flex-start;
               margin-bottom: 3rem; background: none; border: 0; font: inherit; font-size: 0.875rem;
               color: var(--tinte); cursor: pointer; transition: opacity 300ms; }
.menu__close:hover { opacity: 0.6; }

.menu__nav { display: flex; flex-direction: column; }
.menu__link { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0;
              border-bottom: 1px solid var(--linie); color: var(--tinte); text-decoration: none;
              opacity: 0; transform: translateY(20px); transition: opacity 500ms, transform 500ms; }
.menu__linkText { font-size: 1.5rem; font-weight: 400; letter-spacing: -0.025em; transition: transform 300ms; }
.menu__link:hover .menu__linkText { transform: translateX(8px); }
.menu__arrow { opacity: 0; transform: translateX(8px); transition: opacity 300ms, transform 300ms; }
.menu__link:hover .menu__arrow { opacity: 1; transform: translateX(0); }
@media (min-width: 640px) { .menu__linkText { font-size: 1.875rem; } }

.menu.is-open .menu__link { opacity: 1; transform: translateY(0); }
.menu.is-open .menu__link:nth-child(1) { transition-delay: 150ms; }
.menu.is-open .menu__link:nth-child(2) { transition-delay: 225ms; }
.menu.is-open .menu__link:nth-child(3) { transition-delay: 300ms; }
.menu.is-open .menu__link:nth-child(4) { transition-delay: 375ms; }
.menu.is-open .menu__link:nth-child(5) { transition-delay: 450ms; }

.menu__foot { margin-top: auto; padding: 1.5rem 0 2rem; border-top: 1px solid var(--linie);
              opacity: 0; transform: translateY(20px); transition: opacity 500ms, transform 500ms; }
.menu.is-open .menu__foot { opacity: 1; transform: translateY(0); transition-delay: 600ms; }
.menu__footLabel { display: block; margin-bottom: 0.75rem; font-size: 0.75rem; text-transform: uppercase;
                   letter-spacing: 0.025em; color: var(--tinte-zart); }
.menu__mail { font-size: 0.875rem; color: var(--tinte-weich); text-decoration: none; transition: color 300ms; }
.menu__mail:hover { color: var(--tinte); }

.menu__legal { margin-top: 1rem; display: flex; gap: 1rem; }
.menu__legalLink { font-size: 0.75rem; color: var(--tinte-zart); text-decoration: none; transition: color 300ms; }
.menu__legalLink:hover { color: var(--tinte); }

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; } }

/* Sprungmarke */
.skip { position: absolute; left: -9999px; top: 0; z-index: 60; padding: 0.75rem 1.25rem; background: var(--grund-hoch); color: var(--tinte); font-size: 0.875rem; text-decoration: none; border: 1px solid var(--linie-stark); }
.skip:focus { left: 0; }

/* Marke in der Kopfzeile */
.nav__brand { display: inline-flex; align-items: center; pointer-events: auto; transition: opacity 300ms; }
.nav__brand:hover { opacity: 0.6; }
.nav__brand img { display: block; width: 108px; height: auto; }
.nav--solid { background: rgba(242, 240, 234, 0.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--linie-fein); }
@media (min-width: 640px) { .nav__brand img { width: 124px; } }

/* Inhaltsbreite */
.wrap { position: relative; z-index: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 640px) { .wrap { padding: 0 1.5rem; } }
@media (min-width: 768px) { .wrap { padding: 0 3rem; } }

/* Abschnitte */
.section {
  position: relative;
  z-index: 10;
  width: calc(100% - 1.5rem);
  max-width: 1240px;
  margin: 0 auto;
  padding: 3rem 0;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: linear-gradient(168deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.6) 55%, rgba(255, 255, 255, 0.7) 100%);
  box-shadow:
    inset 0 1.5px 2px rgba(255, 255, 255, 0.9),
    inset 0 -1px 2px rgba(23, 32, 48, 0.06),
    0 30px 60px -38px rgba(23, 32, 48, 0.45);
  scroll-margin-top: 6.5rem;
}
.section + .section { margin-top: 1.25rem; }
@media (min-width: 768px) { .section { width: calc(100% - 3rem); padding: 4.5rem 0; border-radius: 36px; } .section + .section { margin-top: 1.75rem; } }

.section__head { margin-bottom: 2.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--linie); }
.section__label { margin: 0 0 0.75rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.025em; color: var(--tinte-zart); }
.section__title { margin: 0; max-width: 14ch; text-wrap: balance; font-size: 2.125rem; font-weight: 700; font-variation-settings: "wdth" 92, "wght" 700; line-height: 0.95; letter-spacing: -0.03em; }
.section__title--wide { max-width: 26ch; font-size: 1.75rem; }
/* Das Gewicht der Bildmarke. Die enge Laufweite der Überschrift wird hier
   zurückgenommen, sonst schließt der Wortabstand bei 900 zu. */
.accent { font-weight: 900; font-variation-settings: "wdth" 92, "wght" 900; letter-spacing: -0.005em; }
@media (min-width: 640px) { .section__title { font-size: 2.75rem; } .section__title--wide { font-size: 2.25rem; } }
@media (min-width: 1024px) { .section__head { margin-bottom: 3.5rem; } .section__title { font-size: 3.5rem; } .section__title--wide { font-size: 2.75rem; } }

/* Leistungskacheln */
.tiles { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.tile { border: 1px solid var(--linie); border-radius: 24px; padding: 1.5rem; transition: background 400ms, border-color 400ms; }
.tile:hover { background: rgba(255, 255, 255, 0.5); border-color: var(--linie-stark); }
.tile__num { display: block; font-size: 0.75rem; letter-spacing: 0.025em; color: var(--tinte-zart); }
.tile__title { margin: 0.75rem 0 0; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.025em; }
.tile__text { margin: 0.5rem 0 0; font-size: 0.875rem; line-height: 1.625; color: var(--tinte-weich); }
@media (min-width: 768px) { .tiles { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } .tile { padding: 1.75rem; } .tile__title { font-size: 1.25rem; } }

/* Textlink mit Pfeil */
.textlink { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 2rem; color: var(--tinte); font-size: 0.875rem; letter-spacing: 0.025em; text-decoration: none; transition: opacity 300ms; }
.textlink:hover { opacity: 0.6; }
.textlink span { padding-bottom: 2px; border-bottom: 1px solid var(--tinte-fein); }

/* Hinweis über den Arbeiten */
.note { margin: 0 0 2rem; max-width: 70ch; padding: 0.25rem 0 0.25rem 1.25rem; border-left: 1.5px solid var(--tinte); font-size: 0.8125rem; line-height: 1.7; color: var(--tinte-weich); }

/* Projektumschalter */
.switch { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-bottom: 2rem; border-bottom: 1px solid var(--linie); }
.switch__tab { margin-bottom: -1px; padding: 0 0 0.75rem; background: none; border: 0; border-bottom: 1.5px solid transparent; font: inherit; font-size: 0.875rem; color: var(--tinte-mittel); cursor: pointer; transition: color 300ms, border-color 300ms; }
.switch__tab:hover { color: var(--tinte); }
.switch__tab.is-active { color: var(--tinte); border-bottom-color: var(--tinte); }
@media (min-width: 640px) { .switch__tab { font-size: 1rem; } }

/* Projekt */
.project__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 1rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tinte-zart); }
.project__meta span { color: var(--tinte-fein); }
.project__body { display: grid; gap: 1.5rem; margin-top: 2rem; }
.project__text { margin: 0; font-size: 0.9375rem; line-height: 1.7; color: var(--tinte-weich); }
.project__improveLabel { margin: 0 0 0.75rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.025em; color: var(--tinte-zart); }
.project__improve { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linie); }
.project__improve li { padding: 0.625rem 0; border-bottom: 1px solid var(--linie); font-size: 0.875rem; line-height: 1.55; }
@media (min-width: 768px) { .project__body { grid-template-columns: 1fr 1fr; gap: 3rem; } }

/* Vorher-Nachher-Vergleich */
.compare { position: relative; aspect-ratio: 1672 / 941; overflow: hidden; border-radius: 24px; border: 1px solid var(--linie); background: rgba(0, 0, 0, 0.04); }
.compare__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
/* Das alte Bild wird von rechts beschnitten statt in der Breite verkleinert.
   Beide Bilder behalten dadurch dieselbe Größe und bleiben in Deckung. */
.compare__img--before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 1.5px; background: #fff; box-shadow: 0 0 0 1px var(--tinte-fein); pointer-events: none; }
.compare__handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); border: 1.5px solid #fff; border-radius: 9999px; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.compare__tag { position: absolute; bottom: 0.75rem; padding: 0.25rem 0.625rem; border-radius: 9999px; background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tinte); pointer-events: none; }
.compare__tag--before { left: 0.75rem; }
.compare__tag--after { right: 0.75rem; }
/* Der Regler liegt unsichtbar über der ganzen Fläche. Ziehen mit dem Zeiger und
   Pfeiltasten mit der Tastatur kommen dadurch beide vom Browser selbst. Der
   Griff ist auf 1 px gesetzt, sonst läge der Wert um die halbe Griffbreite
   neben der Stelle, auf die geklickt wurde. */
.compare__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; opacity: 0; cursor: ew-resize; }
.compare__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1px; height: 100%; border: 0; background: transparent; }
.compare__range::-moz-range-thumb { width: 1px; height: 100%; border: 0; background: transparent; }
.compare:has(.compare__range:focus-visible) { outline: 3px solid var(--tinte); outline-offset: 3px; }
.compare__hint { margin: 0.75rem 0 0; font-size: 0.75rem; color: var(--tinte-zart); }

/* Ansatz */
.about { display: grid; gap: 2rem; }
.portrait { margin: 0; }
.portrait img { display: block; width: 100%; height: auto; border-radius: 24px; border: 1px solid var(--linie); }
.portrait__cap { display: flex; flex-direction: column; gap: 0.125rem; margin-top: 0.875rem; }
.portrait__name { font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.025em; }
.portrait__role { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.025em; color: var(--tinte-zart); }
.about__lead { margin: 0; max-width: 46ch; font-size: 1.125rem; line-height: 1.65; }
.about__body { margin: 2rem 0 0; max-width: 52ch; padding-top: 1.75rem; border-top: 1px solid var(--linie); font-size: 0.9375rem; line-height: 1.7; color: var(--tinte-weich); }
@media (min-width: 640px) { .about__lead { font-size: 1.375rem; } }
@media (min-width: 1024px) { .about { grid-template-columns: 5fr 7fr; gap: 4rem; align-items: start; } }

.subhead { margin: 4rem 0 0; font-size: 1.75rem; font-weight: 700; font-variation-settings: "wdth" 92, "wght" 700; line-height: 0.95; letter-spacing: -0.03em; }
@media (min-width: 768px) { .subhead { margin-top: 6rem; font-size: 2.25rem; } }

.reasons { margin: 1.5rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--linie); }
.reason { display: grid; gap: 0.5rem; padding: 1.5rem 0; border-bottom: 1px solid var(--linie); }
.reason__num { font-size: 0.75rem; letter-spacing: 0.025em; color: var(--tinte-zart); }
.reason__title { margin: 0; font-size: 1.25rem; font-weight: 500; letter-spacing: -0.025em; }
.reason__text { margin: 0; max-width: 46ch; font-size: 0.875rem; line-height: 1.625; color: var(--tinte-weich); }
@media (min-width: 768px) { .reason { grid-template-columns: 3rem 1fr 1fr; align-items: baseline; gap: 2rem; padding: 2rem 0; } .reason__title { font-size: 1.5rem; } }

/* Kontakt */
.contact__sub { margin: 0; max-width: 52ch; font-size: 1rem; line-height: 1.7; color: var(--tinte-weich); }
.contact__row { display: flex; flex-direction: column; gap: 2rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--linie); }
.contact__row .chamfer { margin-top: 0; }
.contact__mail { display: inline-block; font-size: 1.125rem; letter-spacing: -0.025em; color: var(--tinte); text-decoration: none; border-bottom: 1.5px solid var(--tinte-fein); transition: border-color 300ms; }
.contact__mail:hover { border-bottom-color: var(--tinte); }
.contact__mailNote { margin: 0.5rem 0 0; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.025em; color: var(--tinte-zart); }
@media (min-width: 640px) { .contact__row { flex-direction: row; align-items: center; justify-content: space-between; } .contact__mailBlock { text-align: right; } .contact__mail { font-size: 1.5rem; } }

/* Fußzeile */
.footer { position: relative; z-index: 10; background: transparent; border-top: 1px solid var(--linie); }
.footer__inner { display: flex; flex-direction: column; gap: 2rem; width: 100%; max-width: 1180px; margin: 0 auto; padding: 3rem 1.25rem calc(3rem + env(safe-area-inset-bottom)); }
.footer__logo { display: block; width: 132px; height: auto; }
.footer__tagline { margin: 1rem 0 0; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tinte-zart); }
.footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 2rem; margin: 0; padding: 0; list-style: none; }
.footer__link { display: inline-flex; min-height: 44px; align-items: center; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tinte); text-decoration: none; transition: opacity 300ms; }
.footer__link:hover { opacity: 0.6; }
.footer__copy { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tinte-zart); }
@media (min-width: 640px) { .footer__inner { flex-direction: row; align-items: flex-end; justify-content: space-between; padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 768px) { .footer__inner { padding-left: 3rem; padding-right: 3rem; } }

/* Rechtsseiten */
.page-legal { background-color: var(--grund); background-image: radial-gradient(60% 30% at 15% 4%, var(--schimmer-cyan), transparent 100%), radial-gradient(55% 26% at 85% 46%, var(--schimmer-flieder), transparent 100%); }
.legal {
  position: relative;
  z-index: 10;
  width: calc(100% - 1.5rem);
  /* Enger als die Abschnittstafeln: der Rechtstext ist eine schmale Spalte,
     in einer 1240 px breiten Tafel stünde er verloren. */
  max-width: 920px;
  margin: 6rem auto 3rem;
  padding: 3rem 0;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: linear-gradient(168deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.6) 55%, rgba(255, 255, 255, 0.7) 100%);
  box-shadow:
    inset 0 1.5px 2px rgba(255, 255, 255, 0.9),
    inset 0 -1px 2px rgba(23, 32, 48, 0.06),
    0 30px 60px -38px rgba(23, 32, 48, 0.45);
}
.legal__inner { width: 100%; max-width: 70ch; margin: 0 auto; padding: 0 1.25rem; }
.legal__stand { display: inline-block; margin: 0; padding: 0.3rem 0.75rem; border: 1px solid var(--linie-stark); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--tinte-mittel); }
.legal__title { margin: 2rem 0 0; font-size: 2.375rem; font-weight: 700; font-variation-settings: "wdth" 92, "wght" 700; line-height: 0.95; letter-spacing: -0.03em; }
.legal__lead { margin: 1.25rem 0 0; font-size: 1rem; line-height: 1.7; color: var(--tinte-weich); }
.legal__body { margin-top: 3rem; padding-top: 3rem; border-top: 1px solid var(--linie); }
.legal__section { margin-top: 3rem; }
.legal__section:first-child { margin-top: 0; }
.legal__heading { margin: 0; font-size: 1.125rem; font-weight: 500; letter-spacing: -0.025em; }
.legal__text { margin-top: 1rem; }
.legal__text p { margin: 0 0 1rem; font-size: 0.9375rem; line-height: 1.75; color: var(--tinte-weich); }
.legal__text p:last-child { margin-bottom: 0; }
.legal__list { margin: 0 0 1rem; padding-left: 1.25rem; }
.legal__list li { margin-bottom: 0.5rem; font-size: 0.9375rem; line-height: 1.75; color: var(--tinte-weich); }
.legal__mail { color: var(--tinte); text-decoration: none; border-bottom: 1.5px solid var(--tinte-fein); transition: border-color 300ms; }
.legal__mail:hover { border-bottom-color: var(--tinte); }
.legal .chamfer { margin-top: 3.5rem; }
@media (min-width: 640px) { .legal__inner { padding: 0 1.5rem; } .legal__title { font-size: 3rem; } .legal__heading { font-size: 1.25rem; } }
@media (min-width: 768px) { .legal { width: calc(100% - 3rem); margin: 8rem auto 4rem; padding: 4.5rem 0; border-radius: 36px; } }

/* Einblendung beim Scrollen. Der versteckte Zustand hängt an html.js, damit
   ohne Skript nichts unsichtbar stehen bleibt. */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(var(--i, 0) * 70ms); }
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; }
}

/* Korn. Ein feines, statisches Rauschen über der ganzen Seite — es nimmt der
   einfarbigen Fläche die Flachheit, ohne selbst als Muster aufzufallen. Liegt
   über Inhalt und Kopfzeile, aber unter dem Menü, und fängt keine Zeiger ab. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 45;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23k)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* Grundfläche unterhalb des Startbereichs.

   Die Lichter sitzen auf .page selbst und nicht auf den einzelnen
   Abschnitten. Nur so laufen sie über die Abschnittsgrenzen hinweg — bei
   Lichtern je Abschnitt entstünde an jeder Kante eine sichtbare Stufe. Ihre
   Prozentwerte beziehen sich auf die volle Höhe der Fläche, sie sind also
   mehrere Bildschirmhöhen groß und fallen einzeln nicht auf. */
/* Die Grundfläche trägt keine eigene Farbe mehr. Was hier durchscheint, ist
   das Bewegtbild des Startbereichs, gedämpft durch den Schleier darüber. */
.page { position: relative; z-index: 10; }
.page__content { position: relative; z-index: 1; }


/* Kleine technische Beschriftungen. Archivo läuft bei 12 px etwas offener als
   die vorige Schrift; mit 500 statt 400 halten sie ihr Gewicht und wirken
   nicht grau. Größen und Laufweiten bleiben, wie sie waren. */
.section__label, .project__meta,
.project__improveLabel, .portrait__role, .contact__mailNote, .menu__footLabel,
.footer__tagline, .footer__link, .footer__copy, .legal__stand, .compare__tag,
.tile__num, .reason__num, .card__index, .nav__label {
  font-weight: 500;
}

/* Schleier über dem Bewegtbild.

   Es gibt genau ein Video auf der Seite. Im Startbereich läuft es offen, ab
   dort deckt dieser Schleier es fast ganz zu, bleibt aber bis zum Fuß liegen.
   Dadurch ist die Bewegung im Grund dieselbe wie oben, nur stark gedämpft —
   und sie wird von keinem Abschnitt beschnitten, weil die Ebene fest im
   Fenster steht statt in einem Container.

   Geschaltet wird allein die Deckkraft. Das ist eine Compositor-Eigenschaft
   und kostet beim Umschalten kein Neuzeichnen. */
.schleier {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: var(--grund);
  opacity: 0;
  transition: opacity 500ms ease;
}
.schleier.is-on { opacity: var(--schleier-deckung); }

/* Unterhalb des Startbereichs wird das Bild zusätzlich vergrößert. Große,
   weiche Formen statt erkennbarer Kanten — und transform kostet den
   Compositor nichts, anders als eine Weichzeichnung über die volle Fläche. */
.bg-video { transition: transform 700ms ease; }
.bg-video.is-fern { transform: scale(1.35); }

@media (min-width: 768px) { :root { --schleier-deckung: 0.87; } }

/* Sichtbarer Fokus für die Tastatur. Bewusst global statt je Element, damit
   keine Schaltfläche vergessen wird. */
:focus-visible {
  outline: 2px solid var(--tinte);
  outline-offset: 3px;
}
.menu__link:focus-visible,
.footer__link:focus-visible,
.switch__tab:focus-visible { outline-offset: -2px; }
.chamfer:focus-visible { outline-offset: 6px; }

/* Zeigerflächen. Die sichtbare Größe bleibt, die Trefferfläche wächst über
   Polster mit ausgleichendem Rand auf die geforderten 44 px. */
.nav__item,
.textlink,
.menu__legalLink,
.footer__link { touch-action: manipulation; }
.nav__item { min-height: 44px; min-width: 44px; justify-content: center; padding: 0.5rem 0; margin: -0.5rem 0; }
.menu__legalLink { min-height: 44px; display: inline-flex; align-items: center; }
.switch__tab { min-height: 44px; padding-top: 0.75rem; touch-action: manipulation; }
.chamfer,
.menu__link,
.menu__close,
.contact__mail,
.compare__range { touch-action: manipulation; }
html { -webkit-tap-highlight-color: rgba(23, 32, 48, 0.08); }

/* Menü: Wischen im Panel darf nicht die Seite dahinter mitziehen. */
.menu__panel { overscroll-behavior: contain; }

/* Umbruch und Ziffern */
.subhead,
.legal__title,
.tile__title,
.reason__title,
.finding__title { text-wrap: balance; }
.tile__text,
.reason__text,
.project__text,
.legal__text p,
.contact__sub,
.lede__body { text-wrap: pretty; }
.tile__num,
.reason__num { font-variant-numeric: tabular-nums; }

/* Weniger Transparenz gewünscht: Flächen werden deckend, Weichzeichner aus.
   Der Text soll nie von der Durchsicht abhängen. */
@media (prefers-reduced-transparency: reduce) {
  .schleier.is-on { opacity: 1; }
  .section,
  .legal { background: var(--grund-hoch); }
  .nav--solid {
    background: var(--grund-hoch);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .card__frost { background: rgba(255, 255, 255, 0.8); }
  .chamfer__glass,
  .compare__tag,
  .compare__handle::after {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Feste Kopfzeile darf kein Element verdecken, das per Tastatur angesprungen
   wird. Gilt für Sprungmarken wie für den Tabulator. */
a, button, input, [tabindex] { scroll-margin-top: 6rem; }

/* Restliche Trefferflächen auf 44 px. Die sichtbare Größe bleibt, gewachsen
   wird über Polster mit ausgleichendem Rand, damit kein Layout verrutscht. */
.nav__brand,
.textlink,
.contact__mail,
.menu__close,
.menu__mail {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.textlink,
.contact__mail,
.menu__mail { padding: 0.5rem 0; margin: -0.5rem 0; }
.menu__close { margin-bottom: calc(3rem - 0.5rem); padding: 0.5rem 0; }
.skip { min-height: 44px; display: inline-flex; align-items: center; }

/* Schleier und Bildgröße folgen der Scrollposition statt Sichtbarkeitsmeldungen.

   Grund: Safari liefert IntersectionObserver-Rückmeldungen beim Schwungscrollen
   verzögert nach. Wer schnell runter und wieder hoch gescrollt hat, sah oben
   deshalb noch die vergrößerte, abgedeckte Fassung stehen. Eine Scroll-
   Zeitleiste kennt diese Verzögerung nicht: sie ist an die Position gebunden
   und läuft im Compositor, also ohne Hauptthread.

   Die Vergrößerung setzt erst bei 30 vh ein. Bis dahin ist die Glaskarte aus
   dem Bild, deren Brechung aus dem unskalierten Video zeichnet und sonst aus
   der Deckung liefe. */
@supports (animation-timeline: scroll()) {
  .schleier {
    transition: none;
    animation: schleier-auf linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 100vh;
  }
  .bg-video {
    transition: none;
    animation: video-fern linear both;
    animation-timeline: scroll(root block);
    animation-range: 30vh 100vh;
  }
}
@keyframes schleier-auf {
  from { opacity: 0; }
  to { opacity: var(--schleier-deckung); }
}
@keyframes video-fern {
  from { transform: scale(1); }
  to { transform: scale(1.35); }
}

@media (prefers-reduced-motion: reduce) {
  .bg-video { animation: none; transform: none; }
}

/* Einblendungen kürzer und enger gestaffelt. Sie sollen den Blick führen,
   nicht auf sich warten lassen. */
.js .reveal {
  transition-duration: 500ms;
  transition-delay: calc(var(--i, 0) * 45ms);
}
/* Was beim ersten Bild schon im Fenster steht, wird nicht eingeblendet —
   sonst baut sich die Seite beim Öffnen vor den Augen zusammen. */
.js .reveal.is-sofort { transition: none; }

/* Auf schmalen Fenstern die engere Filterfassung: dort steht die Karte fast
   randbündig, und die Kantenzone des großen Filters ragte sichtbar hinein. */
@media (max-width: 767px) {
  #dup-image { filter: url(#liquid-glass-refraction-schmal); }
}