/* ============================================================
   HANS BAUR GMBH — Leistungsseiten
   leistung-titel.css — Titel „Plan und Baustelle" (eingebaut 29.10.2026)

   Ablauf beim Laden (js/leistung-titel.js):
     0,0 s  auf dem Papier zeichnet sich der Plan der Baustelle,
            das Gewerk steht groß in Blau darin
     0,8 s  aus dem Fluchtpunkt des Fotos geht das echte Foto als
            Kreis auf; sein Rand ist ein Messkreis mit Gradteilung
     1,7 s  das Foto steht, das Gewerk ist weiß geworden
   Danach zeigt eine Lupe unter der Maus den Plan auf dem Foto, und
   die Beschriftung des Teils, über dem sie liegt.

   Das Foto liegt als Band über die Breite, nie breiter als die Datei.
   (Betonblocksteine: Das Original hat nur 979 px, dort liegt eine hochgerechnete
   Datei 1-breit.webp. width/height am Bild bleiben 979 × 423, darin ist der Plan
   gemessen; das Skript rechnet damit.)
   Die Linien sind am Foto gemessen; sie kommen aus js/plaene/<seite>.js.
   Ohne Skript und bei „Bewegung reduzieren" steht das Foto sofort da.

   Je Seite am Titel gesetzt (style="…"):
     --lp-fb        Breite der Fotodatei; breiter wird das Band nie
     --lp-ar        Seitenverhältnis des Fotos
     --lp-fokus     welcher Bildteil bleibt, wenn beschnitten wird
     --lp-wg-breit  Größe des Gewerks als Anteil der Bandbreite
     --lp-wg-schmal dasselbe am Handy
     --lp-wort      Farbe des Gewerks im Foto (auf hellen Fotos dunkel)
     --lp-wort-sch  sein Schatten
     --lp-wb        Abstand der Wortunterkante vom unteren Bildrand
   Gesetzt vom Skript:
     --lp-r     Radius des aufgehenden Kreises
     --lp-vx/vy Fluchtpunkt im Band
   ============================================================ */
@property --lp-r { syntax: '<length>'; inherits: true; initial-value: 4000px; }

.lhero--plan {
  --lp-kante: 54px;                    /* so weit schiebt sich Abschnitt 01 darüber */
  --lp-bw: min(100vw, var(--lp-fb, 1661px));   /* Bandbreite: nie breiter als das Foto */
  /* Textkante der Seite, gemessen im Band (wie „Hans Baur" im Menü) */
  --lp-links: max(var(--gutter), calc((var(--lp-bw) - var(--wrap)) / 2 + var(--gutter)));
  --lp-wg: var(--lp-wg-breit, 0.152);
  --lp-wb: 6%;
  /* Polster um das Plan-Wort, siehe .lplan-wort-plan */
  --lp-wpad: calc(var(--lp-bw) * var(--lp-wg) * 0.3);
  /* bildschirmhoch, Inhalt mittig: endete die Bühne früher, schaute der
     noch verschleierte Abschnitt 01 als leeres Feld herein */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: clamp(18px, 3vh, 34px);
  padding: calc(var(--nav-h) + clamp(14px, 2.6vh, 30px)) 0 calc(var(--lp-kante) + clamp(16px, 3vh, 34px));
}
.lhero--plan > * { flex: none; width: 100%; }

/* ---------- Kopf: Pfad links, Leitsatz rechts ---------- */
.lplan-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 32px;
  flex-wrap: wrap;
  margin-bottom: clamp(14px, 2vh, 22px);
}
.lplan-kopf .lcrumb { margin: 0; }
/* Der Leitsatz in der kursiven Akzentschrift wie „Seit 1931" im Startbild:
   er liest sich als Zitat und hebt sich vom Pfad (Schreibmaschine) und vom
   Gewerk (schmale Überschriftenschrift) ab, ohne mit ihnen zu streiten. */
.lplan-kopf .lhero-claim {
  margin: 0;
  max-width: none;
  font-family: var(--f-accent);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.35rem, 1.9vw, 1.85rem);
  line-height: 1.15;
  color: var(--blue-text);
}
/* Stehen Pfad und Leitsatz nebeneinander, steht der Leitsatz optisch mittig
   zur Pfadzeile – auf ihrer Grundlinie hing die große Schrift 6 px höher.
   Der Strich unter dem Pfad bleibt, wo er war. */
@media (min-width: 701px) {
  /* Lange Leitsätze brechen rechtsbündig um, statt unter den Pfad zu rutschen */
  .lplan-kopf { align-items: center; flex-wrap: nowrap; }
  .lplan-kopf .lcrumb { flex: none; }
  /* Die Breitengrenze hält auch Abstand zum Pfad: Ein Satz, der gerade noch in
     eine Zeile passt, liefe sonst bis an ihn heran (Sand und Kies: 56 px). */
  .lplan-kopf .lhero-claim { flex: 0 1 auto; min-width: 0; max-width: 19em; text-align: right; text-wrap: balance; }
  .lplan-kopf .lcrumb { padding-bottom: 0; }
  .lplan-kopf .lcrumb::after { bottom: -14px; }
}
/* Rechts endet er bündig mit dem letzten Wort im Menü („Download"), so wie
   links Pfad und Schriftzug „Hans Baur" auf einer Kante stehen. Die
   Menüpunkte haben 15 px Innenabstand – um den rückt er ein. */
@media (min-width: 901px) {
  .lplan-kopf .lhero-claim { margin-right: 15px; }
}
/* Im schmalen Fenster rückte auch ein kurzer Satz bis auf 36 px an den Pfad */
@media (min-width: 701px) and (max-width: 900px) {
  .lplan-kopf .lhero-claim { max-width: 42%; }
}

/* ---------- Band mit Foto und Plan ---------- */
.lplan-band { position: relative; }
.lplan-buehne {
  position: relative;
  width: var(--lp-bw);
  margin-inline: auto;
}
/* Mit Skript ist das Foto anfangs zu (kein Aufblitzen vor dem Ablauf).
   Startet das Skript nicht, geht es nach 4 s von selbst auf – sonst
   bliebe der Titel leer. */
html.js .lplan-buehne { --lp-r: 0px; }
html.js .lplan-buehne:not(.is-lauf) { animation: lplanNotfall 10ms 4s forwards; }
@keyframes lplanNotfall { to { --lp-r: 4000px; } }

.lplan-bild {
  position: relative;
  width: 100%;
  aspect-ratio: var(--lp-ar, 1661 / 620);
  /* reicht die Höhe nicht, wird oben und unten gleich viel beschnitten */
  max-height: calc(100svh - var(--nav-h) - var(--lp-kante) - 120px);
  min-height: 0;
  overflow: hidden;
  touch-action: pan-y;
}
.lplan-foto,
.lplan-zeichnung svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.lplan-foto {
  max-width: none;
  object-fit: cover;
  object-position: var(--lp-fokus, 50% 50%);
  clip-path: circle(var(--lp-r) at var(--lp-vx, 36%) var(--lp-vy, 20%));
}

/* ---------- Die Planlinien ----------
   Sichtbar nur außerhalb des aufgehenden Kreises; am Kreisrand laufen
   sie über 140 px weich aus – einen Moment liegen Plan und Foto
   übereinander. Klassen aus der Zeichnung: k1 kräftig, k2 fein,
   k7 feinste Kanten, km Maschinen, kz Zaundrähte, kb Laub,
   sch Schraffur, kies Steine, k3 Achse, k4 Fluchtlinien, k5 Raster. */
.lplan-linien {
  -webkit-mask-image: radial-gradient(circle at var(--lp-vx, 36%) var(--lp-vy, 20%), transparent calc(var(--lp-r) - 140px), #000 var(--lp-r));
          mask-image: radial-gradient(circle at var(--lp-vx, 36%) var(--lp-vy, 20%), transparent calc(var(--lp-r) - 140px), #000 var(--lp-r));
  transition: opacity 600ms var(--ease);
}
.lplan-linien path,
.lplan-linien ellipse,
.lplan-linien circle {
  fill: none;
  stroke: var(--blue-lift);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lplan-linien .k1 { stroke-width: 1.5; }
.lplan-linien .k1.g { stroke-width: 1.6; }
.lplan-linien .k2 { stroke-width: 0.85; stroke: rgba(11, 82, 196, 0.72); }
.lplan-linien .k3 { stroke-width: 1; stroke: var(--red); stroke-dasharray: 0.03 0.012 0.005 0.012; }
.lplan-linien .k4 { stroke-width: 0.9; stroke: rgba(11, 82, 196, 0.6); stroke-dasharray: 0.008 0.012; }
.lplan-linien .k5 { stroke-width: 1; stroke: rgba(11, 82, 196, 0.45); }
.lplan-linien .k7 { stroke-width: 0.55; stroke: rgba(11, 82, 196, 0.62); }
.lplan-linien .km { stroke-width: 0.8; stroke: rgba(11, 82, 196, 0.82); }
.lplan-linien .kz { stroke-width: 0.5; stroke: rgba(11, 82, 196, 0.55); }
.lplan-linien .kb { stroke-width: 0.9; stroke: rgba(11, 82, 196, 0.5); }
.lplan-linien .sch { stroke-width: 0.45; stroke: rgba(11, 82, 196, 0.34); }
.lplan-linien .kies { stroke-width: 0.6; stroke: rgba(11, 82, 196, 0.6); }
.lplan-linien .schrift { stroke-width: 0.8; }
.lplan-linien .fp { stroke: var(--red); stroke-width: 1.4; }
.lplan-linien .raster {
  font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  fill: rgba(11, 82, 196, 0.55); stroke: none;
}

/* Betonblocksteine: Der Plan ist am kleinen Original gemessen (979 px) und wird
   im Band stärker vergrößert als die anderen. Damit die Striche genauso fein
   wirken wie dort, sind sie um den Maßstabsunterschied dünner. */
@media (min-width: 701px) {
  .lhero--plan-fein .lplan-linien .k1 { stroke-width: 0.88; }
  .lhero--plan-fein .lplan-linien .k1.g { stroke-width: 0.94; }
  .lhero--plan-fein .lplan-linien .k2 { stroke-width: 0.5; }
  .lhero--plan-fein .lplan-linien .k3 { stroke-width: 0.6; }
  .lhero--plan-fein .lplan-linien .k4 { stroke-width: 0.53; }
  .lhero--plan-fein .lplan-linien .k5 { stroke-width: 0.6; }
  .lhero--plan-fein .lplan-linien .k7 { stroke-width: 0.32; }
  .lhero--plan-fein .lplan-linien .km { stroke-width: 0.47; }
  .lhero--plan-fein .lplan-linien .kz { stroke-width: 0.3; }
  .lhero--plan-fein .lplan-linien .kb { stroke-width: 0.53; }
  .lhero--plan-fein .lplan-linien .sch { stroke-width: 0.27; }
  .lhero--plan-fein .lplan-linien .kies { stroke-width: 0.35; }
  .lhero--plan-fein .lplan-linien .fp { stroke-width: 0.82; }
  .lhero--plan-fein .lplan-linien .raster { font-size: 6px; }
  .lhero--plan-fein .lplan-bild.is-frei.is-hand .lplan-linien .k1 { stroke-width: 1.12; }
  .lhero--plan-fein .lplan-bild.is-frei.is-hand .lplan-linien .k2,
  .lhero--plan-fein .lplan-bild.is-frei.is-hand .lplan-linien .km { stroke-width: 0.65; }
  .lhero--plan-fein .lplan-bild.is-frei.is-hand .lplan-linien .k7,
  .lhero--plan-fein .lplan-bild.is-frei.is-hand .lplan-linien .kz { stroke-width: 0.47; }
  .lhero--plan-fein .lplan-schilder path { stroke-width: 0.7; }
  .lhero--plan-fein .lplan-schilder circle { stroke-width: 0.82; }
  .lhero--plan-fein .lplan-schilder rect { stroke-width: 0.6; }
}

/* Zeichnen: jede Linie zieht sich von ihrem Anfang aus (pathLength = 1).
   Von der Mitte nach außen in Wellen (--o), innerhalb leicht versetzt (--n).
   Achse und Fluchtlinien, Schraffur und Kies erscheinen, statt gezeichnet
   zu werden – gestrichelt oder als Fläche sähe das Ziehen falsch aus. */
.lplan-bild.is-zeichnen .lplan-linien path,
.lplan-bild.is-zeichnen .lplan-linien ellipse,
.lplan-bild.is-zeichnen .lplan-linien circle {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  animation: lplanZiehen 400ms cubic-bezier(0.45, 0, 0.2, 1) forwards;
  animation-delay: calc(var(--o) * 42ms + var(--n) * 0.45ms);
}
.lplan-bild.is-zeichnen .lplan-linien .k3,
.lplan-bild.is-zeichnen .lplan-linien .k4 {
  stroke-dashoffset: 0;
  opacity: 0;
  animation: lplanEin 280ms var(--ease) forwards;
  animation-delay: calc(var(--n) * 14ms);
}
.lplan-bild.is-zeichnen .lplan-linien .k3 { stroke-dasharray: 0.03 0.012 0.005 0.012; }
.lplan-bild.is-zeichnen .lplan-linien .k4 { stroke-dasharray: 0.008 0.012; }
.lplan-bild.is-zeichnen .lplan-linien .flaeche {
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  opacity: 0;
  animation: lplanEin 380ms var(--ease) forwards;
  animation-delay: calc(var(--o) * 42ms + 120ms);
}
@keyframes lplanZiehen { to { stroke-dashoffset: 0; } }
@keyframes lplanEin { to { opacity: 1; } }

/* Steht das Foto, tritt der Plan zurück; die Lupe holt ihn wieder */
.lplan-bild.is-frei .lplan-linien { opacity: 0; }

/* ---------- Beschriftungen: nur unter der Lupe ----------
   Beim Laden lenkten sie vom Schriftzug ab; unter der Lupe sind sie
   eine kleine Entdeckung. Das Skript setzt .is-nah. */
.lplan-schilder { pointer-events: none; }
.lplan-schilder path { fill: none; stroke: var(--tinte); stroke-width: 1.2; }
.lplan-schilder circle { fill: var(--red); stroke: #fff; stroke-width: 1.4; }
.lplan-schilder rect { fill: var(--grund); stroke: var(--tinte); stroke-width: 1; }
.lplan-schilder text {
  font-family: var(--f-mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  fill: var(--tinte);
}
.lplan-schilder .schild { opacity: 0; transition: opacity 180ms var(--ease); }
.lplan-bild.is-hand .lplan-schilder .schild.is-nah { opacity: 1; }

/* ---------- Messkreis (zeichnet das Skript) ---------- */
.lplan-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  transition: opacity 240ms var(--ease);
}
.lplan-bild.is-scan .lplan-ring { opacity: 1; }
.lplan-ring circle { fill: none; stroke: var(--red); }
.lplan-ring .ring-linie { stroke-width: 1.6; }
.lplan-ring .ring-fein { stroke-width: 7; stroke-opacity: 0.9; }
.lplan-ring .ring-grob { stroke-width: 15; }
.lplan-ring .ring-schein { stroke-width: 10; stroke-opacity: 0.16; }
.lplan-ring text {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  fill: var(--red);
  paint-order: stroke;
  stroke: rgba(250, 248, 244, 0.85);
  stroke-width: 3px;
  stroke-linejoin: round;
  text-anchor: middle;
  dominant-baseline: central;
}

/* ---------- Lupe ----------
   Hellt das Foto auf wie Pauspapier und zeigt darauf die Planlinien –
   man sieht, wie genau jede Linie auf der echten Kante sitzt. */
.lplan-lupe {
  --lp-lr: 135px;
  position: absolute;
  left: var(--lp-mx, 50%); top: var(--lp-my, 50%);
  width: calc(var(--lp-lr) * 2); height: calc(var(--lp-lr) * 2);
  transform: translate(-50%, -50%) scale(0.7);
  border-radius: 50%;
  background: rgba(250, 248, 244, 0.5);
  box-shadow: 0 16px 36px rgba(10, 14, 24, 0.26);
  opacity: 0;
  transition: opacity 240ms var(--ease), transform 340ms var(--ease);
  pointer-events: none;
}
.lplan-lupe svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lplan-lupe circle { fill: none; stroke: var(--red); }
.lplan-lupe .lupe-linie { stroke-width: 1.5; }
.lplan-lupe .lupe-fein { stroke-width: 6; }
.lplan-lupe .lupe-grob { stroke-width: 12; }
.lplan-lupe path { stroke: var(--red); stroke-width: 1.4; fill: none; }
.lplan-bild.is-hand .lplan-lupe { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.lplan-bild.is-frei.is-hand .lplan-linien {
  --lp-lrm: 128px;
  opacity: 1;
  transition-duration: 140ms;
  -webkit-mask-image: radial-gradient(circle var(--lp-lrm) at var(--lp-mx) var(--lp-my), #000 97%, transparent 100%);
          mask-image: radial-gradient(circle var(--lp-lrm) at var(--lp-mx) var(--lp-my), #000 97%, transparent 100%);
}
/* in der Lupe kräftiger: die Linien liegen auf dem Foto, nicht auf Papier */
.lplan-bild.is-frei.is-hand .lplan-linien .k1 { stroke-width: 1.9; }
.lplan-bild.is-frei.is-hand .lplan-linien .k2,
.lplan-bild.is-frei.is-hand .lplan-linien .km { stroke: rgba(8, 62, 158, 0.95); stroke-width: 1.1; }
.lplan-bild.is-frei.is-hand .lplan-linien .k7,
.lplan-bild.is-frei.is-hand .lplan-linien .kz { stroke: rgba(8, 62, 158, 0.85); stroke-width: 0.8; }

/* ---------- Das Gewerk ----------
   Zweimal übereinander: im Plan blau (außerhalb des Kreises), im Foto
   weiß (innerhalb). Die blaue Kopie kommt aus data-t – im Text der
   Seite steht das Wort nur einmal, in der h1. */
.lplan-wort {
  display: block;
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: calc(var(--lp-bw) * var(--lp-wg));
  line-height: 0.74;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* leistung.css gibt jeder h1 im Titel Größe, Zeilenhöhe und Abstand –
   für das Wort gelten die Werte oben */
.lhero--plan h1.lplan-wort {
  font-size: calc(var(--lp-bw) * var(--lp-wg));
  line-height: 0.74;
  margin: 0;
  letter-spacing: -0.012em;
}
.lplan-wort-foto {
  position: absolute;
  inset: 0;
  pointer-events: none;
  clip-path: circle(var(--lp-r) at var(--lp-vx, 36%) var(--lp-vy, 20%));
}
.lplan-wort--h1 {
  position: absolute;
  left: var(--lp-links);
  bottom: var(--lp-wb);
  color: var(--lp-wort, #fff);
  text-shadow: var(--lp-wort-sch, 0 1px 2px rgba(10, 14, 24, 0.35), 0 6px 26px rgba(10, 14, 24, 0.38));
}
/* Die Maske, die das Plan-Wort im Kreis ausblendet, gilt nur innerhalb
   seiner Box. Bei Zeilenhöhe 0,74 ragen die Buchstaben oben über die Box
   hinaus – ohne Polster fehlten ihnen oben rund 7 %. Das Polster wird
   bei Lage und Abstand wieder abgezogen, das Wort bleibt deckungsgleich.
   --lp-wx/wy: der Fluchtpunkt von dieser Box aus gesehen (setzt das Skript). */
.lplan-wort-plan {
  position: absolute;
  left: calc(var(--lp-links) - var(--lp-wpad));
  bottom: calc(var(--lp-wb) - var(--lp-wpad));
  padding: var(--lp-wpad);
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at var(--lp-wx, 0) var(--lp-wy, 0), transparent var(--lp-r), #000 calc(var(--lp-r) + 1px));
          mask-image: radial-gradient(circle at var(--lp-wx, 0) var(--lp-wy, 0), transparent var(--lp-r), #000 calc(var(--lp-r) + 1px));
}
.lplan-wort-plan [data-t]::before { content: attr(data-t); }
/* voll in Blau mit Papierrand: ein bloßer Umriss ging in den Linien unter */
.lplan-wort--plan {
  color: var(--blue);
  text-shadow: 0 0 0 var(--grund), 3px 0 0 var(--grund), -3px 0 0 var(--grund), 0 3px 0 var(--grund), 0 -3px 0 var(--grund),
               2px 2px 0 var(--grund), -2px 2px 0 var(--grund), 2px -2px 0 var(--grund), -2px -2px 0 var(--grund);
}
html:not(.js) .lplan-wort-plan { display: none; }

/* Betonblocksteine: Das lange Wort füllt die Satzbreite genau aus – links auf der
   Kante von Pfad und „Hans Baur", rechts auf der von Leitsatz und „Download".
   Gemessen an den Buchstaben selbst: 6,9293 em breit, das B beginnt 0,0527 em
   hinter dem Anfang seiner Schriftbox. */
.lhero--plan-fein { --lp-rechts: 0px; }
@media (min-width: 901px) { .lhero--plan-fein { --lp-rechts: 15px; } }
.lhero--plan-fein .lplan-wort,
.lhero--plan-fein h1.lplan-wort {
  font-size: calc((var(--lp-bw) - 2 * var(--lp-links) - var(--lp-rechts)) / 6.9293);
  margin-left: -0.0527em;
}

/* ---------- Handy und schmale Fenster ----------
   Das Band würde 390 × 146 px klein. Dort steht es im Ausschnitt 5 : 4
   (--lp-fokus wählt den Bildteil), weiterhin ohne Vergrößern über die Datei hinaus.
   Beschriftungen und Gradzahlen wären dort zu klein – sie entfallen. */
@media (max-width: 700px) {
  .lhero--plan {
    --lp-bw: 100vw;
    --lp-wg: var(--lp-wg-schmal, 0.21);
    min-height: 0;
    justify-content: flex-start;
    padding-bottom: calc(var(--lp-kante) + 14px);
  }
  .lplan-kopf { flex-direction: column; gap: 10px; }
  .lplan-bild { aspect-ratio: 5 / 4; max-height: none; }
  .lplan-linien .k1 { stroke-width: 3.2; }
  .lplan-linien .k1.g { stroke-width: 1.6; }
  .lplan-linien .k2 { stroke-width: 2; }
  .lplan-schilder { display: none; }
  .lplan-ring text { display: none; }
  .lplan-lupe { --lp-lr: 90px; }
  .lplan-bild.is-frei.is-hand .lplan-linien { --lp-lrm: 85px; }
}

@media (prefers-reduced-motion: reduce) {
  .lplan-ring { display: none; }
  .lplan-lupe { transition: none; }
}