/* Arcturis — Preise: die Bildeingriffe.
   Eine Preisliste ist ein Dokument, kein Schaufenster. Wer sie bebildert wie
   eine Startseite, macht die Zahlen unglaubwürdig. Also zwei Bauteile, beide
   mit Aufgabe:

   A · Ein Schnitt je Bereich, im Satzspiegel, zwischen Überschrift und
       Preistabelle. Er sagt ohne Wort, welcher Bereich beginnt.
   B · Ein Grund hinter der Überschrift von „Warum ,ab'" — dem einzigen
       Abschnitt der Seite, der eine Behauptung aufstellt statt eine Zahl zu
       nennen.

   Der Nachtkopf bleibt leer. Ein einzelnes Objekt im Sternenfeld steht dort
   beziehungslos herum; die Sterne sind das Bild. */

/* ══ A · Der Bereichsschnitt ═══════════════════════════════════════════════
   Im Satzspiegel, nicht randlos: ein gesetztes Bild, kein Trennband. 3:1 ist
   das Format, in dem die Aufnahmen geschnitten sind — ein flaches Band über
   die volle Fensterbreite hätte aus jedem Motiv einen Streifen von einem
   Dreizehntel Höhe gemacht, und genau das sah zerschnitten aus.

   Er wird beim Erscheinen von links aufgezogen, angeführt von einer hellen
   Kante, die einmal durchläuft. In Ruhe liegt er entsättigt; beim Zeigen
   kommt er in seine Farbe. */
.pb-schnitt{position:relative;display:block;overflow:hidden;
  margin:clamp(22px,3vh,36px) 0 clamp(26px,4vh,44px);
  aspect-ratio:3/1;border-radius:2px;
  background-color:#DED9CB;
  background-image:var(--bild,var(--pb-platz));
  --pb-platz:repeating-linear-gradient(135deg,
    rgba(84,91,102,.18) 0 10px,rgba(84,91,102,0) 10px 20px);
  background-repeat:no-repeat;background-size:cover;
  background-position:50% calc(50% + var(--pb-lauf,0) * 12%);
  filter:saturate(.34) brightness(1.03);
  clip-path:inset(0 calc((1 - var(--pb-ein,0)) * 100%) 0 0);
  transition:filter .3s cubic-bezier(.22,.72,.2,1);
  will-change:filter}
.pb-schnitt:hover{filter:none}
.pb-schnitt i{position:absolute;top:0;bottom:0;left:0;width:2px;
  background:var(--acc,#0E5C9E);opacity:0;pointer-events:none}
.pb-schnitt[data-auf="ja"] i{animation:pb-kante 1.1s cubic-bezier(.2,.7,.2,1) both}
@keyframes pb-kante{
  0%{left:0;opacity:0}
  10%{opacity:.9}
  86%{left:100%;opacity:.9}
  100%{left:100%;opacity:0}
}

/* ══ B · Der Grund hinter „Warum ,ab'" ═════════════════════════════════════
   Erst stand die Platte frei unter dem Abschnitt — ein Gegenstand ohne
   Anlass, der einfach dort herumlag. Jetzt liegt sie HINTER Aufschrift und
   Überschrift und deckt genau deren Fläche samt dem Leerraum darüber. Das
   Bild trägt den Satz, statt neben ihm zu stehen.

   Sie behält ihre Drehung zum Zeiger, und zwar solange sie im Fenster steht —
   egal, wo die Hand gerade ist. Der Winkel kommt aus der Richtung vom
   Plattenmittelpunkt zum Zeiger, nicht aus einer Überfahrt.

   Zwei Vorkehrungen für die Schrift: die linke Hälfte läuft über eine Maske
   ins Nichts (dort steht der Text), und die ganze Fläche liegt bei knapp der
   halben Deckkraft. Eine Maske statt eines deckenden Verlaufs, weil sie von
   der Grundfarbe des Abschnitts unabhängig ist. */
.pb-kopf{position:relative;isolation:isolate}
.pb-kopf > p,.pb-kopf > h2{position:relative;z-index:1}
.pb-kopf-bild{position:absolute;z-index:0;pointer-events:none;
  top:calc(-1 * clamp(30px,5.5vh,72px));
  bottom:calc(-1 * clamp(12px,2vh,26px));
  left:calc(-1 * clamp(14px,2vw,30px));
  right:calc(-1 * clamp(14px,2vw,30px));
  perspective:1500px}
.pb-kopf-bild i{position:absolute;inset:0;display:block;border-radius:2px;
  background-color:transparent;
  background-image:var(--bild,var(--pb-platz2));
  --pb-platz2:repeating-linear-gradient(128deg,
    rgba(84,91,102,.3) 0 11px,rgba(84,91,102,0) 11px 22px);
  background-repeat:no-repeat;background-size:cover;background-position:70% 50%;
  opacity:.46;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.35) 34%,#000 66%);
  mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.35) 34%,#000 66%);
  transform:
    rotateX(calc(var(--my,0) * -4deg))
    rotateY(calc(var(--mx,0) * 9deg))
    scale(1.02);
  transition:transform .34s cubic-bezier(.22,.72,.2,1);
  will-change:transform}

@media (max-width:767px){
  .pb-kopf-bild i{transform:none;opacity:.34}
  .pb-schnitt{aspect-ratio:2/1;clip-path:none}
}
@media (prefers-reduced-motion:reduce){
  .pb-kopf-bild i{transform:none!important;transition:none!important}
  .pb-schnitt{clip-path:none!important}
  .pb-schnitt i{display:none}
}