/* ============================================================================
   Hausverwaltung Clauser · plot.css — Signature-Motion „Die Seite plottet sich"

   Leitidee: Die Seite ist eine Blaupause. Also verhält sie sich auch so —
   Linien werden gezeichnet statt eingeblendet, Überschriften laufen zeilenweise
   ein wie aus einem Plotter, und am Blattrand liegt eine Maßlinie, die den
   Lesefortschritt mitzeichnet.

   Alles greift NUR unter html.motion (JS aktiv UND kein prefers-reduced-motion).
   Ohne JS oder mit „Bewegung reduzieren" bleibt jede Linie und jedes Wort
   sichtbar — es gibt keinen versteckten Inhalt.
   ========================================================================== */

/* ---- 1 · Überschriften: Wort für Wort ------------------------------------ */
/* Bewusst OHNE overflow:hidden-Maske: die Display-Schrift läuft mit
   line-height .86, dabei ragen Umlautpunkte und Unterlängen aus der Zeilenbox
   heraus und würden von einer Maske abgeschnitten („HANDEN" statt „HÄNDEN").
   Versatz + Deckkraft erzeugen denselben gestaffelten Einlauf ohne dieses Risiko. */
html.motion .sheet [data-words] .w{ display:inline-block; }
html.motion .sheet [data-words] .wi{
  display:inline-block;
  opacity:0; transform:translateY(.42em);
  transition:opacity .55s ease, transform .8s var(--ease);
  transition-delay:calc(var(--wi, 0) * 55ms);
  will-change:opacity, transform;
}
html.motion .sheet [data-words].shown .wi{ opacity:1; transform:none; }

/* ---- 2 · Layout-Linien zeichnen sich ------------------------------------- */
/* Die echte Border wird unter Motion transparent, die ::after-Linie ist die
   gezeichnete Linie. Dadurch kein Layout-Shift (Border-Breite bleibt stehen). */
/* --plot-c wird auf JEDEM data-plot gesetzt, sonst erben die Zeilen die
   Tuschefarbe ihrer Liste und werden statt Haarlinie tiefschwarz. */
html.motion .sheet [data-plot]{ position:relative; border-color:transparent; --plot-c:var(--line-2); }
html.motion .sheet [data-plot]::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--plot-c, var(--line-2));
  transform:scaleX(0); transform-origin:left center;
  /* height bewusst NICHT in der Transition: die Linie wächst beim Hover von 1px
     auf 2px (Zeile ~51) — ein einzelnes Pixel über 250 ms ist nicht wahrnehmbar,
     kostet aber pro Hover einen Layout-Durchlauf. Der sichtbare Teil ist der
     Farbwechsel, und der bleibt weich. */
  transition:transform .9s var(--ease), background-color .25s ease;
  pointer-events:none;
}
html.motion .sheet [data-plot="top"]::after{ top:-1px; bottom:auto; }
html.motion .sheet [data-plot].shown::after{ transform:scaleX(1); }

/* Die beiden Listen-Oberkanten sind Tuschelinien, nicht Hilfslinien */
html.motion .sheet .leist-list[data-plot],
html.motion .sheet .faq-list[data-plot],
html.motion .sheet .woh-list[data-plot]{ --plot-c:var(--ink); }

/* ---- 3 · Leistungen: Zeile unter dem Cursor wird nachgezogen -------------- */
html.motion .sheet .woh[data-plot]:hover::after,
html.motion .sheet .leist-row[data-plot]:hover::after{
  background:var(--accent); height:2px;
}
.leist-row .n{ transition:color .25s var(--ease), transform .35s var(--ease); }
/* Hover darf den Kontrast nicht senken: --accent misst 2,64:1, --accent-deep 4,60:1. */
.leist-row:hover .n{ transform:translateX(2px); }

/* Zahlen im Rechner springen beim Zählen nicht in der Breite */

/* ---- 4 · Hero: Hilfskreuz erscheint vor dem Logo -------------------------- */
html.motion .sheet .hero-logo-grid g{
  opacity:0; transform:scale(.94); transform-box:fill-box; transform-origin:center;
  transition:opacity .9s var(--ease) .12s, transform 1.1s var(--ease) .12s;
}
html.motion .sheet .hero-logo.is-in .hero-logo-grid g{ opacity:1; transform:none; }

/* ---- 5 · Plot-Rail: Maßlinie neben dem Blatt ------------------------------ */
/* Liegt im Canvas-Rand links neben dem Blatt, also nie über dem Inhalt.
   Erst ab genug Rand sichtbar, darunter komplett aus. */
.plot-rail{ display:none; }

@media (min-width: 1360px){
  html.motion .plot-rail{
    display:block; position:fixed; z-index:60; pointer-events:none;
    left:calc(50% - var(--maxw) / 2 - 52px);
    top:calc(var(--nav-h) + 46px); bottom:46px; width:1px;
    opacity:0; transition:opacity .6s var(--ease) .3s;
  }
  html.motion .plot-rail.is-ready{ opacity:1; }
}

.plot-rail-line{
  position:absolute; inset:0;
  background:repeating-linear-gradient(to bottom, var(--line-2) 0 3px, transparent 3px 9px);
}
.plot-rail-fill{
  position:absolute; inset:0; background:var(--accent);
  transform:scaleY(0); transform-origin:top center;
}
.plot-rail-head{
  position:absolute; left:50%; top:0; width:9px; height:9px; margin:-5px 0 0 -5px;
  border-radius:50%; background:var(--accent-deep);
  box-shadow:0 0 0 3px rgba(226,117,31,.16);
}
.plot-rail-ticks{ position:absolute; inset:0; }
.plot-tick{
  position:absolute; left:-36px; width:36px; padding-right:11px;
  transform:translateY(-50%); text-align:right; line-height:1;
}
.plot-tick i{
  position:absolute; right:0; top:50%; width:7px; height:1px; margin-top:-.5px;
  background:var(--line-2); transition:background-color .35s var(--ease);
}
.plot-tick b{
  font-family:var(--font-mono); font-weight:400; font-size:9px; letter-spacing:.1em;
  color:var(--line-2); transition:color .35s var(--ease);
}
.plot-tick.is-past i{ background:var(--accent-deep); }
.plot-tick.is-past b{ color:var(--accent-deep); }

/* ---- 6 · Sicherheitsnetz -------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .plot-rail{ display:none !important; }
  html.motion .sheet [data-words] .wi{ opacity:1 !important; transform:none !important; }
  /* Border bleibt transparent, dafür steht die ::after-Linie sofort — kein Verlust. */
  html.motion .sheet [data-plot]::after{ transform:scaleX(1) !important; transition:none !important; }
}