/* =============================================================================
   Fassung A — Typenschild und Gravur

   Die Welt ist das Leistungsschild an der Maschine: eloxierte Aluplatten auf
   Maschinenlack, geprägte Schrift mit echter Lichtkante, Warngelb nur dort, wo
   gehandelt wird. Kein box-shadow als Deko — jede Kante hat eine physikalische
   Entsprechung: heller Grat oben, dunkler Schatten unten.
   ========================================================================== */

:root {
    /* Maschinenlack, RAL-6006-nah. Die Wand, auf der die Schilder sitzen. */
    --wand:        #2b312c;
    --wand-hell:   #343b34;
    --wand-tief:   #191d1a;

    /* Eloxiertes Aluminium. Die Schilder selbst. */
    --platte:      #d9d7d0;
    --platte-hell: #e9e7e0;
    --platte-tief: #c6c4bc;

    /* Gravur und Beschriftung */
    --tief:        #191b16;
    --gedaempft:   #52564c;
    --auf-wand:    #dcdad3;
    --auf-wand-ged:#a6aa9d;

    /* Warngelb. Nur Handlung und Warnung, nie Dekoration. */
    --signal:      #f0bf1a;
    --signal-tief: #c99b00;

    /* Die zwei Kanten, aus denen jede Prägung besteht */
    --grat:        rgba(255, 255, 255, .82);
    --schatten:    rgba(0, 0, 0, .30);

    --spalte:      1120px;
    --rand:        clamp(1.15rem, 4vw, 3rem);
    --kopf:        68px;
}

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

html {
    scroll-behavior: smooth;
    /* Die Sprungziele landen unter der klebenden Kopfzeile, nicht darunter. */
    scroll-padding-top: calc(var(--kopf) + 1rem);
}

body {
    margin: 0;
    background: var(--wand);
    color: var(--auf-wand);
    font-family: Archivo, system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    font-synthesis-weight: none;
    -webkit-text-size-adjust: 100%;
}

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

.spalte { max-width: var(--spalte); margin-inline: auto; }

/* Die Oberflächen, die der Browser stellt, gehören auch zur Gestaltung. */
::selection { background: var(--signal); color: var(--tief); }
:root { accent-color: var(--signal); caret-color: var(--signal); }
@supports (scrollbar-color: red blue) {
    html { scrollbar-color: #5d6459 var(--wand-tief); scrollbar-width: thin; }
}

:where(a, button):focus-visible {
    outline: 3px solid var(--signal);
    outline-offset: 3px;
    border-radius: 2px;
}

.sprung {
    position: fixed; z-index: 100; left: 1rem; top: -6rem;
    background: var(--signal); color: var(--tief);
    padding: .8rem 1.2rem; font-weight: 700; text-decoration: none;
}
.sprung:focus { top: 1rem; }

/* Die Wortmarke selbst steht in ../marke.css, eingebettet als Daten-URI.
   Hier wird nur ihre Größe gestellt. */

/* ---------------------------------------------------------------- Kopfzeile */
.kopf {
    position: sticky; top: 0; z-index: 50;
    height: var(--kopf);
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding-inline: var(--rand);
    background: var(--wand-tief);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .10), 0 1px 0 rgba(0, 0, 0, .5);
}

.marke { display: flex; align-items: baseline; gap: .85rem; text-decoration: none; --marke-hoehe: 1.1rem; }
.marke__zusatz {
    font-size: .74rem; font-weight: 500; letter-spacing: .12em;
    text-transform: uppercase; color: var(--auf-wand-ged);
}

.nav { display: flex; align-items: center; gap: 1.5rem; }
.nav a {
    text-decoration: none; font-size: .84rem; font-weight: 600;
    letter-spacing: .01em; color: var(--auf-wand);
}
.nav a:hover { color: var(--signal); }
.nav__kontakt {
    background: var(--signal); color: var(--tief) !important;
    padding: .55rem .9rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(0, 0, 0, .22);
}
.nav__kontakt:hover { background: #ffcd2b; }

/* Der Knopf ist auf schmalen Geräten der einzige Weg durch eine Seite von
   vierzehn Bildschirmhöhen. Deshalb zwei Dinge über die reine Beschriftung
   hinaus:

   ❗ **44 Pixel Mindesthöhe.** Gemessen waren es 32 — unter jeder Empfehlung
   für eine Daumenfläche (Apple 44 pt, Google 48 dp). Ausgerechnet der Knopf,
   den man auf einem Telefon zuerst braucht.

   ❗ **Er trägt den Abschnitt, in dem man gerade steht** (gesetzt von
   `seite.js`; ohne Skript steht dort weiter „Menü"). Der Name kann lang sein
   — „Was schneller geht" —, deshalb eine Höchstbreite mit Auslassungspunkten
   statt Umbruch. Eine Kopfzeile, die auf zwei Zeilen wächst, verschiebt beim
   Scrollen den ganzen Seiteninhalt. */
.menue {
    display: none;
    background: none; border: 1px solid #6b7166; color: var(--auf-wand);
    padding: .5rem .8rem; font: 600 .8rem Archivo, sans-serif;
    text-transform: uppercase; letter-spacing: .1em; cursor: pointer;
    min-height: 44px;
    align-items: center; gap: .45rem;
}

.menue__text {
    display: block;
    max-width: 9.5rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Der Winkel sagt, dass sich etwas aufklappt. Ohne ihn liest sich ein Knopf,
   in dem „Ablauf" steht, wie eine Gravur. */
.menue::after {
    content: ""; flex: none;
    width: .4rem; height: .4rem;
    border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
    transform: translateY(-.13rem) rotate(45deg);
}

.menue[aria-expanded="true"]::after { transform: translateY(.1rem) rotate(-135deg); }

/* ------------------------------------------------------------------ Schilder
   Eine Platte hat vier Kanten: oben Grat, unten Schatten, dazu ein flacher
   Absatz zur Wand und ein weicher Wurfschatten. Die feine Streifung ist die
   Bürstung des Aluminiums. */
.schild {
    position: relative;
    /* Die Farbe steht getrennt unter dem Verlauf. Sonst findet weder ein
       Kontrastmesser noch ein Browser ohne Verlaufsunterstützung einen Grund,
       auf dem der Text steht. */
    background-color: var(--platte);
    background-image:
        repeating-linear-gradient(90deg,
            rgba(255, 255, 255, .28) 0 1px, rgba(0, 0, 0, .02) 1px 3px),
        linear-gradient(176deg, var(--platte-hell), var(--platte) 55%, var(--platte-tief));
    color: var(--tief);
    padding: clamp(1.6rem, 3.5vw, 2.6rem);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .95),
        inset 0 -1px 0 rgba(0, 0, 0, .16),
        0 2px 0 rgba(0, 0, 0, .38),
        0 18px 34px rgba(0, 0, 0, .32);
}

.schild h3 {
    margin: 0 0 .85rem;
    font-size: clamp(1.22rem, 2.2vw, 1.5rem); font-weight: 800;
    letter-spacing: -.02em; line-height: 1.15;
    color: var(--tief);
    text-shadow: 0 1px 0 var(--grat);
}
.schild p { margin: 0 0 1rem; color: #3a3d35; }
.schild p:last-child { margin-bottom: 0; }

/* Die zwei Nietköpfe der Kontakttafel. Am grossen Schild sitzen seit dem
   11.08.2026 stattdessen vier echte Bohrungen (`.loch`) — Aarons Vorbildfoto
   zeigt Schraublöcher, keine Nieten. */
.kontakt__schild::before,
.kontakt__schild::after {
    content: ""; position: absolute; top: 14px; width: 9px; height: 9px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #f2f1ec, #9d9b93 62%, #6f6e67);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .45);
}
.kontakt__schild::before { left: 14px; }
.kontakt__schild::after  { right: 14px; }

/* --------------------------------------------------------------- Erster Blick */
.start {
    padding: clamp(2rem, 5vw, 4.5rem) var(--rand) clamp(3rem, 6vw, 5.5rem);
}
/* ══════════════════════════════════════════════════ Das Typenschild
   ❗ **Einspaltig, nicht zweispaltig.** Bis zum 11.08.2026 stand der Aufmacher
   in zwei Spalten mit einem Datenfeld rechts. Ein echtes Typenschild ist
   einspaltig: Zeichen und Name oben, Trennlinie, dann Zeile für Zeile. Aaron
   hat am 11.08. ein Foto geschickt und dazu gesagt: „so soll der Aufmacher
   aussehen." Die Bereiche `titel`/`daten` und die Spaltenaufteilung sind
   damit weggefallen. */
.schild--gross {
    max-width: var(--spalte); margin-inline: auto;
    padding: clamp(2.2rem, 4.5vw, 3.6rem) clamp(1.8rem, 4.5vw, 3.6rem);
    border-radius: clamp(14px, 2vw, 26px);
    display: block;

    /* ══════════════════════ Gebürstetes Metall ══════════════════════════
       Von Codex am 11.08.2026 gebaut und hier übernommen. Der Unterschied
       zur Platte der kleinen Schilder: **Ein Verlauf hat eine Richtung,
       gebürstetes Metall hat mehrere Lichtkanten quer über die Fläche.** Die
       entstehen durch harte Stopps — dreizehn Stück, schräg —, nicht durch
       weiche Übergänge.

       Die Bürstung liegt in zwei Frequenzen darüber: eine feine senkrechte
       und eine breitere, leicht gekippte. `isolation: isolate` hält die
       Pseudo-Elemente unter dem Text, ohne den Rest der Seite zu berühren. */
    isolation: isolate;
    overflow: hidden;
    background-image:
        repeating-linear-gradient(0deg,
            rgba(255,255,255,.12) 0 1px,
            transparent 1px 4px,
            rgba(20,24,21,.035) 4px 5px,
            transparent 5px 11px),
        repeating-linear-gradient(.35deg,
            transparent 0 17px,
            rgba(255,255,255,.1) 17px 18px,
            transparent 18px 31px),
        /* ❗ **Keine schrägen Lichtbänder.** Codex' erste Fassung hatte
           dreizehn harte Stopps quer über die Platte. Aaron am 11.08.2026:
           „ich brauch diesen hell dunkle Effekt des gebürsteten Metalls
           nicht." Übrig bleibt der flache Abfall von oben nach unten — die
           Physik eines Schilds, das von oben beleuchtet wird. Nebeneffekt:
           Der Schriftkontrast steigt, weil die dunkelste Stelle jetzt die
           Unterkante ist und nicht eine Lichtkante mitten im Text. */
        linear-gradient(180deg, #c4c7c2 0%, #b9bcb7 45%, #aeb1ac 100%);
    border: 1px solid rgba(255,255,255,.5);
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.92),
        inset 0 -2px 0 rgba(20,23,20,.32),
        inset 2px 0 0 rgba(255,255,255,.34),
        inset -2px 0 0 rgba(20,23,20,.2),
        0 3px 0 rgba(9,11,9,.58),
        0 24px 55px rgba(0,0,0,.45);
}

/* Breite Lichtbänder mit schmalen Gegenkanten, quer über die Platte.
   `screen` lässt die Bürstung darunter durchscheinen, statt sie zu
   übermalen — ohne das wirkt die Fläche lackiert statt gebürstet. */
/* Die vier Bohrungen. Echte Durchbrüche: dunkler Grund, heller Grat an der
   Unterkante, Schatten in der Bohrung — dieselbe Logik wie bei der Schrift. */
.loch {
    position: absolute;
    width: clamp(18px, 2.2vw, 28px); aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 42% 34%, #111311, #050605 72%);
    box-shadow:
        inset 0 -1.5px 0 rgba(255,255,255,.34),
        inset 0 2px 3px rgba(0,0,0,.8),
        0 1px 0 rgba(255,255,255,.5);
}
.loch--ol { top: clamp(.9rem, 1.8vw, 1.5rem); left: clamp(.9rem, 1.8vw, 1.5rem); }
.loch--or { top: clamp(.9rem, 1.8vw, 1.5rem); right: clamp(.9rem, 1.8vw, 1.5rem); }
.loch--ul { bottom: clamp(.9rem, 1.8vw, 1.5rem); left: clamp(.9rem, 1.8vw, 1.5rem); }
.loch--ur { bottom: clamp(.9rem, 1.8vw, 1.5rem); right: clamp(.9rem, 1.8vw, 1.5rem); }

/* ═══════════════════════════ Kopf: Zeichen und Marke ══════════════════════
   ❗ Das Zeichen ist keine Schrift, sondern dieselbe Maske wie die Wortmarke
   in `marke.css` — das R ohne Stamm auf Bogenhöhe. Auf einer maskierten
   Fläche wirkt `text-shadow` nicht; deshalb tritt `filter: drop-shadow()` an
   seine Stelle. Und `color` muss gesetzt sein: Die Maske färbt sich mit
   `currentColor`, sonst steht die Marke hell auf dem Blech statt
   durchgestanzt. */
/* ❗ Ohne das grosse R links daneben (bis 11.08.2026). Die Wortmarke trägt
   das R ohnehin — zweimal dasselbe Zeichen nebeneinander schwächt beide. Der
   Kopf sitzt dadurch enger am oberen Rand, und alles darunter rückt nach. */
.schild__kopf {
    padding-left: clamp(1.4rem, 3.5vw, 2.6rem);
}
/* ❗ Kein `height` mehr: seit dem 14.08.2026 rechnet `marke.css` die Kastenhöhe
   selbst aus, weil der Sockel des Roboter-R unter die Grundlinie reicht. Eine
   Höhe von Hand hier staucht die ganze Marke, ohne dass es nach einem Fehler
   aussieht — `contain` behält das Verhältnis und macht sie einfach kleiner. */
.schild__kopf .marke__wort {
    --marke-hoehe: clamp(1.5rem, 3.8vw, 2.6rem);
    color: var(--tief);
    filter: drop-shadow(0 1.5px 0 var(--grat)) drop-shadow(0 -1px 1px rgba(8,10,8,.5));
}
.schild__kopf .marke__zusatz {
    display: block; margin-top: .5rem;
    font-size: clamp(.58rem, 1.1vw, .8rem); font-weight: 700; letter-spacing: .3em;
    text-transform: uppercase; color: var(--tief);
    text-shadow: 0 1.5px 0 var(--grat), 0 -1px 1px rgba(8,10,8,.5);
}

.trennlinie {
    height: 3px; margin: clamp(1.2rem, 2.6vw, 2rem) 0;
    background: var(--tief); border-radius: 1px;
    box-shadow: 0 1.5px 0 var(--grat), 0 -1px 0 rgba(8,10,8,.45);
}

/* ❗ Der Weg ins Gespräch, auf dem Schild selbst — Aaron am 14.08.2026, bei
   der Entscheidung für diese Fassung: „mach vorher auf das Typenschild
   Kontakt/Anfrage zum Erstgespräch". Vorher stand im ersten Bildschirm keiner:
   weder am Rechner noch am Telefon, gemessen an der veröffentlichten Fassung.

   ❗ **Eingelassen, nicht aufgesetzt.** Ein Schild ist ein flaches Teil; ein
   schwebender Knopf darauf wäre ein Fremdkörper aus einer anderen Seite. Die
   Fläche sitzt in einer gefrästen Vertiefung (innerer Schatten oben, Grat
   unten) und trägt eine eingeprägte Beschriftung — dieselbe Machart wie die
   Gravur darüber.

   ❗ Bernstein nur als Kante, nicht als Fläche mit Text darauf: Das Gelb kam
   im Kontrast auf 1,78:1 gegen die Schildfarbe (siehe Zeile 424). Der Text
   bleibt `--tief` auf Metall und damit lesbar; die Farbe markiert nur, dass
   hier etwas passiert. */
.schild__anfrage {
    display: inline-flex; align-items: center; gap: .6rem;
    margin: 0 0 clamp(1.4rem, 3vw, 2.2rem);
    padding: .85rem clamp(1.1rem, 2.4vw, 1.7rem);
    min-height: 48px;   /* dieselbe Untergrenze wie an der Anlage */
    border: 2px solid var(--signal-tief);
    border-radius: .4rem;
    background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(8,10,8,.10));
    box-shadow:
        inset 0 2px 3px rgba(8,10,8,.45),
        inset 0 -2px 0 var(--grat),
        0 1px 0 var(--grat);
    color: var(--tief); text-decoration: none;
    font-weight: 800; font-size: clamp(.9rem, 1.5vw, 1.05rem);
    letter-spacing: .12em; text-transform: uppercase;
    text-shadow: 0 1.5px 0 var(--grat);
    transition: box-shadow .12s, transform .12s;
}
/* Gedrückt: Die Vertiefung wird tiefer, die Schrift rückt einen Punkt nach. */
.schild__anfrage:hover {
    box-shadow:
        inset 0 3px 5px rgba(8,10,8,.55),
        inset 0 -1px 0 var(--grat),
        0 1px 0 var(--grat);
}
.schild__anfrage:active { transform: translateY(1px); }

.schild__fuss {
    display: flex; align-items: center; justify-content: center;
    gap: clamp(.8rem, 2vw, 1.4rem);
    margin: clamp(1.4rem, 3vw, 2rem) 0 0 !important;
    font-size: clamp(.68rem, 1.2vw, .86rem); font-weight: 700; letter-spacing: .26em;
    text-transform: uppercase; color: var(--tief);
    text-shadow: 0 1.5px 0 var(--grat), 0 -1px 1px rgba(8,10,8,.5);
}
.schild__fuss::before, .schild__fuss::after {
    content: ""; width: clamp(2rem, 7vw, 6rem); height: 2px;
    background: var(--tief); box-shadow: 0 1.5px 0 var(--grat);
}

.start h1 {
    /* ❗ Der untere Abstand ist keine Zierde. Bis zum 13.08.2026 stand hier
       `margin: 0`, weil der Aufmacher zwei Zeilen hatte und das Datenfeld
       ohnehin tief genug sass. Mit „Die Anwendung von Ihren Mitarbeitern für
       Ihre Mitarbeiter." sind es drei Zeilen, und der Abstand zum Datenfeld
       war bei 1440 px Fensterbreite gemessen **0 px** — die Überschrift
       stiess auf „BERUF". */
    margin: 0 0 clamp(1.4rem, 3vw, 2.4rem);
    max-width: 16ch;
    font-size: clamp(2.25rem, 5.4vw, 4.35rem);
    font-weight: 850; line-height: 1.02; letter-spacing: -.035em;
    text-wrap: balance;
    color: var(--tief);

    /* ══════════════════════ Gestanzt, nicht graviert ════════════════════
       Aarons Frage vom 11.08.2026: die Buchstaben „wie gestanzt, mit
       Materialverdrängung". Beim Stanzen sinkt der Buchstabe ein UND das
       Material wirft sich rund um die Vertiefung auf. Drei Kantenpaare:

         1. dunkle Eintrittskante oben links — dort drückt der Stempel ein
         2. helle Innenkante unten rechts — dort erreicht Licht den Grund
         3. aufgeworfener Wulst aussen, enger als ein Schlagschatten

       ❗ **Ohne zweite Textebene.** Ein erster Entwurf legte eine Kopie der
       Überschrift als Umriss dahinter (`::before` mit `data-text`). Das sah
       gleich gut aus und hätte den Text im Markup verdoppelt — jede
       Änderung an zwei Stellen. Codex' Fassung kommt mit `paint-order` und
       einem dünnen `text-stroke` aus.

       ❗ **Gemessen, nicht geschätzt.** `--tief` (#191b16) gegen die
       **dunkelste** Stelle des Verlaufs (#aeb2af): **8,09 : 1**; gegen die
       hellste (#f5f6f4): 16,01. Gefordert sind für diese Schriftgröße 3 : 1.

       Der Wert gilt der dunkelsten Stelle, nicht dem Mittel — eine gestanzte
       Schrift ist per Definition dunkelgrau auf hellgrau, und genau daran
       scheitert so ein Effekt sonst. Ein erster Entwurf von mir lag bei
       2,4 : 1 und wäre am Prüfstand hängengeblieben. */
    paint-order: stroke fill;
    -webkit-text-stroke: 1px rgba(39,42,38,.72);
    text-shadow:
        -1px -1px 0 rgba(15,18,15,.86),
        -2px -2px 1px rgba(15,18,15,.38),
         1px  1px 0 rgba(255,255,255,.94),
         2px  2px 1px rgba(255,255,255,.48),
        -3px -3px 2px rgba(255,255,255,.34),
         3px  3px 2px rgba(20,23,20,.22);
}
/* Der zweite Satz ist die Erläuterung, nicht die zweite Schlagzeile. Auf
   voller Titelgröße wuchs der Aufmacher auf sechs Zeilen und schob die
   Handlung unter die Kante. Halbe Größe hält beides sichtbar. */
.start h1 em {
    display: block; font-style: normal; color: #3f4339;
    font-size: .52em; line-height: 1.1; letter-spacing: -.025em;
    margin-top: .5em; max-width: 24ch;
}

/* Was hier konkret angeboten wird, in vier Begriffen. Der Aufmacher nannte
   vorher nur das Ergebnis; wer nicht weiterliest, wusste nicht, ob hier
   jemand baut, berät oder schult. Als eingeschlagene Zeile auf dem Schild:
   dieselbe Prägung wie der Titel, nur klein. */
.leistungen {
    list-style: none; margin: clamp(1.6rem, 2.6vw, 2.2rem) 0 0; padding: 1rem 0 0;
    /* Grid statt Flex: Ein umbrechendes Flex-Layout lässt den Trennstrich des
       letzten Elements einer Zeile in der Luft hängen. Vier feste Spalten
       haben Ränder statt Striche, und die halten jeden Umbruch aus. */
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid rgba(0, 0, 0, .22);
    box-shadow: inset 0 1px 0 var(--grat);
}
.leistungen li {
    font-size: .88rem; font-weight: 700; letter-spacing: -.005em;
    line-height: 1.3; color: #34372f;
    /* Rechts genauso viel Luft wie links, sonst klebt der Text am Strich
       der nächsten Spalte. */
    padding: 0 .9rem 0 .9rem;
    border-left: 1px solid rgba(0, 0, 0, .28);
    text-shadow: 0 1px 0 var(--grat);
}
.leistungen li:first-child { padding-left: 0; border-left: 0; }
.leistungen li:last-child { padding-right: 0; }

/* ❗ `.schild--gross` davor, nicht nur die Klasse: Die Unterzeile ist ein <p>
   im Schild, und `.schild p { margin: 0 0 1rem }` hat mit 0-1-1 die höhere
   Spezifität. Der Abstand stand hier seit dem ersten Entwurf und war gemessen
   0 px — ein Wert, der dasteht und nichts bewirkt, ist schwerer zu finden als
   ein fehlender. */
.schild--gross .start__unterzeile {
    margin: clamp(1.6rem, 2.6vw, 2.2rem) 0 0; max-width: 46ch;
    font-size: clamp(1.02rem, 1.4vw, 1.15rem); color: #3a3d35;
}

/* Das eine gebaute Beispiel, direkt im Aufmacher. Als eingelassene Zeile
   gesetzt — ein Typenschild trägt Fakten, es wirbt nicht. */
.start__beispiel {
    /* Eigener Rasterbereich zwischen Unterzeile und Knöpfen. `unter`
       mitzubenutzen hätte beide Absätze übereinandergelegt. */
    margin: .9rem 0 0; max-width: 46ch;
    padding-left: .85rem; border-left: 2px solid var(--signal);
    font-size: clamp(.96rem, 1.25vw, 1.05rem); color: #3a3d35;
}

/* ❗ `--tief` und nicht `--signal-tief`. Das Bernstein kam auf 1,78:1 gegen
   den hellen Schildgrund, gefordert sind 4,5:1 — gemeldet vom Prüfstand in
   `skripte/pruefen.mjs`, nicht geschätzt. Signalfarbe trägt hier ohnehin
   Handlungen, und ein Textverweis ist keine.

   ❗ Das Polster ist kein Abstand, sondern die Trefferfläche: Als Zeile im
   Absatz war der Verweis 18 px hoch. Dieselbe Untergrenze, die eine Zeile
   weiter oben für den Menüknopf gilt. */
.start__beispiel a {
    display: inline-block; margin-left: .15rem;
    padding-block: .55rem;
    color: var(--tief); text-underline-offset: .18em;
    text-decoration-thickness: 2px; text-decoration-color: var(--signal-tief);
}

/* ═══════════════════════════ Die Bedientaster ════════════════════════════
   Nach Aarons zweitem Foto vom 11.08.2026, einem Bedienpult: über jedem
   Taster ein weisses Beschriftungsschild im schwarzen Halter, darunter der
   runde Drucktaster mit Chromring. Der erste leuchtet, der zweite nicht — wie
   START und STOP auf dem Foto.

   ❗ **Sie sitzen ausserhalb des Schilds**, auf der Wand. An einer Maschine
   ist das Typenschild ein aufgeschraubtes Teil; die Bedienelemente sitzen im
   Blech daneben. Ein Schild, auf dem man drücken kann, gibt es nicht. */
.pult {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: clamp(1.6rem, 5vw, 4rem);
    margin-top: clamp(2.2rem, 4.5vw, 3.4rem);
    max-width: var(--spalte); margin-inline: auto;
}
/* ❗ Die Taster-Gestaltung stand hier bis zum 13.08.2026 — .taster,
   .taster__schild, .taster__knopf, der Not-Aus-Pilz, rund 70 Zeilen.
   Sie ist mit dem letzten Taster im Markup weggefallen (Aaron: "beim
   Erstgespraech genauso wie bei der Kontaktaufnahme einfach ein Feld").

   Stehen geblieben ist .pult darueber: Es traegt jetzt den schlichten
   Knopf. Eine Regel, die nichts mehr trifft, aber weiter geladen wird,
   ist die Sorte Rest, die beim naechsten Umbau eine Stunde kostet. */

/* ----------------------------------------------------------------- Datenfeld
   Das Feld eines echten Typenschildes: Bezeichner links, Wert rechts, alles in
   einer Zeile, Ziffern tabellarisch. */
.datenfeld {
    margin: 0; align-self: start;
    font-variant-numeric: tabular-nums;
    border-top: 1px solid rgba(0, 0, 0, .22);
    box-shadow: inset 0 1px 0 var(--grat);
}
.datenfeld > div {
    display: grid; grid-template-columns: 6.6rem 1fr; gap: .9rem;
    padding: .62rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, .16);
}
/* .74rem statt .68: darunter liegt der Bezeichner unter 11 px und ist in
   einer hellen Halle auf einem Telefon nicht mehr zu lesen. */
.datenfeld dt {
    font-size: .74rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--gedaempft);
    padding-top: .18rem;
}
.datenfeld dd { margin: 0; font-size: .93rem; font-weight: 500; color: var(--tief); }
.datenfeld a { text-decoration-color: var(--signal-tief); text-decoration-thickness: 2px; text-underline-offset: .18rem; }

/* -------------------------------------------------------------------- Knöpfe
   Ein Knopf ist eine erhabene Platte. Beim Drücken sinkt er ein: die Lichtkante
   springt von oben nach innen. Das ist die einzige Bewegung der Seite. */
.knopf {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 52px; padding: .85rem 1.5rem;
    text-decoration: none; font-weight: 700; font-size: .95rem;
    letter-spacing: .01em;
    background-color: #d9d7d0;
    background-image: linear-gradient(#e6e4dd, #cdcbc3);
    color: var(--tief);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .95),
        inset 0 -2px 0 rgba(0, 0, 0, .18),
        0 2px 0 rgba(0, 0, 0, .35);
    transition: transform .12s ease-out, box-shadow .12s ease-out, background .12s ease-out;
}
.knopf--signal { background-color: var(--signal); background-image: linear-gradient(#f7cd3c, var(--signal)); }
.knopf--gross { min-height: 62px; font-size: 1.1rem; padding-inline: 2rem; }

.knopf:hover { background: linear-gradient(#efedE6, #d6d4cc); }
.knopf--signal:hover { background: linear-gradient(#ffd748, #edbb10); }

.knopf:active, .knopf:focus-visible {
    transform: translateY(2px);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .38), inset 0 -1px 0 rgba(255, 255, 255, .4);
}

/* ------------------------------------------------------------- Abschnitte */
section { padding-inline: var(--rand); }

.wand, .bildbeleg { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.wand { background: var(--wand); }
.bildbeleg { background: var(--wand-hell); }

.schneller, .daten, .person, .schulung {
    background: var(--platte);
    color: var(--tief);
    padding-block: clamp(3.5rem, 7vw, 6.5rem);
}

h2 {
    margin: 0 0 1.1rem;
    font-size: clamp(1.85rem, 4vw, 3rem); font-weight: 800;
    line-height: 1.06; letter-spacing: -.03em; text-wrap: balance;
    max-width: 20ch;
}
.wand h2, .bildbeleg h2 { color: #efeee8; }
.schneller h2, .daten h2, .person h2, .schulung h2 {
    color: var(--tief); text-shadow: 0 1px 0 var(--grat);
}

.vorspann {
    margin: 0 0 clamp(2rem, 4vw, 3rem); max-width: 62ch;
    font-size: clamp(1.02rem, 1.3vw, 1.12rem);
}
.wand .vorspann { color: var(--auf-wand-ged); }
.schneller .vorspann, .daten .vorspann, .schulung .vorspann { color: #3f4339; }

/* ❗ Was die Sache NICHT ist, steht dabei — abgesetzt durch eine Kante, nicht
   durch kleinere Schrift. Kleingedrucktes liest niemand, und genau dieser
   Absatz ist der, den ein Betriebsrat zuerst sucht. */
.einwand {
    margin: clamp(2rem, 4vw, 3rem) 0 clamp(1.8rem, 3vw, 2.6rem);
    padding-left: 1.1rem; max-width: 64ch;
    border-left: 3px solid var(--signal-tief);
    color: #3f4339; font-size: .97rem; line-height: 1.62;
}

.nebensatz {
    margin: clamp(2rem, 4vw, 3rem) 0 0; max-width: 68ch;
    font-size: .92rem; color: var(--gedaempft);
    padding-top: 1.1rem; border-top: 1px solid rgba(0, 0, 0, .18);
}
.wand .nebensatz { color: var(--auf-wand-ged); border-top-color: rgba(255, 255, 255, .16); }

/* ------------------------------------------------------------- Das Problem
   Fünf Sätze aus der Schicht, direkt auf der Wand. Bewusst ohne Kacheln: das
   ist eine Aufzählung von Situationen, keine Produktliste. */
.faelle { columns: 2; column-gap: clamp(2rem, 5vw, 4rem); max-width: 88ch; }
.faelle p {
    break-inside: avoid; margin: 0 0 1.6rem;
    padding-left: 1.3rem; position: relative;
    color: #cfd2c8;
}
.faelle p::before {
    content: ""; position: absolute; left: 0; top: .62em;
    width: 7px; height: 7px; background: var(--signal);
}

/* -------------------------------------------------------- Was schneller geht */
.schilder {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.1rem, 2.2vw, 1.8rem);
}
.schilder .schild { display: flex; flex-direction: column; }

.ersparnis {
    margin-top: auto !important; padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, .2);
    box-shadow: inset 0 1px 0 var(--grat);
    font-size: .93rem; color: #3a3d35 !important;
}
.ersparnis span {
    display: block;
    font-size: .72rem; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: var(--gedaempft);
    margin-bottom: .3rem;
}

/* -------------------------------------------------------- Begründung dahinter
   Die Aussage steht, die Begründung klappt auf — aber nur auf dem Telefon.

   ❗ **Am Schreibtisch macht das Raster die Rangordnung.** Vier Schilder
   nebeneinander: Man sieht mit einem Blick, was die vier Punkte sind, und
   liest die Begründung nur beim eigenen. Auf dem Telefon wird daraus eine
   Kolonne, in der Überschrift, Erklärung und Ersparnis gleich schwer wiegen.
   Diese Regeln stellen die Rangordnung wieder her, die dort verlorengeht.

   ❗ **`open` steht im Markup, geschlossen wird per Skript.** Ohne JavaScript
   ist die Seite deshalb genau die von vorher. Am Schreibtisch bleibt alles
   offen und die Zusammenfassungszeile verschwindet — ein Aufklapper ohne Not
   ist ein Handgriff ohne Gegenwert. */
.warum > summary {
    display: none;
}

@media (max-width: 780px) {
    .warum > summary {
        display: flex; align-items: center; gap: .45rem;
        margin-block: .55rem;
        min-height: 44px;
        cursor: pointer; list-style: none;
        font: 700 .72rem/1 Archivo, sans-serif;
        text-transform: uppercase; letter-spacing: .16em;
        color: var(--gedaempft);
    }
    .warum > summary::-webkit-details-marker { display: none; }

    /* ❗❗ Wieder ein Pfeil — Aaron am 13.08.2026: „Nimm die Taste raus und
       baue wieder Pfeile beim Öffnen ein."

       Hier stand seit dem 12.08.2026 ein kleiner Drucktaster mit Chromring
       und blau leuchtender Kappe, entstanden aus „mache einen kleinen Taster
       neben den Ausrollbaren, anstatt des Pfeils". Die Begründung damals war
       gut — der Pfeil war das einzige Zeichen auf der Seite, das nach
       Webseite aussah und nicht nach Maschine.

       ❗ Was dagegen zählt und schwerer wiegt: Ein Pfeil SAGT, was passiert,
       wenn man tippt. Ein Taster sagt nur, dass man tippen kann. Bei einem
       Aufklapper ist die Richtung die ganze Auskunft, und die gibt es in
       einem Chromring nicht — auch nicht mit Farbwechsel.

       Derselbe Chevron wie in Fassung B, damit die beiden hier nicht
       auseinanderlaufen: rechts und unten eine Kante, um 45 Grad gedreht. */
    .warum > summary::after {
        content: ""; flex: none;
        width: .38rem; height: .38rem;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: translateY(-.12rem) rotate(45deg);
        transition: transform .12s;
    }
    .warum[open] > summary::after { transform: translateY(.08rem) rotate(-135deg); }

    /* ❗ Der Ablauf steht auf Maschinenlack, die Schilder auf hellem Alu.
       `--gedaempft` kam auf dem dunklen Grund auf **1,77 : 1** — gemeldet von
       `skripte/pruefen.mjs` an drei Stellen, bei geforderten 4,5. Eine Farbe,
       die auf zwei verschiedenen Gründen liegt, braucht zwei Werte. */
    .phase .warum > summary { color: var(--auf-wand-ged); }
}

/* -------------------------------------------------------- Klickstrecke
   Fünf echte Bildschirme, umgeschaltet von einer Radiogruppe. Kein Skript:
   die Strecke funktioniert auch dann, wenn JavaScript nicht lädt, und die
   Pfeiltasten bedienen sie von Haus aus. */
/* ❗ Die Überschrift des Abschnitts steht über dem Raster und richtet sich an
   derselben Spaltenbreite aus wie alles andere — `.spalte` liegt hier am
   Raster, nicht am Abschnitt, deshalb braucht sie ihre eigenen Ränder.

   ❗❗ Aaron am 12.08.2026: „mach die Überschrift so gross, dass es eine Zeile
   ist." Die Grösse steht deshalb nicht in `vw`, sondern in `cqw` — Prozent der
   **verfügbaren** Breite, nicht des Fensters. Der Unterschied ist hier keine
   Feinheit: In dieser Fassung liegt der Abschnitt im HMI-Panel, und dessen
   Rahmen nimmt bei 360 px über 100 px weg. Gemessen: 360 px Fenster, 247 px
   Platz. Eine `vw`-Rechnung hätte an dieser Stelle um ein Drittel danebengelegen.

   Der Faktor 9,6 kommt aus einer Messung, nicht aus einer Schätzung: Bei
   `font-size: 100px` ist „Der Fertigungslotse" in Archivo 850 genau 1000 px
   breit, also passt die Zeile bei 10 % der Containerbreite. 9,6 lässt vier
   Prozent Luft, damit ein anderer Zeichensatz sie nicht umbrechen lässt.

   ❗ `nowrap` bleibt trotzdem stehen. Wer den Text hier je ändert, bekommt sonst
   still einen Umbruch statt eines sichtbar zu breiten Titels — und der Umbruch
   ist genau das, was nicht passieren soll. */
.bildbeleg__kopf {
    max-width: var(--spalte);
    margin: 0 auto clamp(1.6rem, 3.5vw, 2.6rem);
    padding-inline: var(--rand);
    container-type: inline-size;
}
.bildbeleg__titel {
    margin: 0;
    white-space: nowrap;
    font-size: clamp(2.1rem, 5vw, 3.6rem);   /* Rückfall ohne cqw-Unterstützung */
    font-size: 9.6cqw;
    font-weight: 850;
    letter-spacing: -.035em;
}
/* Zwei Sätze, was der Lotse ist. `max-width` in Zeichen und nicht in Prozent:
   Die Überschrift darüber füllt die Zeile bis auf den Millimeter, ein Absatz
   in derselben Breite wäre auf dem Schreibtisch unlesbar lang. */
.bildbeleg__was {
    margin: clamp(.9rem, 2vw, 1.3rem) 0 0; max-width: 58ch;
    font-size: clamp(1rem, 1.25vw, 1.1rem); line-height: 1.6;
    color: var(--auf-wand-ged);
}

/* ❗ Einspaltig seit dem 12.08.2026, mittig. Zwei Spalten hatten einen Grund,
   solange rechts neben dem Gerät ein Textblock stand; der ist in den
   Datenabschnitt gezogen, und ein zweispaltiges Raster mit leerer rechter
   Spalte schiebt das Telefon an den linken Rand, während daneben nichts steht.
   Genau so sah es im ersten Bild nach dem Ausbau des Panelrahmens aus. */
.bildbeleg__raster {
    display: grid; justify-items: center;
    gap: clamp(1.6rem, 3vw, 2.4rem);
}
.tour { margin: 0; position: relative; }

/* Die Schalter bleiben bedienbar und fokussierbar, nur unsichtbar. */
/* ❗❗ **`fixed` und nicht `absolute` — das ist die Reparatur eines Sprungs.**
   Beim Umschalten bekommt das zugehoerige Radio den Fokus, und ein Browser
   scrollt ein fokussiertes Element in den Sichtbereich. Absolut gesetzt lagen
   alle siebzehn ganz oben in der `figure`, oberhalb des Telefons: Wer unten auf
   die Schrittleiste tippte, riss die Seite nach oben. Gemessen am 12.08.2026
   bei 390 px Breite — 440 px Sprung bei 844 px Fensterhoehe, 668 bei 740, und
   **718 bei 640**. Je kleiner das Telefon, desto schlimmer.

   Aaron: „jedes Mal, wenn ich auf etwas klicke … und ich zurueckgehe, springt
   er nach oben und dann seh ich nur noch die Haelfte des Lotsen und schon die
   Haelfte der anderen Seite."

   `fixed` haelt den Schalter immer im Sichtfeld, also hat der Browser nie
   etwas zu scrollen — egal, ob jemand oben im Bild oder unten auf die Leiste
   tippt. Die Geschwisterselektoren `#tN:checked ~ .telefon` bleiben davon
   unberuehrt: Die Position aendert das Layout, nicht die Reihenfolge im DOM.

   ❗ `scroll-margin` waere hier wirkungslos: Es verschiebt den Zielpunkt eines
   Scrollvorgangs, verhindert ihn aber nicht. */
.tour__schalter {
    position: fixed; top: 50%; left: 0;
    width: 1px; height: 1px;
    opacity: 0; pointer-events: none;
}

.telefon {
    width: 100%; max-width: 300px;
    border: 10px solid #14170f; border-radius: 24px; overflow: hidden;
    background: #14170f;
    box-shadow: 0 22px 40px rgba(0, 0, 0, .45);
}
.telefon__leiste {
    display: flex; justify-content: space-between;
    padding: .5rem .9rem;
    font-size: .64rem; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: #8d9488;
}

/* Der Bildschirm hat das Seitenverhältnis eines Telefons und scrollt in sich
   selbst — die Bilder zeigen die ganze Seite, nicht nur den Ausschnitt. Damit
   lässt sich das Gerät auf der Website bedienen wie in der Hand.
   `overscroll-behavior: contain` verhindert, dass die Website mitscrollt,
   sobald man unten angekommen ist. */
/* ❗ Alle fünf Bildschirme liegen übereinander, der inaktive ist
   `visibility: hidden` — nicht `display: none`. Der Unterschied ist gemessen:
   Bei `display: none` holt der Browser ein `loading="lazy"`-Bild erst beim
   Umschalten, und zwischen Tippen und Bild lagen 861 ms auf gedrosselter
   Verbindung. So laden sie, sobald die Tour ins Sichtfeld kommt. */
/* ❗ Der Schatten am unteren Rand sagt, dass es weitergeht. Ohne ihn hat
   Aaron „Hallengeräusch anlernen" nicht gefunden — es steht auf dem
   Werkzeuge-Bildschirm, aber unterhalb des sichtbaren Ausschnitts. Ein
   Bildschirm, der wie ein fertiges Bild aussieht, wird nicht gescrollt. */
.telefon__stapel {
    position: relative; aspect-ratio: 390 / 844;
}
.telefon__stapel::after {
    content: ""; position: absolute; inset: auto 0 0; height: 3.2rem;
    background: linear-gradient(transparent, rgba(10, 12, 9, .85));
    pointer-events: none; z-index: 2;
}
.tour__schirm {
    position: absolute; inset: 0;
    visibility: hidden;
    overflow-y: auto; overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; scrollbar-color: #4a5148 #14170f;
}
/* ❗ Der Bezug der Tippflächen, und deshalb `relative` hier und NICHT am
   Scrollcontainer: dort bezögen sich ihre Prozentwerte auf die sichtbare
   Telefonhöhe statt auf die Bildhöhe, und beim Scrollen blieben sie stehen. */
.tour__blatt { position: relative; }
.tour__schirm img { width: 100%; height: auto; display: block; }

/* Welcher Bildschirm sichtbar ist und wie der gewählte Schritt aussieht,
   steht in ../tour-schalter.css — erzeugt, weil es mit der Zahl der
   Bildschirme wächst. Hier stehen nur die Farben, die es dort einsetzt. */
.tour {
    --tour-aktiv-schrift: var(--signal);
    --tour-aktiv-grund: transparent;
    --tour-aktiv-kante: var(--signal);
    --tour-fokus: var(--signal);
}

/* Die Tippflächen liegen über den Knöpfen der Anwendung. Ihre Lage misst
   skripte/tour-bilder.mjs beim Abfotografieren — von Hand eingetragene Werte
   säßen nach dem nächsten Umbau still daneben. */
/* ❗ Mindestens 44 × 44 px, um die Mitte des gemessenen Knopfes gelegt.
   Die gemessenen Prozentwerte allein reichen nicht: Das Bild wird im
   Telefonrahmen auf zwei Drittel verkleinert, und ein Knopf, der in der
   Anwendung 36 × 48 px hat, ist hier noch 24 × 32 px gross. Von 34 Flaechen
   lagen 25 unter dem, was ein Daumen trifft. `max()` statt `min-width`, damit
   die Flaeche zentriert waechst — sonst schoebe sie sich nach rechts unten vom
   Knopf weg, auf den sie zeigt. */
.tour__ziel {
    position: absolute;
    left: calc(var(--x) + var(--w) / 2);
    top: calc(var(--y) + var(--h) / 2);
    width: max(var(--w), 44px); height: max(var(--h), 44px);
    transform: translate(-50%, -50%);
    cursor: pointer; border-radius: 10px;
    transition: box-shadow .12s ease-out, background .12s ease-out;
}
/* ❗ Der Hinweis nur dort, wo es einen Zeiger gibt. Auf einem Telefon bleibt
   `:hover` nach dem Antippen haften: Die zuletzt berührte Fläche blieb gelb
   umrandet und sah aus, als wäre etwas ausgewählt. Am Gerät gesehen, nicht im
   Simulator. `:active` bleibt für alle — das ist der Moment der Berührung. */
@media (hover: hover) {
    .tour__ziel:hover {
        background: rgba(240, 191, 26, .16);
        box-shadow: inset 0 0 0 2px var(--signal);
    }
}
.tour__ziel:active {
    background: rgba(240, 191, 26, .16);
    box-shadow: inset 0 0 0 2px var(--signal);
}

/* Nur für Vorlesehilfen: Der Text sagt, wohin die Fläche führt, ohne über dem
   Bildschirmfoto zu liegen. */
.nur-vorlesen {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* auto-fit statt fester Spaltenzahl: Bei acht Bildschirmen bricht die Leiste
   auf zwei Zeilen um, statt jede Beschriftung auf 36 px zu quetschen. */
.tour__schritte {
    list-style: none; margin: 1.2rem 0 0; padding: 0; max-width: 300px;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(62px, 1fr));
    /* Der Zeilenabstand ist groß, weil die Markierung eine Oberlinie ist:
       Bei engem Abstand klebt die Linie des Schrittes darunter am Schritt
       darüber und sieht aus, als wären zwei markiert. */
    gap: 1rem .3rem;
}
.tour__schritte label {
    display: grid; justify-items: center; align-content: start; gap: .25rem;
    height: 100%;
    padding: .5rem .1rem; cursor: pointer;
    font-size: .62rem; font-weight: 600; line-height: 1.15; text-align: center;
    color: var(--auf-wand-ged);
    border-top: 2px solid rgba(255, 255, 255, .18);
    transition: color .12s ease-out, border-color .12s ease-out;
}
.tour__schritte span {
    font-size: .78rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.tour__schritte label:hover { color: #efeee8; border-top-color: rgba(255, 255, 255, .45); }

.tour figcaption {
    margin-top: 1.1rem; max-width: 300px;
    font-size: .82rem; line-height: 1.5; color: var(--auf-wand-ged);
}
.tour figcaption strong { color: #efeee8; font-weight: 600; }
.bildbeleg__text p { max-width: 58ch; color: #cfd2c8; }

@media (prefers-reduced-motion: reduce) {
    .tour__schritte label, .tour__ziel { transition: none; }
}

/* -------------------------------------------------------------------- Ablauf
   Drei Phasen nebeneinander, die Nummern laufen über alle durch. Die
   Reihenfolge ist die Aussage, deshalb sind die Ziffern hier keine Zierde. */
.phasen {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    /* Ein Zähler über alle drei Phasen hinweg, sonst begänne jede wieder bei 1. */
    counter-reset: schritt;
}
.phase {
    padding: 1.4rem clamp(1.1rem, 2.4vw, 2rem) 0;
    border-top: 2px solid var(--signal);
}
.phase + .phase { border-left: 1px solid rgba(255, 255, 255, .16); }
.phase:first-child { padding-left: 0; }
.phase:last-child { padding-right: 0; }

.phase h3 {
    margin: 0 0 1.4rem;
    font-size: clamp(1.15rem, 1.9vw, 1.4rem); font-weight: 800;
    letter-spacing: -.02em; color: #efeee8;
}

.schritte { list-style: none; margin: 0; padding: 0; }
.schritte li {
    counter-increment: schritt;
    /* ❗ Zwei Spalten, aber ALLE Kinder in die zweite. Ohne die Regel darunter
       landet der Absatz in Zeile 2 der ERSTEN Spalte — also in 2,6 rem Breite,
       ein Wort je Zeile. Genau so stand es am 10.08.2026 auf der Seite, und
       weder Kontrastmessung noch Querscroll-Prüfung schlagen dabei an. */
    display: grid; grid-template-columns: 2.6rem minmax(0, 1fr);
    padding: 0 0 1.5rem;
}
.schritte li > * { grid-column: 2; }
.schritte li::before {
    content: counter(schritt);
    grid-column: 1; grid-row: 1;
    font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums;
    color: var(--signal); line-height: 1.35;
}
.schritte h4 {
    margin: 0 0 .3rem; font-size: 1.05rem; font-weight: 700;
    letter-spacing: -.01em; color: #efeee8; line-height: 1.3;
}
.schritte p { margin: 0; color: #cfd2c8; font-size: .96rem; }

/* --------------------------------------------------------------- Ihre Daten */
.zusagen { margin: 0; }
.zusagen > div {
    padding: 1.3rem 0;
    border-top: 1px solid rgba(0, 0, 0, .18);
    box-shadow: 0 1px 0 var(--grat) inset;
}
.zusagen > div:last-child { border-bottom: 1px solid rgba(0, 0, 0, .18); }
.zusagen dt {
    font-size: clamp(1.05rem, 1.6vw, 1.25rem); font-weight: 700;
    letter-spacing: -.015em; color: var(--tief); margin-bottom: .3rem;
}
.zusagen dd { margin: 0; max-width: 70ch; color: #3f4339; }

/* ------------------------------------------------------------------ Grenzen
   Fast schwarz, oben die Gelb-Schwarz-Schraffur der Hallenmarkierung. Sie
   bedeutet in einem Werk genau das, was der Abschnitt sagt: hier ist eine
   Grenze. Deshalb steht sie hier und nirgends sonst. */
.grenzen {
    position: relative;
    background: #14170f; color: #e2e4dc;
    padding-block: clamp(4rem, 7vw, 6.5rem);
}
.grenzen::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 14px;
    background: repeating-linear-gradient(-45deg,
        var(--signal) 0 16px, #14170f 16px 32px);
}
.grenzen h2 { color: #fff; }

.grenzliste { list-style: none; margin: 0; padding: 0; max-width: 72ch; }
.grenzliste li {
    position: relative; padding: 1rem 0 1rem 2.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, .13);
    color: #cbcec4;
}
.grenzliste li::before {
    content: ""; position: absolute; left: 0; top: 1.42em;
    width: 14px; height: 3px; background: var(--signal);
}

.grenzen__schluss {
    margin: clamp(2.2rem, 4vw, 3.2rem) 0 0; max-width: 24ch;
    font-size: clamp(1.4rem, 3vw, 2.1rem); font-weight: 800;
    line-height: 1.24; letter-spacing: -.025em; color: #fff;
    text-wrap: balance;
}

/* -------------------------------------------------------------------- Person */
.person__raster {
    display: grid; grid-template-columns: minmax(220px, .62fr) minmax(0, 1.38fr);
    gap: clamp(2rem, 6vw, 5rem); align-items: center;
}
.person__bild img {
    width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
    filter: grayscale(100%) contrast(1.06);
    /* Das Bild sitzt wie eine Platte auf der Wand, mit derselben Kante. */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .5),
        0 2px 0 rgba(0, 0, 0, .3),
        0 18px 32px rgba(0, 0, 0, .3);
}
.person__text p { max-width: 62ch; color: #3f4339; }
.person__ausschluss {
    margin-top: 1.6rem; padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, .18);
    font-size: .93rem; color: var(--gedaempft) !important;
}

/* ------------------------------------------------------------------ Kontakt
   Die Umkehrung: die Fläche ist das Warnschild, der Knopf die schwarze
   Not-Halt-Platte darauf. */
.kontakt {
    background: var(--signal);
    color: var(--tief);
    padding-block: clamp(4rem, 8vw, 7rem);
}
.kontakt h2 { color: var(--tief); max-width: 24ch; text-shadow: 0 1px 0 rgba(255, 255, 255, .35); }
.kontakt > .spalte > p { max-width: 58ch; font-size: 1.08rem; color: #3d3308; }
.kontakt .knopf--signal {
    margin-top: 2rem;
    background-color: #1c2019;
    background-image: linear-gradient(#2f342c, #14170f);
    color: var(--signal);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .18),
        inset 0 -2px 0 rgba(0, 0, 0, .5),
        0 3px 0 rgba(0, 0, 0, .35);
}
.kontakt .knopf--signal:hover { background: linear-gradient(#3a4036, #1d211a); }
.kontakt .knopf--signal:active, .kontakt .knopf--signal:focus-visible {
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, .6);
}
.kontakt .knopf--signal:focus-visible { outline-color: var(--tief); }
.kontakt__zusatz {
    margin-top: 1.6rem; font-size: .9rem; color: #4a3d09 !important; max-width: 58ch;
}

/* ------------------------------------------------------------------ Fußzeile */
.fuss {
    background: var(--wand-tief); color: var(--auf-wand-ged);
    padding: 2.2rem var(--rand); font-size: .86rem;
}
.fuss__raster { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.fuss__marke { margin: 0; color: var(--auf-wand); --marke-hoehe: .88rem; }
.fuss p { margin: 0; }
.fuss nav { margin-left: auto; display: flex; gap: 1.5rem; }
.fuss a { text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: .2rem; }
.fuss a:hover { color: var(--signal); }

/* --------------------------------------------------------------- Rechtstexte */
.recht { background: var(--platte); color: var(--tief); padding-block: clamp(3rem, 6vw, 5rem); }
.recht__inhalt { max-width: 74ch; margin-inline: auto; }
.recht h1 {
    margin: 0 0 2.5rem; font-size: clamp(2.2rem, 6vw, 3.6rem); font-weight: 800;
    letter-spacing: -.035em; line-height: 1.02; text-shadow: 0 1px 0 var(--grat);
}
.recht h2 {
    margin: 2.6rem 0 .7rem; padding-top: 1.1rem;
    border-top: 1px solid rgba(0, 0, 0, .2); box-shadow: inset 0 1px 0 var(--grat);
    font-size: clamp(1.15rem, 2.4vw, 1.45rem); max-width: none;
    color: var(--tief); text-shadow: none;
}
.recht p, .recht li, .recht address { color: #34372f; }
.recht address { font-style: normal; }
.recht ul { padding-left: 1.25rem; }
.recht li + li { margin-top: .4rem; }
.recht a { text-decoration-color: var(--signal-tief); text-decoration-thickness: 2px; text-underline-offset: .2rem; }
.recht .zurueck { display: inline-block; margin-top: 2.5rem; font-weight: 700; }

/* ❗ Der Stand einer Rechtsseite gehört sichtbar dazu, aber nicht in den
   Lesefluss: Ohne Datum weiß niemand, ob die Erklärung von heute oder von
   vorletztem Jahr ist — und mit derselben Schriftgröße wie der Inhalt sähe
   sie aus wie ein weiterer Absatz. */
.recht__stand {
    margin-top: 2.5rem; padding-top: 1rem;
    border-top: 1px solid rgba(52, 55, 47, .25);
    font-size: .82rem; color: #5a5f52 !important;
}

/* ============================================================ Schmale Geräte */
@media (max-width: 900px) {
    /* Der Aufmacher ist seit dem 11.08.2026 einspaltig — hier gibt es nichts
       mehr umzubrechen. Die Kopfzeile des Schilds stellt sich untereinander. */
    .schild__kopf { flex-direction: column; text-align: center; padding-left: 0; gap: .8rem; }
    .datenfeld { margin-top: 2.4rem; }
    .schilder { grid-template-columns: 1fr; }
    .faelle { columns: 1; }
    .phasen { grid-template-columns: 1fr; }
    .phase { padding-inline: 0; margin-top: 2rem; }
    .phase:first-child { margin-top: 0; }
    .phase + .phase { border-left: 0; }
    .bildbeleg__raster, .person__raster { grid-template-columns: 1fr; }
    .telefon, .tour__schritte, .tour figcaption { margin-inline: auto; }
    .person__bild { max-width: 300px; }
}

@media (max-width: 780px) {
    /* „Aaron Deusing · Industriemeister" bricht hier auf zwei Zeilen und
       sprengt die 68 px hohe Kopfzeile. Der Zusatz steht gleich darunter im
       Datenfeld. */
    .marke__zusatz { display: none; }
    /* `flex`, nicht `block` — der Winkel aus `.menue::after` steht sonst
       unter der Beschriftung statt daneben. */
    .menue { display: inline-flex; }
    .nav {
        display: none;
        position: absolute; left: 0; right: 0; top: var(--kopf);
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--wand-tief);
        padding: .5rem var(--rand) 1.2rem;
        box-shadow: 0 18px 30px rgba(0, 0, 0, .45);
    }
    .nav.offen { display: flex; }
    .nav a { padding: .9rem 0; border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: .95rem; }
    .nav__kontakt { margin-top: .9rem; text-align: center; border-bottom: 0; }
}

@media (max-width: 520px) {
    body { font-size: 16px; }
    .start__handlung { flex-direction: column; align-items: stretch; }
    .knopf { width: 100%; }
    .datenfeld > div { grid-template-columns: 1fr; gap: .1rem; }
    /* Zwei statt vier Spalten: „Messwerte sichtbar machen" braucht auf einem
       Viertel von 360 px sechs Zeilen. */
    .leistungen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 0; }
    .leistungen li:nth-child(odd) { padding-left: 0; border-left: 0; }
    .schritte li { grid-template-columns: 2.2rem minmax(0, 1fr); }
    .schild--gross::before, .schild--gross::after,
    .kontakt__schild::before, .kontakt__schild::after { display: none; }
}

/* Bewegung nur, wo sie einen Zustand zeigt. Wer weniger davon will, bekommt
   den Zustand als Farbe und Kante, ohne die Verschiebung. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .knopf { transition: none; }
    .knopf:active, .knopf:focus-visible { transform: none; }
}

/* ------------------------------------------------------------------ *
 * Das R der Wortmarke als Roboterarm in Bernstein.
 *
 * ❗ Aaron am 14.08.2026, zuerst „mach das R von Retimo mal gelb wie bei den
 * Knöpfen", dann über einen Tag hinweg zum Roboter weiterentwickelt.
 *
 * ❗ **Die Ebene liegt nicht mehr hier.** Sie steht seit dem 14.08.2026 in
 * `marke.css`, weil sie erzeugt wird — aus `bilder/retimo-zeichen.svg`, mit
 * derselben viewBox wie das Wort. Was hier bleibt, ist allein die Farbe auf
 * dem Schild.
 * ------------------------------------------------------------------ */

/* ❗ Auf dem Schild das dunklere Bernstein. Das helle Gelb kommt gegen die
   Metallfarbe auf 1,78:1 — für einen Markenstrich noch vertretbar, aber der
   Ton daneben ist derselbe wie an der Kante des Anfrageknopfs, und beide
   zusammen ergeben ein Bild statt zweier Zufälle. */
.schild__kopf .marke__wort { --marke-signal: var(--signal-tief); }