/* ═══════════════════════════════════════════════════════════════════
   VELORA · DIE GESTALTUNG ALLER SEITEN
   Neu gebaut am 19. Oktober 2026

   Bis heute trug jede der acht Seiten ihre eigene Gestaltung im Kopf.
   Acht Kopien derselben Regeln heißt: Eine Änderung achtmal machen —
   und beim siebten Mal eine vergessen. Jetzt steht alles hier.

   WAS SICH GEÄNDERT HAT UND WARUM

   Die alte Fassung war dunkelblau mit Lila-Verlauf, Leuchtflecken und
   Laufschrift — der Standardlook jedes Startup-Baukastens. Wer
   Websites verkauft, darf nicht aussehen wie eine Vorlage.

   Die Gestaltungsmittel sind Schriftgröße, Weißraum und eine einzige
   Farbe. Kein Verlauf, kein Schatten, keine Karte mit Rahmen um jeden
   Absatz. Das ist schwerer zu bauen und leichter zu lesen.

   AM 31. OKTOBER 2026 UMGEDREHT

   Die Seite lag bis dahin auf warmem Papier. Jetzt liegt sie auf sehr
   dunklem Warmgrau, der Akzent ist Messing statt Rost, und die
   Überschriften stehen in einem leichten Schnitt statt in einem
   fetten.

   Der Schnitt ist dabei keine Geschmacksfrage, sondern Physik: Helle
   Schrift auf dunklem Grund wirkt schwerer, als sie ist, weil die
   Ränder ins Dunkle ausstrahlen. Derselbe Schnitt, der auf Papier
   richtig sitzt, verstopft auf Dunkel. Wer eine helle Seite einfach
   umdreht, bekommt deshalb immer zu schwere Schrift — und muss jede
   einzelne Farbe neu rechnen, nicht nur die aus den Angaben oben.
   Zwei Stellen sind bei genau diesem Schritt durchgefallen und nur
   aufgefallen, weil gemessen wurde (s. .nacht .schritt b).

   DIE SCHRIFT

   Keine Google Fonts — die Seite lädt nichts von fremden Servern,
   und genau das steht auch in unserer Datenschutzerklärung. Also die
   Schriften des Systems: auf dem Mac SF Pro, auf Windows Segoe UI.
   Beide sind sehr gut. Was den Unterschied macht, ist nicht die
   Schriftart, sondern was man mit Größe, Gewicht und Laufweite tut.

   DIE FARBE

   Eine, und selten: im Punkt hinter dem Namen, im Knopf, in
   Verweisen, in einer Linie. Messing (#d8a33f) kommt aus dem eigenen
   Briefbogen, ist also schon da und nicht geliehen.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* DUNKEL SEIT DEM 31. OKTOBER 2026

     Bis dahin lag die Seite auf warmem Papier, und dieselben Angaben
     trugen helle Werte. Die dunkle Fassung stand zwei Tage lang in
     einer zweiten Datei neben dieser — als Entwurf richtig, als
     Dauerzustand falsch: zwei Stellen, an denen dieselbe Regel steht,
     und beim nächsten Umbau vergisst man eine. Jetzt steht alles
     hier, und velora-dunkel.css gibt es nicht mehr.

     Kein reines Schwarz. #000 steht auf beiden Mängellisten, die ich
     durchgegangen bin; ein sehr dunkles Warmgrau sieht nach
     bedrucktem Material aus und nicht nach ausgeschaltetem Gerät. */
  --papier:      #14140f;
  --papier-warm: #1c1c16;
  --tinte:       #f0ede4;   /* 15,78 zu 1 auf dem Grund */
  --tinte-weich: #a9a69b;   /*  7,58 */
  /* Die kleinen Großbuchstaben sind der engste Fall: kleine Schrift,
     also 4,5 verlangt. Hier 5,35 auf dem Grund und 4,95 auf der
     warmen Fläche. */
  --leise:       #8d8a80;
  --linie:       #3d3d31;
  /* Vorher Rost (#ad411c), davor das alte Velora-Blau. Rost war auf
     Papier richtig und liegt auf diesem Grund zu nah an ihm — eine
     warme dunkle Farbe auf einer warmen dunklen Fläche.

     Messing kommt aus dem eigenen Briefbogen; velora-briefbogen.mjs
     setzt denselben Ton. Also nicht geliehen, sondern schon da. Es
     trägt, ohne zu leuchten.

     Die Namen der Angaben bleiben „blau": Sie stehen an zwanzig
     Stellen, und ein halber Umbau von Namen bringt nur die Gefahr,
     eine zu vergessen. Was sie bedeuten, steht hier. */
  --blau:        #d8a33f;   /* 8,12 auf dem Grund · 7,52 auf der warmen Fläche */
  --blau-tief:   #b9862c;   /* 5,73 · 5,30 — für Zeiger und gedrückte Knöpfe */
  --nacht:       #16151300;   /* nur als Platzhalter, s. .nacht */

  --rand: clamp(1.25rem, 5vw, 5rem);
  --spalte: 74rem;
}

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

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1rem, .96rem + .2vw, 1.12rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Eine Spalte, ein Rand, überall gleich. Alles andere richtet sich
   danach — das ist der halbe Grund, warum eine Seite ruhig wirkt. */
.huelle { width: 100%; max-width: var(--spalte); margin-inline: auto; padding-inline: var(--rand); }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--blau); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { color: var(--blau-tief); }

/* Auf dunklem Grund muss der Fokusrahmen heller sein als der Akzent.
   Mit Messing wäre er da, aber man müsste ihn suchen. */
:focus-visible { outline: 2px solid var(--tinte); outline-offset: 3px; border-radius: 2px; }

/* Wer Bewegung nicht mag, bekommt keine. Das ist keine Nettigkeit,
   sondern für manche Menschen der Unterschied zwischen benutzbar
   und übel. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── Typografie ────────────────────────────────────────────────────
   Die Größen wachsen mit dem Fenster, aber gedeckelt. Ohne Deckel
   wird aus einer Überschrift auf einem großen Bildschirm ein Plakat,
   das man nicht mehr in einem Blick erfasst. */
/* Die Gewichte standen bis zum 31. Oktober bei 680 / 660 / 640. Auf
   dunklem Grund war das zu schwer — Begründung oben im Kopf. */
.display {
  font-size: clamp(2.6rem, 1.2rem + 6.2vw, 6rem);
  line-height: .98;
  letter-spacing: -.035em;
  font-weight: 300;
  margin: 0;
  text-wrap: balance;
}
h1 { font-weight: 300; letter-spacing: -.028em; }
h2 {
  font-size: clamp(1.9rem, 1.1rem + 3vw, 3.2rem);
  line-height: 1.06;
  letter-spacing: -.022em;
  font-weight: 320;
  margin: 0 0 1rem;
  text-wrap: balance;
}
h3 { font-size: 1.22rem; line-height: 1.3; letter-spacing: -.015em; font-weight: 500; margin: 0 0 .4rem; }

/* Eine Zeile Fließtext soll nicht länger sein, als das Auge am Ende
   noch den Anfang der nächsten findet. */
.lauf { max-width: 38ch; color: var(--tinte-weich); }
.lauf-breit { max-width: 56ch; color: var(--tinte-weich); }

.vor {
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 560;
  color: var(--leise);
  margin: 0 0 1.1rem;
}

/* ── Kopfleiste ─────────────────────────────────────────────────────
   Deckend, nicht milchig.

   Hier stand eine durchscheinende Leiste mit
   backdrop-filter: saturate(140%) blur(10px) — Milchglas, durch das
   der Inhalt beim Scrollen hindurchschimmert.

   Weg damit, aus zwei Gründen.

   Der erste ist inhaltlich: Diese Seite behauptet, Papier zu sein.
   Papier ist nicht durchsichtig. Der Effekt war aus einer anderen
   Welt geborgt — er stammt aus Benutzeroberflächen, in denen Ebenen
   übereinanderliegen, und ist inzwischen das verbreitetste Merkmal
   schnell zusammengesetzter Seiten überhaupt. Wer hundert davon
   gesehen hat, erkennt ihn, ohne ihn benennen zu können.

   Einen zweiten Grund hatte ich hier zuerst hingeschrieben:
   backdrop-filter zwinge den Browser, bei jedem Bild den Bereich
   hinter der Leiste neu zu filtern, das koste Rechenzeit.

   Nachgemessen am 29. Oktober 2026, je drei Durchläufe mit und ohne:

       deckend     60 Bilder/s, längstes 17 ms, keines über 20
       Milchglas   60 Bilder/s, längstes 17 ms, keines über 20

   Kein Unterschied. Auf dieser Seite ist der Filter umsonst zu
   haben; die Leiste ist schmal und der Hintergrund einfarbig. Das
   Argument war plausibel und hier trotzdem falsch, und es steht nur
   deshalb noch da, damit es niemand ein zweites Mal erfindet.

   Es bleibt also beim ersten Grund allein — und der genügt.

   Was die Leiste leisten muss, leistet sie deckend genauso: Der
   Text bleibt lesbar, wenn Inhalt darunter wegläuft. Die Kante beim
   Scrollen zeigt weiterhin, dass etwas darunter liegt. */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: var(--papier);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.kopf.gescrollt { border-bottom-color: var(--linie); }
.kopf-innen { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 4.5rem; }
.marke { font-weight: 450; font-size: 1.22rem; letter-spacing: -.03em; color: var(--tinte); text-decoration: none; }
.marke i { color: var(--blau); font-style: normal; }
.haupt { display: flex; gap: 1.9rem; }
.haupt a { color: var(--tinte-weich); text-decoration: none; font-size: .95rem; font-weight: 520; }
.haupt a:hover { color: var(--tinte); }
@media (max-width: 860px) { .haupt { display: none; } }

/* ── Knöpfe ───────────────────────────────────────────────────────── */
.knopf {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 3rem; padding: 0 1.4rem;
  border-radius: 2rem; border: 1px solid transparent;
  font: inherit; font-size: .98rem; font-weight: 500;
  text-decoration: none; cursor: pointer;
  transition: transform .15s, background .2s, border-color .2s;
}
.knopf:active { transform: translateY(1px); }
/* Der volle Knopf trägt den Grund als Schrift: Auf Messing ist
   dunkler Text lesbar (8,1 zu 1), weißer wäre es knapp nicht. */
.knopf-voll { background: var(--blau); color: var(--papier); border-color: var(--blau); }
.knopf-voll:hover { background: transparent; color: var(--blau); }
.knopf-linie { border-color: var(--blau); color: var(--blau); }
.knopf-linie:hover { background: var(--blau); color: var(--papier); }

/* ── Der Einstieg ─────────────────────────────────────────────────── */
.held { padding: clamp(3.5rem, 9vw, 7.5rem) 0 clamp(2.5rem, 6vw, 4.5rem); }

/* Die Umbrüche in der Überschrift sind von Hand gesetzt, weil die
   Zeilen sonst an unschönen Stellen brechen. Auf schmalen Geräten ist
   das Gegenteil richtig: Dort ist weniger Platz als eine Zeile lang,
   und ein erzwungener Umbruch macht aus „Danach pflegt ihr" zwei
   Zeilen, von denen die zweite nur „ihr" enthält. Also raus damit. */
@media (max-width: 760px) { .display br.breit { display: none; } }
.held .display span { color: var(--blau); }
.held .lauf { margin: 1.6rem 0 2.2rem; font-size: 1.12em; }
.held-knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Der Beleg direkt unter dem Versprechen. Wer behauptet, Websites zu
   bauen, sollte im selben Blickfeld eine zeigen können. */
.beleg {
  margin-top: clamp(3rem, 7vw, 5rem);
  border-top: 1px solid var(--linie);
  padding-top: 1.1rem;
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; align-items: baseline;
  font-size: .95rem; color: var(--tinte-weich);
}
.beleg b { color: var(--tinte); font-weight: 560; }

/* ── Abschnitte ───────────────────────────────────────────────────── */
section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.warm { background: var(--papier-warm); }

/* DIESER ABSCHNITT DREHT SICH MIT DER SEITE UM.

   .nacht war der dunkle Block auf hellem Papier — der Absatz, der
   sich abhebt. Auf dunklem Grund verschwindet er: dunkel auf dunkel
   ist kein Abschnitt, sondern eine Lücke. Also ist er jetzt der helle
   Block. Die Rolle bleibt dieselbe — einmal atmen, einmal die Farbe
   wechseln —, nur die Richtung kehrt sich um.

   Das ist die einzige Stelle, an der eine Umbelegung der Angaben
   oben nicht genügt hätte. Und die einzige, an der zwei Farben
   durchgefallen sind, weil sie auf der neuen Fläche stehen: siehe
   .nacht .schritt b weiter unten. */
.nacht {
  background: var(--tinte);
  color: var(--papier);
}
.nacht h2, .nacht .zahl { color: var(--papier); }
.nacht .lauf, .nacht .lauf-breit, .nacht p { color: #45443c; }   /* 8,36 */
.nacht .vor { color: #5f5d52; }                                  /* 5,65 */
.nacht a { color: #8a5a10; }                                     /* 4,60 */
.nacht .knopf-linie { border-color: #45443c; color: var(--papier); }
.nacht .knopf-linie:hover { background: var(--papier); color: var(--tinte); }

/* ── Das Kundenprojekt ────────────────────────────────────────────── */
.arbeit { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (max-width: 880px) { .arbeit { grid-template-columns: 1fr; } }
/* Auf dunklem Grund grenzt sich ein helles Bild von selbst ab. Der
   Rahmen aus der hellen Fassung stünde hier als heller Strich um ein
   helles Bild. */
.arbeit img, .stueck img { border: 0; }
.arbeit img { border-radius: 10px; }

/* ── Das Browserfenster mit der echten Seite darin ────────────────

   Es bleibt stehen, während der Text daneben vorbeizieht, und die
   Seite darin scrollt mit. Wer liest, sieht nebenbei, wovon der Text
   gerade spricht — ohne dass jemand klicken muss.

   Von Hand scrollen geht weiterhin. Sobald jemand das tut, hört das
   Mitscrollen auf: Wer selbst steuert, will nicht korrigiert werden. */
.fenster { margin: 0; }
@media (min-width: 881px) {
  .fenster { position: sticky; top: 6.5rem; }
  .arbeit { align-items: start; }
}
.fenster-leiste {
  display: flex; align-items: center; gap: .4rem;
  background: var(--papier-warm);
  border: 1px solid var(--linie); border-bottom: 0;
  border-radius: 10px 10px 0 0;
  padding: .6rem .8rem;
}
.fenster-leiste span { width: .6rem; height: .6rem; border-radius: 50%; background: #3a3a30; }
.fenster-leiste b {
  margin-left: .6rem; font-size: .76rem; font-weight: 500; color: var(--leise);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fenster-glas {
  height: clamp(20rem, 46vw, 32rem);
  overflow-y: auto;
  overscroll-behavior: contain;          /* sonst scrollt die Seite mit weiter */
  border: 1px solid var(--linie);
  border-radius: 0 0 10px 10px;
  background: #fff;
}
.fenster-glas img { border-radius: 0; }
.fenster-rahmen { position: relative; }

/* Hier lag ein weißer Verlauf über den unteren dreieinhalb
   Zentimetern des Fensters, mit der Begründung, er sei „der einzige
   Hinweis darauf, dass es weitergeht".

   Das stimmte einmal und stimmt nicht mehr: Vier Zeilen weiter unten
   steht eine sichtbare Bildlaufleiste, die genau diese Aufgabe
   übernimmt — und zwar besser, weil sie zusätzlich zeigt, WIE weit
   es noch geht.

   Damit war der Verlauf nur noch Dekoration, und zwar von der
   erkennbaren Sorte: ein Weichzeichner an der Unterkante gehört zum
   festen Inventar schnell gebauter Seiten. Dazu kam, dass er nach
   Weiß auslief, während die Seite auf Papier läuft — er passte nicht
   einmal zur eigenen Farbwelt.

   Eine abgeschnittene Kante sieht nur dann aus wie ein Ende, wenn
   nichts anderes das Gegenteil sagt. Hier sagen es der Rahmen, die
   Laufleiste und die Bildunterschrift. */
.fenster figcaption { margin-top: .7rem; font-size: .85rem; color: var(--leise); }

/* Eine sichtbare Bildlaufleiste, damit man erkennt, dass es weitergeht.
   Unsichtbar wäre hübscher und würde die halbe Wirkung kosten. */
.fenster-glas::-webkit-scrollbar { width: 10px; }
.fenster-glas::-webkit-scrollbar-track { background: var(--papier-warm); }
.fenster-glas::-webkit-scrollbar-thumb { background: #4a4a3c; border-radius: 5px; border: 2px solid var(--papier-warm); }
.fenster-glas { scrollbar-width: thin; scrollbar-color: #4a4a3c var(--papier-warm); }

.zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 1.6rem 1rem; margin: 2rem 0 0; }
.zahl { font-size: clamp(1.9rem, 1.2rem + 2vw, 2.8rem); font-weight: 300; letter-spacing: -.03em; line-height: 1; }
.zahl + span { display: block; margin-top: .35rem; font-size: .88rem; color: var(--tinte-weich); }

/* ── Leistungen: Liste statt Kartenstapel ─────────────────────────── */
.liste { margin: 2.5rem 0 0; border-top: 1px solid var(--linie); }
.posten {
  display: grid; grid-template-columns: 3.5rem 1fr 1.1fr; gap: 1rem 2rem;
  padding: 2rem 0; border-bottom: 1px solid var(--linie); align-items: start;
}
@media (max-width: 760px) { .posten { grid-template-columns: 2.5rem 1fr; } .posten > :last-child { grid-column: 2; } }
.posten .nr { font-size: .85rem; font-weight: 560; color: var(--leise); padding-top: .25rem; }
.posten p { margin: 0; color: var(--tinte-weich); }

/* ── Die Konzepte ─────────────────────────────────────────────────── */
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.8rem; margin-top: 2.5rem; }
.stueck { text-decoration: none; color: inherit; display: block; }
.stueck img { border-radius: 8px; border: 1px solid var(--linie); transition: transform .25s; }
.stueck:hover img { transform: translateY(-3px); }
.stueck .art { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--leise); margin: .9rem 0 .25rem; font-weight: 620; }
.stueck h3 { margin-bottom: .25rem; }
.stueck p { margin: 0; font-size: .95rem; color: var(--tinte-weich); }

/* ── Ablauf ───────────────────────────────────────────────────────── */
.schritte { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 2rem; margin-top: 2.5rem; }
.schritt { border-top: 2px solid var(--blau); padding-top: 1rem; }
.nacht .schritt { border-top-color: #c9c2b4; }
.schritt b { display: block; font-size: .85rem; color: var(--leise); font-weight: 620; margin-bottom: .4rem; }
/* #8d8578 war ein gedämpftes Grau auf schwarzem Grund und dort in
   Ordnung. Nach der Umkehrung stand dasselbe Grau auf einer HELLEN
   Fläche und kam auf 3,12 zu 1 — bei 14 Punkt verlangt die Richtlinie
   4,5. Im Bildschirmfoto sah es unauffällig aus; gezeigt hat es erst
   das Auslesen der berechneten Farbe. Jetzt dieselbe Farbe wie der
   Fließtext darunter: 8,36. */
.nacht .schritt b { color: #45443c; }
.schritt p { margin: .3rem 0 0; font-size: .95rem; }

/* ── Kontakt ──────────────────────────────────────────────────────── */
.kontakt-raster { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 760px) { .kontakt-raster { grid-template-columns: 1fr; } }
.wege { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.wege li { padding: .9rem 0; border-bottom: 1px solid var(--linie); }
.wege b { display: block; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--leise); margin-bottom: .2rem; font-weight: 620; }
.wege a { font-size: 1.1rem; font-weight: 580; }

/* ── Fußbereich ───────────────────────────────────────────────────── */
.fuss { border-top: 1px solid var(--linie); padding: 3rem 0 2.5rem; font-size: .92rem; color: var(--tinte-weich); }
.fuss-innen { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; align-items: center; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 1.3rem; }
.fuss a { color: var(--tinte-weich); text-decoration: none; }
.fuss a:hover { color: var(--tinte); text-decoration: underline; }

.kleingedruckt { font-size: .85rem; color: var(--leise); margin: 0 0 1.6rem; max-width: 40ch; }

/* ── Der Einzug ────────────────────────────────────────────────── */
#einzug {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: var(--papier);
  color: var(--blau);
  animation: vorhang-heben .55s cubic-bezier(.76,0,.24,1) .75s forwards;
}
#einzug svg { animation: v-dreht .85s cubic-bezier(.65,0,.35,1) infinite; }

@keyframes v-dreht {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Der Vorhang fährt nach oben weg und nimmt das Zeichen mit. Nicht
   ausblenden: Ein Vorhang, der sich auflöst, wirkt wie ein Fehler;
   einer, der sich hebt, wirkt wie eine Tür. */
@keyframes vorhang-heben {
  to { transform: translateY(-101%); visibility: hidden; }
}

/* Ist er oben, darf er nichts mehr abfangen. */
#einzug.weg { display: none; }

/* Der Inhalt steigt auf, wenn der Vorhang oben ist — nicht nach
   einer festen Zeit.

   Erst stand hier eine Verzögerung von 1,25 Sekunden. Sobald das
   Skript den Vorhang abkürzte, weil die Seite früher fertig war,
   stand eine halbe Sekunde lang eine leere Fläche da: Vorhang schon
   weg, Text noch nicht da. Jetzt hängt das eine am anderen.

   Wichtig ist die Richtung: Sichtbar ist der Normalfall. Versteckt
   wird nur, solange der Vorhang nachweislich läuft — und den gibt es
   nur, wenn das Skript läuft. Fällt es aus, ist der Text einfach da. */
html.einzug-laeuft .held > .huelle > * { opacity: 0; }
html.einzug-fertig .held > .huelle > * {
  animation: aufsteigen .7s cubic-bezier(.22,1,.36,1) backwards;
  opacity: 1;
}
html.einzug-fertig .held > .huelle > *:nth-child(2) { animation-delay: .08s; }
html.einzug-fertig .held > .huelle > *:nth-child(3) { animation-delay: .15s; }
html.einzug-fertig .held > .huelle > *:nth-child(4) { animation-delay: .22s; }
@keyframes aufsteigen {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Wiederkehrer bekommen die Seite sofort. */
html.schon-da #einzug { display: none; }

@media (prefers-reduced-motion: reduce) {
  #einzug { display: none; }
  .held > .huelle > * { animation: none; }
}

.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--rand); top: .6rem; background: var(--blau); color: #fff; padding: .6rem 1rem; border-radius: 4px; z-index: 99; }


/* ═══════════════════════════════════════════════════════════════════
   WAS DIE ÜBRIGEN SEITEN ZUSÄTZLICH BRAUCHEN
   ═══════════════════════════════════════════════════════════════════ */

/* ── Der Kopf einer Unterseite ─────────────────────────────────────
   Wie der Einstieg der Startseite, nur kleiner: eine Zeile Herkunft,
   eine große Überschrift, ein Absatz. Mehr braucht eine Unterseite
   nicht, um zu sagen, wo man ist. */
.seitenkopf { padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2rem, 4vw, 3rem); }
.seitenkopf h1 {
  font-size: clamp(2.2rem, 1.2rem + 4.4vw, 4.2rem);
  /* 300, nicht 680: Auf den Unterseiten sitzt die große Überschrift
     hier und nicht in .display. Beim ersten Messdurchlauf stand sie
     noch auf 680, weil die Regel „h1 { font-weight: 300 }" von
     „.seitenkopf h1" geschlagen wird — zwei Begriffe schlagen einen.
     Gesehen hat das nur die Messung des berechneten Werts. */
  line-height: 1.02; letter-spacing: -.028em; font-weight: 300;
  margin: 0 0 1.2rem; text-wrap: balance;
  /* „Datenschutzerklärung" ist ein Wort von 20 Zeichen. Bei 390 Punkten
     Schirmbreite passt es in keine Zeile — ohne Trennung ragt es über
     den Rand. Deutsch braucht das häufiger als Englisch. */
  hyphens: auto;
  overflow-wrap: break-word;
}

/* ── Fließtext mit Zwischenüberschriften ───────────────────────────
   Für Impressum, Datenschutz und alles, was man wirklich liest.
   Die Breite ist die wichtigste Regel: 66 Zeichen, mehr nicht. */
.text { max-width: 66ch; }
.text h2 { font-size: clamp(1.3rem, 1.1rem + .9vw, 1.65rem); margin: 2.6rem 0 .7rem; letter-spacing: -.018em; }
.text h2:first-child { margin-top: 0; }
.text h3 { margin: 1.8rem 0 .4rem; font-size: 1.08rem; }
.text p { margin: 0 0 1.1rem; color: var(--tinte-weich); }
.text ul { margin: 0 0 1.2rem; padding-left: 1.2rem; color: var(--tinte-weich); }
.text li { margin-bottom: .45rem; }
.text strong { color: var(--tinte); font-weight: 620; }

/* Angaben in Blöcken — Anschrift, Register, Kontakt. */
.angaben { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.8rem 2.5rem; margin: 2rem 0; }
.angaben b { display: block; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
             color: var(--leise); font-weight: 620; margin-bottom: .45rem; }
.angaben p { margin: 0; color: var(--tinte-weich); }

/* ── Fragen und Antworten ──────────────────────────────────────────
   <details> statt eigenem Aufklapp-Skript: Der Browser kann das seit
   Jahren, bedient es mit der Tastatur und sagt Vorleseprogrammen,
   ob gerade offen oder zu ist. Jede selbstgebaute Lösung wäre mehr
   Code und weniger Zugänglichkeit. */
.frage { border-bottom: 1px solid var(--linie); }
.frage summary {
  list-style: none; cursor: pointer; padding: 1.4rem 2.5rem 1.4rem 0;
  position: relative; font-size: 1.1rem; font-weight: 580; letter-spacing: -.012em;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: ""; position: absolute; right: .3rem; top: 50%;
  width: .7rem; height: .7rem; margin-top: -.45rem;
  border-right: 2px solid var(--blau); border-bottom: 2px solid var(--blau);
  transform: rotate(45deg); transition: transform .2s;
}
.frage[open] summary::after { transform: rotate(-135deg); margin-top: -.15rem; }
.frage p { margin: 0 0 1.4rem; color: var(--tinte-weich); max-width: 60ch; }

/* ── Eine Arbeit ausführlich ───────────────────────────────────────
   Für die Case Studies: Herausforderung, Lösung, Ergebnis
   nebeneinander statt untereinander. */
.fall { padding: clamp(2.5rem, 5vw, 4rem) 0; border-top: 1px solid var(--linie); }
.fall:first-of-type { border-top: 0; padding-top: 0; }
.fall-drei { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 2rem; margin-top: 2rem; }
.fall-drei b { display: block; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
               color: var(--leise); font-weight: 620; margin-bottom: .5rem; }
.fall-drei p { margin: 0; color: var(--tinte-weich); font-size: .97rem; }

/* ── Eine schlichte Aufzählung mit Haken ───────────────────────────*/
.punkte { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.punkte li { padding: .75rem 0 .75rem 1.9rem; border-bottom: 1px solid var(--linie); position: relative; color: var(--tinte-weich); }
.punkte li::before {
  content: ""; position: absolute; left: .15rem; top: 1.25rem;
  width: .55rem; height: .3rem; border-left: 2px solid var(--blau); border-bottom: 2px solid var(--blau);
  transform: rotate(-45deg);
}

/* ── Der Abschluss jeder Unterseite ────────────────────────────────*/
.ausklang { border-top: 1px solid var(--linie); }
.ausklang h2 { margin-bottom: 1.4rem; }

/* ── Ein abgesetzter Hinweis ───────────────────────────────────────
   Für Klarstellungen, die vor dem Inhalt stehen müssen und nicht
   danach.

   Hier stand eine 3 Punkt breite farbige Kante links — mit der
   Begründung „Messingkante wie im Briefbogen". Die Begründung war
   schöner als das Ergebnis: Ein farbiger Balken links an einem
   Textkasten ist der Hinweiskasten schlechthin, aus jedem Baukasten
   und jeder Vorlage, und er sagt „Achtung, Systemmeldung" statt
   „Anmerkung des Hauses".

   Im Briefbogen ist eine Kante außerdem etwas anderes als hier: Dort
   läuft sie am Blattrand entlang und gehört zum Papier. Mitten im
   Text gehört sie zum Kasten.

   Jetzt ein kurzer Strich darüber, wie ihn ein Setzer zieht, und
   etwas Luft. Der Hinweis ist abgesetzt, ohne sich zu melden. */
.hinweiskasten {
  border-top: 2px solid var(--blau);
  width: 3.5rem;                  /* nur der Strich ist kurz … */
  padding: 1rem 0 0;
  margin: 0 0 2.5rem;
}
/* … der Text darunter darf die volle Breite nutzen. Ohne diesen
   zweiten Kasten müsste man die Breite am Strich festmachen, und
   dann wäre der Strich so lang wie der Absatz. */
.hinweiskasten > * { width: 60ch; max-width: 88vw; }
.hinweiskasten p { margin: 0 0 .8rem; color: var(--tinte-weich); }
.hinweiskasten p:last-child { margin-bottom: 0; }
.hinweiskasten strong { color: var(--tinte); font-weight: 620; }
.stueck b { color: var(--tinte); font-weight: 620; }

/* ── Das Zeichen im Satz ───────────────────────────────────────────
   31. Oktober 2026

   Ein Fenster-Glyph, der mitten im Satz vor „Website" steht und auf
   Schriftgröße mitläuft. Der Kniff kommt aus der Vorlage, die Jasper
   geschickt hat; dort steht das Zeichen IM Satz, nicht daneben.

   Zwei Dinge halten ihn billig und wartbar:
     · Er ist gesetzt, nicht eingeklebt — em-Maße, also skaliert er
       mit clamp() der Überschrift, ohne eigene Bruchstellen.
     · stroke="currentColor" plus color hier. Damit braucht die dunkle
       Fassung keine zweite Regel: Sie belegt --blau um, das Zeichen
       folgt. Mit fest eingetragenem #d8a33f wäre es auf der hellen
       Seite messingfarben geblieben. */
.imsatz {
  display: inline-block;
  width: .78em; height: .78em;
  vertical-align: -.06em;
  margin: 0 .1em 0 .02em;
  color: var(--blau);
}
.imsatz svg { display: block; width: 100%; height: 100%; overflow: visible; }


/* ── Das Schaufenster ──────────────────────────────────────────────
   31. Oktober 2026

   Dasselbe Browserfenster wie oben, aber vom Seitenscrollen getrieben
   statt von Hand: Es klebt eine Weile fest, die Kundenseite läuft
   darin durch, dann tritt es zurück.

   WARUM EIN EIGENER ABSCHNITT UND NICHT DIE SPALTE NEBEN DEM TEXT

   Die Mechanik braucht 520 Bildschirmhöhen Scrollweg und ein
   klebendes Element über die ganze Höhe. In einer halbbreiten
   Rasterspalte geht beides nicht. Deshalb steht der Text in .arbeit
   einspaltig darüber und das Fenster allein darunter — groß, wie es
   die stärkste Figur der Seite verdient.

   DIE ZAHLEN HÄNGEN ZUSAMMEN:

       Weg gesamt        = 520vh + 100vh Sichtfenster = 620vh
       Fenster klebt bis = 520 / 620 = 0,839

   Das ist der Punkt, an dem der Rahmen nach oben wegwandert. Alles,
   was danach geschehen soll, geschieht unsichtbar. In der ersten
   Fassung begann der Rücktritt bei 0,9 und war deshalb nie zu sehen —
   Jasper hat genau das bemerkt.

   VERSCHIEBEN, NICHT SKALIEREN. Hier stand zuerst ein scale() am
   Rahmen. Gemessen: 34 Bilder/s, längstes Bild 417 ms. Mit translate:
   60 und 50 ms. Wer ein Element skaliert, lässt den Browser alles
   darin neu rastern — und darin liegt ein über 4000 Punkte hohes
   Bild. */
.schaufenster { position: relative; height: 520vh; }

.halt {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.1rem;
  padding: 4.5rem 0 1.5rem;        /* Platz für die klebende Kopfleiste */
}
/* Einleitungszeile und Schild reisen MIT dem Fenster.

   Zuerst stand die Zeile in einem eigenen Abschnitt darüber. Der
   klebende Behälter setzt das Fenster mittig in die Bildschirmhöhe —
   dadurch klaffte dazwischen eine halbe Bildschirmhöhe Nichts.
   Jasper: „der abstand ist sehr komisch". Zu Recht, es war einer. */
.halt .vor { width: min(1040px, 92vw); margin: 0; align-self: center; }

.rahmen {
  /* heran:   bis 0,16 — da hat der Rahmen oben angedockt.
     zurueck: ab 0,77, fertig bei 0,837, kurz bevor er wegwandert.
     Beide Werte sind Punkte und gehen zusammen in ein translate. */
  --heran:   clamp(0, calc((.16 - var(--p, 1)) * 200), 32);
  --zurueck: clamp(-25, calc((var(--p, 0) - .77) * -375), 0);

  width: min(1040px, 92vw); aspect-ratio: 16 / 10;
  display: flex; flex-direction: column;   /* Leiste oben, Glas füllt den Rest */
  overflow: hidden; border-radius: 10px;
  border: 1px solid var(--linie);
  box-shadow: 0 40px 90px -50px rgba(0,0,0,.55);
  transform: translate3d(0, calc((var(--heran) + var(--zurueck)) * 1px), 0);
  opacity: calc(1 + var(--zurueck) * .022);
  will-change: transform, opacity;
}
/* Die Leiste ist dieselbe wie am Fenster oben — eine Stelle, ein
   Aussehen. Nur die Rundungen fallen weg, weil hier der Rahmen sie
   schon trägt. */
.rahmen .fenster-leiste { border: 0; border-bottom: 1px solid var(--linie); border-radius: 0; flex: none; }
.glas { flex: 1; overflow: hidden; background: #fff; }
.glas img {
  width: 100%; height: auto; display: block;
  /* --zug kommt in Punkten aus dem Skript: Nur das kennt die
     wirkliche Höhe des Bildes und die des Ausschnitts. In Prozent
     ginge es nicht — die beziehen sich bei transform auf das Element
     selbst, und das Bild ist viel höher als sein Fenster. */
  transform: translate3d(0, calc(var(--zug, 0) * -1px), 0);
  will-change: transform;
}
.schau-schild {
  font-size: .85rem; color: var(--leise); text-align: center; margin: 0;
  opacity: calc(1 + var(--zurueck, 0) * .04);
}

/* Einspaltig, wenn das Fenster nicht mehr in der Spalte steht.
   Ohne diese Zeile stünde der Text in der halben Breite und daneben
   nichts — ein Loch, das wie ein Fehler aussieht. */
.arbeit.einspaltig { display: block; }

@media (prefers-reduced-motion: reduce) {
  /* Ein Fenster, durch das nichts läuft, braucht auch keine
     fünffache Bildschirmhöhe.

     UND ES DARF AUCH NICHTS ABSCHNEIDEN. Hier stand zuerst
     „.glas { overflow-y: auto }" — ein Kasten, in dem man selbst
     scrollt. Das war ein Rückfall in genau das Problem, das die
     Seitenprüfung an der alten Fassung bemängelt hat: Ein scrollbarer
     Kasten ohne tabindex ist mit der Tastatur nicht erreichbar, und
     wer keine Maus benutzt, kommt an den unteren Teil nicht heran.

     Statt den Kasten wieder ansteuerbar zu machen, fällt er weg: Das
     Bild steht in voller Höhe in der Seite. Die Seite wird dadurch
     lang — aber es ist nichts versteckt, und zum Lesen genügt das
     normale Scrollen der Seite, das mit jeder Tastatur geht. */
  .schaufenster { height: auto; }
  .halt { position: static; height: auto; padding: 2rem 0; }
  .rahmen {
    transform: none !important; opacity: 1 !important; will-change: auto;
    aspect-ratio: auto;
  }
  .glas { overflow: visible; }
  .glas img { transform: none !important; will-change: auto; }
}