/* Stile der Startseite, aus der Variante v4 übernommen (Entscheid des Betreibers 17.09.2026).
   Jede Regel ist auf .start-v4 begrenzt. Nicht übernommen: Kopf, Sprunglink, Marke, eigener Zeiger und die
   Blattecken (.blatt) – wohl aber die Überschriftenblöcke (.blattkopf). Klassen, die es auch in
   css/style.css gibt, tragen hier ein s- davor. */
/* ==========================================================================
   REGISTERWERK · Variante v3 «Werkstatt» · Entwurf 15.09.2026
   Ein Zeichenblatt: Papier, Blaupausen-Raster, Masslinien, Stückliste,
   Schriftfeld. Zwei Schriften, ein Zinnober. Nichts von fremden Servern.
   ========================================================================== */
:root{--linie-fein:rgba(222,222,218,.55);--linie-grob:#DEDEDA;--stempel:cubic-bezier(.2,1.6,.4,1);--dock-hoehe:84px;--pos:4%;}
.start-v4{-webkit-text-size-adjust:100%;scroll-padding-top:24px;scroll-padding-bottom:calc(var(--dock-hoehe) + 32px)}
.start-v4 .bewegt{scroll-behavior:smooth}
.start-v4{
  background-color:var(--papier);
  background-image:
    linear-gradient(to right,var(--linie-fein) 1px,transparent 1px),
    linear-gradient(to bottom,var(--linie-fein) 1px,transparent 1px),
    linear-gradient(to right,var(--linie-grob) 1px,transparent 1px),
    linear-gradient(to bottom,var(--linie-grob) 1px,transparent 1px);
  background-size:16px 16px,16px 16px,128px 128px,128px 128px;
  background-position:0 0,0 0,-1px -1px,-1px -1px;
  color:var(--tinte);font-family:var(--sans);font-size:clamp(17px,.4vw + 15.5px,18px);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  min-height:100vh;padding-bottom:calc(var(--dock-hoehe) + 24px);
}
.start-v4 main{display:block;overflow-x:clip}
.start-v4 svg{display:block;max-width:100%}
.start-v4 .defs{position:absolute;width:0;height:0;overflow:hidden}
.start-v4 a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.16em}
.start-v4 p a{text-decoration:underline;text-decoration-color:var(--grau);transition:text-decoration-color .2s,color .2s}
.start-v4 p a:hover{color:var(--zinnober-text);text-decoration-color:var(--zinnober-text)}
.start-v4 ::selection{background:var(--zinnober);color:var(--papier)}
.start-v4 :focus-visible{outline:3px solid var(--zinnober);outline-offset:4px}
.start-v4 b, .start-v4 strong{font-weight:650}
.start-v4 .s-rand{padding-left:var(--rand);padding-right:var(--rand)}
.start-v4 .s-visuell-versteckt{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}/* ---------- Blattrand: Schnittmarken in den Ecken ---------- */
@media (max-width:759px){}/* ---------- Typografie ---------- */
.start-v4 .titel, .start-v4 .s-h2, .start-v4 h3{overflow-wrap:anywhere}
.start-v4 .s-h2{font-size:clamp(30px,3.6vw,52px);line-height:1.04;letter-spacing:-.022em;font-weight:720;max-width:22ch;text-wrap:balance}
.start-v4 h3{font-size:clamp(20px,1.5vw,23px);line-height:1.25;font-weight:650;text-wrap:balance}
.start-v4 .s-lead{font-size:clamp(18px,1.25vw,21px);line-height:1.62;max-width:60ch;color:var(--tinte-2)}
.start-v4 .s-mono{font-family:var(--mono);font-variant-numeric:tabular-nums}/* ---------- Kopf ---------- *//* Das Fenstermass wandert in die Kopfleiste: dort liegt es nie hinter dem Dock. */
.start-v4 .js .kopf__mass{display:inline-block}
@media (max-width:699px){
.start-v4 .js .kopf__mass{display:none}}
@media (max-width:519px){}/* ---------- Knöpfe ---------- */
.start-v4 .knoepfe{display:flex;flex-wrap:wrap;gap:14px 16px;margin-top:32px}
.start-v4 .s-knopf{
  position:relative;display:inline-flex;align-items:center;gap:12px;background:var(--tinte);color:var(--papier);text-decoration:none;
  padding:16px 26px;font:600 16px/1.2 var(--sans);border:1px solid var(--tinte);min-height:52px;cursor:pointer;
  transform:translate(var(--mx,0),var(--my,0));transition:transform .35s var(--kurve),background .2s,color .2s,border-color .2s;
}
.start-v4 .s-knopf::after{content:"";width:8px;height:8px;background:var(--zinnober);transition:transform .3s var(--kurve)}
.start-v4 .s-knopf:hover{background:var(--zinnober-text);border-color:var(--zinnober-text);color:#fff}
.start-v4 .s-knopf:hover::after{background:var(--papier);transform:rotate(90deg)}
.start-v4 .s-knopf--rahmen{background:transparent;color:var(--tinte)}
.start-v4 .s-knopf--rahmen:hover{background:var(--tinte);border-color:var(--tinte);color:var(--papier)}
.start-v4 .s-knopf--rahmen::after{background:var(--tinte)}
.start-v4 .s-knopf--rahmen:hover::after{background:var(--zinnober)}/* ---------- Vermerk (Zeile über der Überschrift) ---------- */
.start-v4 .vermerk{display:flex;align-items:center;gap:12px;font:13px/1.4 var(--mono);color:var(--grau);letter-spacing:.02em}
.start-v4 .vermerk__modul{width:10px;height:10px;background:var(--zinnober);flex:none}
@media (max-width:599px){
.start-v4 .vermerk__mehr{display:none}}/* ==========================================================================
   Blatt 1 · Hero
   ========================================================================== */
.start-v4 .s-hero{position:relative;overflow:hidden;padding-top:clamp(16px,3vh,40px);display:flex;flex-direction:column;justify-content:space-between;
  min-height:calc(100vh - 72px - var(--dock-hoehe) - 12px);min-height:calc(100svh - 72px - var(--dock-hoehe) - 12px)}
.start-v4 .s-hero__raster{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"vermerk vermerk" "titel titel" "text plan";column-gap:clamp(24px,4vw,72px);row-gap:0;align-items:start}
.start-v4 .vermerk{grid-area:vermerk;margin-bottom:clamp(20px,3vh,36px)}/* Auf schmalen Handys muss «Ihr Betrieb hat sich» und «weiterentwickelt.» je in EINE Zeile passen,
   sonst rutscht der Schlusspunkt allein in die nächste Zeile oder das Wort bricht mitten entzwei
   (Befund des Betreibers auf einem iPhone 16e, 16.09.2026). Deshalb der kleinere Minimalwert. */
.start-v4 .titel{grid-area:titel;font-size:clamp(28px,8.4vw,104px);line-height:.96;letter-spacing:-.03em;font-weight:760;margin-bottom:clamp(28px,4vh,44px)}
.start-v4 .titel__satz{display:block}
.start-v4 .titel__satz--rot{color:var(--zinnober)}.start-v4 .titel__frage{color:var(--tinte)}/* 25.09.2026, Betreiber: «Ihre Website auch» rot, «?» schwarz (vorher umgekehrt) */
.start-v4 .titel__cursor{display:inline-block;width:0;height:.86em;border-left:.075em solid var(--zinnober);margin-right:-.075em;vertical-align:-.06em;animation:cursor-blink .9s linear infinite}
.start-v4 .titel .z{visibility:visible}
.start-v4 .js.bewegt .titel__anim:not(.tippt){visibility:hidden}
.start-v4 .js.bewegt .titel .z--aus{visibility:hidden}
.start-v4 .js.bewegt .titel .titel__frage:not(.da){visibility:hidden}
.start-v4 .bewegt .titel__frage.blinkt{animation:frage-blink 1.1s linear 6}/* Zwei Stufen, an und aus: harte Kanten in den Keyframes, nicht steps() über einen Übergang. */
@keyframes cursor-blink{0%,49.99%{opacity:1}50%,100%{opacity:0}}
@keyframes frage-blink{0%,49.99%{opacity:1}50%,100%{opacity:.15}}
.start-v4 .hero__text{grid-area:text;max-width:60ch}
.start-v4 .claim{font-size:clamp(24px,2.6vw,36px);line-height:1.15;font-weight:720;letter-spacing:-.015em;margin-bottom:14px}
.start-v4 .plan{grid-area:plan;justify-self:end;align-self:start;width:100%;max-width:500px;margin-top:-20px;transform:translate(var(--px,0),var(--py,0));transition:transform .7s var(--kurve)}
.start-v4 .plan__zeichnung{width:100%;height:auto}
.start-v4 .plan__text text{font:11px var(--mono);letter-spacing:.02em}
.start-v4 .plan__text .plan__text--rot{fill:var(--zinnober-text);font-size:10px}
.start-v4 .plan__text .plan__text--klein{font-size:10px}
.start-v4 .modul{transform-box:fill-box;transform-origin:center}
.start-v4 .js.bewegt .plan:not(.gebaut) .modul{opacity:0;transform:scale(.2)}
.start-v4 .js.bewegt .plan:not(.gebaut) .plan__masse, .start-v4 .js.bewegt .plan:not(.gebaut) .plan__text{opacity:0}
.start-v4 .js.bewegt .plan.gebaut .modul{animation:modul-setzen .5s var(--kurve) both;animation-delay:calc(var(--i) * 70ms + .6s)}
.start-v4 .js.bewegt .plan.gebaut .plan__masse, .start-v4 .js.bewegt .plan.gebaut .plan__text{animation:einblenden .8s ease both;animation-delay:2s}
@keyframes modul-setzen{from{opacity:0;transform:scale(.2)}60%{opacity:1;transform:scale(1.18)}to{opacity:1;transform:scale(1)}}
@keyframes einblenden{from{opacity:0}to{opacity:1}}
@media (max-width:899px){
.start-v4 .s-hero{min-height:0}
.start-v4 .s-hero__raster{grid-template-columns:minmax(0,1fr);grid-template-areas:"vermerk" "titel" "text" "plan"}
.start-v4 .plan{justify-self:start;max-width:340px;margin-top:44px}}/* ---------- Massband: läuft wie ein Rollmeter, mit Teilstrichen am unteren Rand ---------- *//* Band: dunkles Laufband mit grosser Schrift, Zinnober-Modul zwischen den Posten. Anhaltbar (Bewegung auf Wunsch stoppen). */
.start-v4 .band{background:var(--tinte);color:var(--papier);display:flex;align-items:stretch;border-top:1px solid var(--tinte);margin-top:clamp(28px,4vh,52px)}
.start-v4 .band__fenster{flex:1 1 auto;min-width:0;overflow:hidden;padding-block:clamp(14px,1.8vw,22px)}
.start-v4 .band__lauf{display:flex;width:max-content;animation:band-lauf 118s linear infinite}
.start-v4 .band__liste{display:flex;list-style:none;flex:0 0 auto;margin:0;padding:0}
.start-v4 .band__liste li{display:flex;align-items:center;font-size:clamp(20px,2.3vw,34px);font-weight:700;letter-spacing:-.015em;line-height:1.1;white-space:nowrap;padding-left:clamp(18px,2vw,28px)}/* Der Span ist das Flex-Element; darin fliesst der Text normal, sonst verschluckt Flex das Leerzeichen vor «statt». */
.start-v4 .band__liste li>span{display:inline;white-space:nowrap}
.start-v4 .band__liste li b{font-weight:700;color:var(--zinnober)}
.start-v4 .band__liste li::after{content:"";width:.4em;height:.4em;background:var(--zinnober);margin-left:clamp(18px,2vw,28px);flex:none}/* Das Band läuft durchgehend – kein Anhalten bei Hover, kein Knopf (Betreiber 16.09.2026). Nur die Systemeinstellung «weniger Bewegung» stoppt es. */
@keyframes band-lauf{from{transform:translateX(0)}to{transform:translateX(-50%)}}/* ==========================================================================
   Abschnitte und Blattköpfe – mit Scroll-Erzählung (.im-bild setzt das Skript)
   ========================================================================== */

/* Abstand zwischen den Abschnitten: mittleres Mass – 184 px waren dem Betreiber zu viel (17.09.2026). */
.s-abschnitt{position:relative;padding-top:clamp(60px,8.5vh,116px);padding-bottom:clamp(60px,8.5vh,116px)}
.start-v4 .abschnitt--linie::before{content:"";position:absolute;left:var(--rand);right:var(--rand);top:0;height:1px;background:var(--tinte);transform-origin:left center;transition:transform 1.1s var(--kurve)}
.start-v4 .js.bewegt .abschnitt--linie:not(.im-bild)::before{transform:scaleX(0)}
.start-v4 .blattkopf{margin-bottom:clamp(38px,5.5vh,66px);display:grid;gap:20px}
.start-v4 .blattkopf__nr{font:13px/1.4 var(--mono);color:var(--grau);letter-spacing:.04em;display:flex;align-items:center;gap:12px}
.start-v4 .blattkopf__nr::before{content:"";width:10px;height:10px;border:1px solid var(--tinte);transition:background .3s .6s}
.start-v4 .im-bild .blattkopf__nr::before{background:var(--zinnober);border-color:var(--zinnober)}
.start-v4 .blattkopf .s-lead{margin-top:10px}
.start-v4 .blattkopf > *{transition:opacity .7s var(--kurve),transform .7s var(--kurve)}
.start-v4 .blattkopf > :nth-child(2){transition-delay:.08s}
.start-v4 .blattkopf > :nth-child(3){transition-delay:.16s}
.start-v4 .js.bewegt .s-abschnitt:not(.im-bild) .blattkopf > *{opacity:0;transform:translateY(18px)}/* Karten, Stationen, Pakete, Stückliste: erscheinen gestaffelt */
.start-v4 .befund, .start-v4 .paket, .start-v4 .js.bewegt .s-abschnitt:not(.im-bild) .befund, .start-v4 .js.bewegt .s-abschnitt:not(.im-bild) .paket, .start-v4 .js.bewegt .s-abschnitt:not(.im-bild) 
.befund:nth-child(2), .start-v4 .paket:nth-child(2), .start-v4 .befund:nth-child(3), .start-v4 .paket:nth-child(3), .start-v4 .ablaufliste-feld{--verzug:160ms}
.start-v4 .ablaufpunkt:nth-child(2){--verzug:60ms}
.start-v4 .ablaufpunkt:nth-child(3){--verzug:120ms}
.start-v4 .ablaufpunkt:nth-child(4){--verzug:180ms}
.start-v4 .ablaufpunkt:nth-child(5){--verzug:240ms}/* ==========================================================================
   Blatt 2 · Vorher / Nachher
   ========================================================================== */
.start-v4 .vergleich-raster{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,4vw,64px);align-items:start;max-width:1180px}
@media (max-width:1023px){
.start-v4 .vergleich-raster{grid-template-columns:minmax(0,1fr)}}
.start-v4 .s-vergleich{position:relative;transition:opacity .7s var(--kurve) var(--verzug),transform .7s var(--kurve) var(--verzug)}
.start-v4 .vergleich__legende{display:flex;justify-content:space-between;gap:12px;font:13.5px/1.4 var(--mono);color:var(--grau);margin-bottom:10px;white-space:nowrap}
@media (max-width:439px){
.start-v4 .vergleich__legende{font-size:12px}}
.start-v4 .vergleich__wert b{color:var(--tinte);font-weight:400;letter-spacing:.06em;text-transform:uppercase;font-size:12px;margin-right:8px}
.start-v4 .vergleich__wert--neu b{color:var(--zinnober-text)}
.start-v4 .vergleich__buehne{
  position:relative;aspect-ratio:800/520;width:100%;overflow:hidden;border:1px solid var(--tinte);background:var(--papier-2);
  user-select:none;-webkit-user-select:none;touch-action:pan-y;
}
.start-v4 .vergleich__nachher, .start-v4 .vergleich__vorher{position:absolute;inset:0}/* Der Lauf geht von links nach rechts: links der Kante die neue Seite, rechts die alte.
   Ziehen nach rechts verwandelt alt in neu (Betreiber 16.09.2026). */
.start-v4 .vergleich__vorher{clip-path:inset(0 0 0 var(--pos))}/* Die Lupe: dieselbe neue Seite noch einmal, beschnitten auf ein Quadrat unter dem Zeiger. Das Skript setzt --ct/--cr/--cb/--cl. */
.start-v4 .seite{width:100%;height:100%}/* Die alte Seite trägt ihre eigenen, billigen Farben – kein Graustufenfilter (Betreiber 15.09.2026: «sollte wie eine schlechte Startseite wirken», «echt» wirken). *//* Der Range-Regler liegt unsichtbar als 56-px-Streifen auf der roten Linie: für Tastatur und Hilfstechnik.
   Zeiger und Finger erreichen ihn nicht (pointer-events:none) – das Skript entscheidet auf der Bühne nach dem Abstand
   zur Linie, ob der Griff (bis 28 px daneben) oder der Ausschnitt gemeint ist. Ein Tipp auf die Bühne verschiebt den Griff nicht. */
.start-v4 .vergleich__regler{
  position:absolute;top:0;bottom:0;left:calc(var(--pos) - 28px);width:56px;height:100%;margin:0;opacity:0;z-index:3;pointer-events:none;
  -webkit-appearance:none;appearance:none;background:transparent;
}/* Über dem Vorher/Nachher-Bild kein eigenes Zeigersymbol, sondern der gewohnte Mauszeiger des Systems
   (Betreiber 16.09.2026: «der mousecursor im vorher nachher bild muss nicht sein»). */
html.js .vergleich__buehne{cursor:default}
html.js .vergleich__buehne.griff-nah{cursor:ew-resize}
.start-v4 .vergleich__regler::-webkit-slider-thumb{-webkit-appearance:none;width:2px;height:100%}
.start-v4 .vergleich__regler::-moz-range-thumb{width:2px;height:100%;border:0;background:transparent}
.start-v4 .vergleich__griff{position:absolute;top:0;bottom:0;left:var(--pos);width:0;z-index:2;pointer-events:none}
.start-v4 .vergleich__griff::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:var(--zinnober)}
.start-v4 .vergleich__knauf{
  position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:48px;height:48px;background:var(--zinnober);color:var(--papier);
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 4px var(--papier);transition:transform .25s var(--kurve);
}
.start-v4 .vergleich__buehne.griff-nah .vergleich__knauf{transform:translate(-50%,-50%) scale(1.12)}
.start-v4 .vergleich__regler:focus-visible + .vergleich__griff .vergleich__knauf{outline:3px solid var(--tinte);outline-offset:4px}/* Rahmen des Ausschnitts: Zinnober, mit Teilstrichen wie ein Detail im Plan *//* Nur der Rahmen zeigt den Ausschnitt – ohne Fadenkreuz. Der Betreiber wollte den Mauszeiger
   im Vorher/Nachher-Bild nicht (16.09.2026). */
.start-v4 .vergleich__leiste{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:baseline;justify-content:space-between;margin-top:12px}
.start-v4 .vergleich__hinweis{font-size:14px;line-height:1.5;color:var(--grau);max-width:60ch}
/* Ladezeit-Rennen: zwei Balken im selben Massstab, die Zahlen zählen in Echtzeit *//* Zeichnung der alten Seite *//* Keine Füllung in der Klasse: CSS schlägt SVG-Präsentationsattribute, sonst wären alle fill="…" der
   gezeichneten Seite wirkungslos (Befund 16.09.2026: der Besucherzähler stand dunkel auf dunkel).
   Die Grundfarbe erbt jedes Element vom <svg> selbst. */












/* Zeichnung der neuen Seite *//* Farben der gezeichneten Kundenseite (Musterkanzlei). Eigene Palette, nicht die Marke Registerwerk –
   an einer Stelle änderbar (Betreiber 16.09.2026: «die Farben der neuen Seite gefallen mir nicht»). */
:root{
  /* Freundliches Hellblau, Kopf hell mit dunkler Schrift. Kontraste gerechnet (16.09.2026):
     Kopfschrift 9,9:1 · leise Kopfzeile 4,6:1 · weiss auf Akzent 5,6:1 · Überschrift 11,9:1 · Fliesstext 7,9:1. */
  --k-kopf:#DCEBF5; --k-kopf-text:#17394F; --k-kopf-leise:#42657A;
  --k-marke:#17394F; --k-akzent:#1C6E96;
  --k-grund:#FCFDFE; --k-grund-2:#EDF4F9; --k-text:#2E3F49; --k-linie:#9FC6DC;
}
.start-v4 .neu-t{fill:#141414}



.start-v4 .neu-t--lead{fill:#3C3C38}

.start-v4 .neu-t--klein{fill:#3C3C38}



/* Stückliste */
.start-v4 .ablaufliste-feld{border:1px solid var(--tinte);background:var(--papier);transition:opacity .7s var(--kurve) var(--verzug),transform .7s var(--kurve) var(--verzug)}
.start-v4 .ablaufliste__kopf{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 16px;border-bottom:1px solid var(--tinte);font:12.5px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--tinte)}
.ablaufliste__fuss{margin:0;padding:18px max(20px,calc(100% - 56ch - 20px)) 20px 20px;border-top:1px solid var(--raster);font-size:15.5px;color:var(--tinte-2)}
.ablaufliste__fuss b{color:var(--tinte)}
.start-v4 .ablaufliste__zaehler{color:var(--zinnober-text);letter-spacing:.1em;white-space:nowrap}
.start-v4 .ablaufliste{list-style:none;counter-reset:none}
.start-v4 .ablaufpunkt{display:grid;grid-template-columns:32px 22px minmax(0,1fr);gap:0 14px;align-items:start;padding:17px 20px;border-bottom:1px solid var(--raster);transition:background .25s,opacity .6s var(--kurve) var(--verzug),transform .6s var(--kurve) var(--verzug)}
.start-v4 .ablaufpunkt:last-child{border-bottom:0}
.start-v4 .ablaufpunkt__pos{font:13px/1.6 var(--mono);color:var(--grau);letter-spacing:.04em;padding-top:2px}
.start-v4 .ablaufpunkt__haken{width:16px;height:16px;border:1px solid var(--tinte);margin-top:6px;position:relative;background:var(--papier);transition:background .25s,border-color .25s}
.start-v4 .ablaufpunkt__haken::after{content:"";position:absolute;left:4px;top:1px;width:5px;height:9px;border:solid var(--papier);border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .25s var(--kurve)}
.start-v4 .ablaufpunkt.erledigt .ablaufpunkt__haken{background:var(--zinnober);border-color:var(--zinnober)}
.start-v4 .ablaufpunkt.erledigt .ablaufpunkt__haken::after{transform:rotate(45deg) scale(1)}
.start-v4 .ablaufpunkt__text{font-size:15.5px;line-height:1.45;color:var(--grau);transition:color .25s}
.start-v4 .ablaufpunkt__text b{display:block;color:var(--tinte);font-weight:650;font-size:16px}
.start-v4 .ablaufpunkt__dauer{display:block;font:12px/1.5 var(--mono);color:var(--grau);letter-spacing:.03em;margin-bottom:3px}
.start-v4 .ablaufpunkt__ergebnis{display:block;margin-top:7px;padding-top:7px;border-top:1px solid var(--raster);font:12px/1.4 var(--mono);color:var(--tinte-2)}
.start-v4 .ablaufpunkt__ergebnis span{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--grau);margin-right:6px}
.start-v4 .ablaufpunkt.erledigt .ablaufpunkt__ergebnis span{color:var(--zinnober-text)}
.start-v4 .ablaufpunkt.erledigt{background:var(--papier-2)}
.start-v4 .ablaufpunkt.erledigt .ablaufpunkt__text{color:var(--tinte-2)}
.start-v4 .ablaufpunkt.frisch .ablaufpunkt__haken{animation:haken-puls .5s var(--kurve)}
@keyframes haken-puls{40%{transform:scale(1.35)}}/* ==========================================================================
   Blatt 3 · Befund
   ========================================================================== */
.start-v4 .befunde{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--tinte)}
.start-v4 .befund{padding:clamp(32px,3.6vw,52px);border-right:1px solid var(--tinte);position:relative;background:var(--papier);transition:opacity .7s var(--kurve) var(--verzug),transform .7s var(--kurve) var(--verzug),background .3s}
.start-v4 .befund:last-child{border-right:0}
.start-v4 .befund::before{content:"";display:block;width:14px;height:14px;background:var(--tinte);margin-bottom:24px;transition:transform .4s var(--kurve)}
.start-v4 .befund:nth-child(2)::before{background:var(--zinnober)}
.start-v4 .befund:nth-child(3)::before{background:transparent;border:1px solid var(--tinte)}
.start-v4 .befund:hover{background:var(--papier-2)}
.start-v4 .befund:hover::before{transform:rotate(90deg)}
.start-v4 .befund h3{margin-bottom:14px;max-width:18ch}
.start-v4 .befund p{color:var(--tinte-2);font-size:16.5px;line-height:1.55}
@media (max-width:899px){
.start-v4 .befunde{grid-template-columns:minmax(0,1fr)}
.start-v4 .befund{border-right:0;border-bottom:1px solid var(--tinte)}
.start-v4 .befund:last-child{border-bottom:0}}/* ==========================================================================
   Blatt 4 · Werkbank
   ========================================================================== *//* Ab zwei Spalten teilen alle Stationen einer Reihe zwei Zeilenhöhen: Kopf und Rumpf. Damit liegt auch die
   Trennlinie unter dem Kopf auf einer Linie, obwohl «Umsetzung und Abnahme» zweizeilig ist und
   «Festpreis · 2 Arbeitstage» umbricht (Betreiber 16.09.2026: «die oberen Trennlinien auch in eine Linie»). *//* Der Strich über «Ergebnis» liegt bei allen fünf Stationen auf einer Linie: Die Karten sind gleich hoch
   (align-items:stretch), der Ergebnis-Block klebt unten (margin-top:auto) und ist überall einzeilig –
   deshalb beginnt er überall auf derselben Höhe, auch wenn Titel oder Beschreibung unterschiedlich lang sind.
   Betreiber 15.09.2026: «Die Abgrenzungsstriche bei 5 Stationen sollten auf eine Linie». *//* Drei feste Zeilen: Skizze, Text (dehnt sich), Ergebnis. So beginnt der Ergebnis-Block in allen fünf Stationen auf derselben Höhe. *//* Die Tusche: --tusch verzögert je Station (nur dort gesetzt, wo ohne Hover beim Erscheinen getuscht wird), --pfad je Linie *//* Der Satz steht in Ruhe lesbar da (Tinte-2); Hover, Fokus oder Tipp tuscht die Zeichnung und färbt auf Tinte *//* Der Strich über «Ergebnis» liegt bei allen fünf Stationen auf einer Linie: Platz für zwei Zeilen, unten ausgerichtet (Betreiber 15.09.2026). *//* Ohne Bewegung oder ohne JS: alles sichtbar */

html:not(.bewegt) 
html:not(.bewegt) 
html:not(.bewegt) 
html:not(.js) 
@media (hover:none) and (min-width:760px){
  
  .s-abschnitt.im-bild 
  .s-abschnitt.im-bild 
}
@media (max-width:759px){
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  html:not(.js) 
  html:not(.js) 
}/* ==========================================================================
   Blatt 5 · Preise
   ========================================================================== */
.start-v4 .s-preise{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--tinte);background:var(--papier)}
.start-v4 .paket{padding:clamp(30px,3.4vw,48px);border-right:1px solid var(--tinte);display:grid;gap:14px;align-content:start;transition:opacity .7s var(--kurve) var(--verzug),transform .7s var(--kurve) var(--verzug),background .3s}
.start-v4 .paket:nth-child(3){border-right:0}
.start-v4 .paket--mitte{background:var(--papier-2)}
.start-v4 .paket:hover{background:var(--papier-2)}
.start-v4 .paket--mitte:hover{background:#ECECE6}
.start-v4 .paket__name{font:13px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grau);font-weight:400}
.start-v4 .paket__preis{font-size:clamp(34px,3.6vw,54px);line-height:1;font-weight:760;letter-spacing:-.03em;font-variant-numeric:tabular-nums;transition:color .3s}
.start-v4 .paket:hover .paket__preis{color:var(--zinnober-text)}
.start-v4 .paket__waehrung{font:400 14px/1 var(--mono);letter-spacing:.05em;color:var(--grau);vertical-align:.55em;margin-right:6px}/* Arbeitstage als Lineal: 18 Teilstriche, die Füllung reicht so weit, wie das Paket dauert */
.start-v4 .paket__tage{display:grid;gap:6px;font:12.5px/1.4 var(--mono);color:var(--tinte);letter-spacing:.03em;--n:18;--tage:18}
.start-v4 .paket__tage[data-tage="7"]{--tage:7}
.start-v4 .paket__tage[data-tage="12"]{--tage:12}
.start-v4 .paket__tage-skala{position:relative;display:block;height:14px;border-bottom:1px solid var(--tinte);background:repeating-linear-gradient(to right,var(--tinte) 0 1px,transparent 1px calc(100% / var(--n))) 0 100%/100% 6px no-repeat}
.start-v4 .paket__tage-fuell{position:absolute;left:0;bottom:0;height:8px;width:calc(var(--tage) / var(--n) * 100%);background:var(--zinnober);transition:width 1.1s var(--kurve) calc(var(--verzug) + .5s)}
.start-v4 .js.bewegt .s-abschnitt:not(.im-bild) .paket__tage-fuell{width:0}
.start-v4 .paket__liste{list-style:none;display:grid;gap:8px;font-size:16px;color:var(--tinte-2)}
.start-v4 .paket__liste li{padding-left:20px;position:relative}
.start-v4 .paket__liste li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;background:var(--tinte)}
.start-v4 .paket__liste li:nth-child(2)::before{background:var(--zinnober)}
.start-v4 .stempel{
  /* ⚠ Mittig über der Karte «Werk», nicht rechts. Rechts sass der Stempel über «Werk gross» —
     dem einzigen Paket mit «ab EUR 8'900». «Festpreis» und «ab» widersprechen sich, und zwar
     genau dort, wo der Stempel klebte (Betreiber 18.09.2026: «soll der festpreis hier an der
     stelle mit ab 8900 stehen?»). «Werk» hat einen echten Festpreis und ist die hervorgehobene
     Karte; dort liest sich der Stempel als Auszeichnung, nicht als Einwand. */
  position:absolute;left:50%;top:-26px;transform:translateX(-50%) rotate(-7deg);padding:10px 16px 8px;border:3px double var(--zinnober-text);color:var(--zinnober-text);
  font:700 clamp(16px,1.6vw,22px)/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;background:var(--papier);
  display:grid;gap:4px;justify-items:center;mix-blend-mode:multiply;z-index:1;
  transition:opacity .2s ease .9s,transform .45s var(--stempel) .9s;
}/* Versteckt ohne Übergang: sonst blendet der Stempel nach dem Laden erst 1 → 0 (0,9 s Verzug) – die Transition der Grundregel wirkt beim Erscheinen. */
.start-v4 .js.bewegt .s-abschnitt:not(.im-bild) .stempel{opacity:0;transform:translateX(-50%) rotate(-12deg) scale(1.5);transition:none}
.start-v4 .stempel__klein{font:400 10.5px/1 var(--mono);letter-spacing:.14em}
.start-v4 .preise__fuss{margin-top:24px;font-size:15.5px;color:var(--tinte-2);max-width:70ch}
@media (max-width:759px){
.start-v4 .s-preise{grid-template-columns:minmax(0,1fr)}
.start-v4 .paket{border-right:0;border-bottom:1px solid var(--tinte)}
.start-v4 .paket:nth-child(3){border-bottom:0}
.start-v4 .stempel{top:-22px;left:50%}}/* ==========================================================================
   Blatt 6 · Website-Check mit Scan-Linie
   ========================================================================== */
.start-v4 .check__form{max-width:720px;display:grid;gap:14px}
.start-v4 .check__label{font:13px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--tinte)}
.start-v4 .check__feld{position:relative;display:flex;align-items:stretch;border:1px solid var(--tinte);background:var(--papier);overflow:hidden;min-height:64px}/* «www.» und die Eingabe stehen dicht beieinander: In der Monospace-Schrift trägt der Punkt fast eine
   ganze Zeichenbreite Luft, die wie ein Leerzeichen aussieht (Befund des Betreibers 16.09.2026). */
.start-v4 .check__praefix{display:flex;align-items:center;padding:0 0 0 20px;margin-right:-.16ch;font:400 clamp(18px,2vw,24px)/1 var(--mono);color:var(--grau);user-select:none}
.start-v4 .check__eingabe{flex:1;min-width:0;border:0;background:transparent;padding:14px 20px 14px 0;font:400 clamp(18px,2vw,24px)/1.3 var(--mono);color:var(--tinte);outline:none}
.start-v4 .check__eingabe::placeholder{color:var(--grau);opacity:1}
.start-v4 .check__feld:focus-within{border-color:var(--zinnober);box-shadow:inset 0 0 0 1px var(--zinnober)}
.start-v4 .check__scan{position:absolute;left:0;right:0;top:-3px;height:3px;background:var(--zinnober);opacity:0;pointer-events:none;
  box-shadow:0 0 18px 4px rgba(232,56,13,.35)}
.start-v4 .check__scan::before{content:"";position:absolute;left:0;right:0;top:3px;height:28px;background:linear-gradient(to bottom,rgba(232,56,13,.14),transparent)}/* In Ruhe: sobald das Blatt im Bild ist, läuft die Linie alle sieben Sekunden einmal durch; mit Fokus im Feld läuft sie durchgehend */
.start-v4 .bewegt .check.im-bild .check__scan{opacity:1;animation:scan-ruhe 7s linear .5s infinite}
.start-v4 .bewegt .check__feld:focus-within .check__scan{opacity:1;animation:scan 1.5s linear infinite}
@keyframes scan{0%{top:-3px}50%{top:100%}100%{top:-3px}}
@keyframes scan-ruhe{0%{top:-3px;opacity:1}24%{top:100%;opacity:1}24.01%{opacity:0}100%{top:-3px;opacity:0}}
.start-v4 .check__ecke{position:absolute;width:12px;height:12px;border:0 solid var(--zinnober);opacity:0;transition:opacity .25s,transform .35s var(--kurve)}
.start-v4 .check__ecke--lo{left:6px;top:6px;border-left-width:2px;border-top-width:2px;transform:translate(-6px,-6px)}
.start-v4 .check__ecke--ro{right:6px;top:6px;border-right-width:2px;border-top-width:2px;transform:translate(6px,-6px)}
.start-v4 .check__ecke--lu{left:6px;bottom:6px;border-left-width:2px;border-bottom-width:2px;transform:translate(-6px,6px)}
.start-v4 .check__ecke--ru{right:6px;bottom:6px;border-right-width:2px;border-bottom-width:2px;transform:translate(6px,6px)}
.start-v4 .check.im-bild .check__ecke{opacity:.5;transform:none}
.start-v4 .check__feld:focus-within .check__ecke{opacity:1;transform:none}
.start-v4 .check__lesung{display:flex;align-items:center;gap:10px;font:13px/1.4 var(--mono);color:var(--grau);min-height:20px;letter-spacing:.02em}
.start-v4 .check__lesung-marke{width:8px;height:8px;background:var(--raster);flex:none;transition:background .3s}
.start-v4 .check__form:focus-within .check__lesung-marke{background:var(--zinnober)}
.start-v4 .bewegt .check__form:focus-within .check__lesung-marke{animation:cursor-blink .8s linear infinite}
.start-v4 .check__form .knoepfe{margin-top:10px}
.start-v4 .check__hinweis{font-size:14.5px;line-height:1.5;color:var(--grau);max-width:60ch}/* ==========================================================================
   Schriftfeld (Fusszeile)
   ========================================================================== */
.start-v4 .schriftfeld{padding-top:clamp(40px,6vh,80px);padding-bottom:24px}
.start-v4 .schriftfeld__tabelle{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr);border:1px solid var(--tinte);background:var(--papier);font-size:15px;line-height:1.5}
.start-v4 .schriftfeld__zelle{padding:18px 20px;border-right:1px solid var(--tinte);min-width:0;transition:opacity .7s var(--kurve) var(--verzug),transform .7s var(--kurve) var(--verzug)}
.start-v4 .schriftfeld__zelle:nth-child(4){border-right:0}
.start-v4 .schriftfeld__zelle--marke{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start}
.start-v4 .schriftfeld__zelle--marke svg{color:var(--tinte);margin-top:4px}
.start-v4 .schriftfeld__label{font:11.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grau);margin-bottom:4px}
.start-v4 .schriftfeld__zelle a{text-decoration:none;border-bottom:1px solid var(--raster);overflow-wrap:anywhere}
.start-v4 .schriftfeld__zelle a:hover{border-bottom-color:var(--zinnober);color:var(--zinnober-text)}
.start-v4 .schriftfeld__zelle--nav{grid-column:1 / -1;border-top:1px solid var(--tinte);border-right:0;display:flex;flex-wrap:wrap;gap:10px 28px;font-size:14.5px}
@media (max-width:899px){
.start-v4 .schriftfeld__tabelle{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.start-v4 .schriftfeld__zelle:nth-child(2){border-right:0}
.start-v4 .schriftfeld__zelle:nth-child(1), .start-v4 .schriftfeld__zelle:nth-child(2){border-bottom:1px solid var(--tinte)}}
@media (max-width:519px){
.start-v4 .schriftfeld__tabelle{grid-template-columns:minmax(0,1fr)}
.start-v4 .schriftfeld__zelle{border-right:0;border-bottom:1px solid var(--tinte)}
.start-v4 .schriftfeld__zelle--nav{border-top:0;border-bottom:0}}/* ==========================================================================
   Dock
   ========================================================================== */
.start-v4 .dock{
  position:fixed;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:50;
  width:min(calc(100% - 32px),480px);background:var(--tinte);color:var(--papier);border:1px solid rgba(250,250,248,.22);
  box-shadow:0 12px 40px -12px rgba(20,20,20,.45);
}
.start-v4 .dock__fortschritt{position:absolute;left:0;top:0;height:2px;width:var(--fortschritt,0%);background:var(--zinnober);transition:width .15s linear}
.start-v4 .dock__liste{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.start-v4 .dock__punkt{
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px 10px;text-decoration:none;color:var(--papier);
  font:11px/1 var(--mono);letter-spacing:.04em;position:relative;transform:translate(var(--mx,0),var(--my,0));transition:transform .35s var(--kurve),color .2s;
}
.start-v4 .dock__punkt svg{color:var(--papier);transition:transform .3s var(--kurve)}
.start-v4 .dock__punkt::after{content:"";position:absolute;left:50%;bottom:4px;width:6px;height:6px;background:var(--zinnober);transform:translateX(-50%) scale(0);transition:transform .3s var(--kurve)}
.start-v4 .dock__punkt:hover svg{transform:translateY(-3px)}
.start-v4 .dock__punkt[aria-current="true"]::after{transform:translateX(-50%) scale(1)}
.start-v4 .dock__punkt[aria-current="true"]{color:#fff}
.start-v4 .dock__punkt:focus-visible{outline-color:var(--zinnober);outline-offset:-4px}
@media (min-width:600px){
.start-v4 .dock__punkt{font-size:12px;padding:14px 8px 12px}}/* ==========================================================================
   Zeiger (Fadenkreuz, magnetisch) – nur mit feinem Zeiger und JS
   ========================================================================== *//* Auf der Bühne zeigt der Ausschnitt selbst, wo der Zeiger ist – der Ring tritt zurück *//* ==========================================================================
   Reduzierte Bewegung
   ========================================================================== */
@media (prefers-reduced-motion:reduce){/* Das Band läuft nicht, sondern steht als umbrechende Liste; die zweite (nur fürs Laufen gedoppelte) Liste entfällt,
     damit nichts zweimal dasteht. Ohne das liefe die Bewegung trotz «animation-duration:.001s» weiter (gemessen 15.09.2026). */
.start-v4 .band__lauf{animation:none!important;width:100%;flex-wrap:wrap}
.start-v4 .band__liste{flex:1 1 100%;flex-wrap:wrap;row-gap:6px}
.start-v4 .band__liste[aria-hidden="true"]{display:none}
.start-v4 .band__liste li{white-space:normal;font-size:clamp(17px,1.8vw,24px)}/* Das stehende Band ist zweizeilig und läge sonst unter dem festen Dock. */
.start-v4 .band{margin-bottom:var(--dock-hoehe)}}
.start-v4{padding-bottom:calc(var(--dock-hoehe) + 20px)}