/* ---------------------------------------------------------------------------
   Der Bildrahmen `.lr-shot` und seine Bildstrecke.

   Ursprünglich nur für die Belegseite `lead-radar.html` gebaut, deshalb das
   Präfix `lr-`. Seit 04.08.2026 lädt auch `leistungen.html` diese Datei für den
   Abschnitt „Ihr Studio" (§1s) — die Klassennamen bleiben, weil ein
   Umbenennen zwei Seiten und den Reveal-Mechanismus anfasst, ohne dass sich
   etwas ändert.

   Additiv nach derselben Regel wie `okr.css`: keine Änderung an `site.css`
   oder `wissen.css`, alles hier trägt das Präfix `lr-`.

   Die Seite lebt von Bildschirmfotos einer echten Anwendung. Der Rahmen
   ringsum hat deshalb genau zwei Aufgaben: das Bild als *Anwendung* kenntlich
   machen (Browserleiste, wie in `okr.css` für die Attrappe), und die Herkunft
   der Daten am Bild selbst festhalten — nicht in einer Fußnote weiter unten.
   Der Grundsatz aus PLAN.md §1 verlangt das: die abgebildeten Firmen sind
   erfunden, und ein Bildschirmfoto mit „Nordwind Kommunikation · Gewonnen"
   liest sich ohne Etikett wie eine Kundenliste.
--------------------------------------------------------------------------- */

/* ---------- Gerahmtes Bildschirmfoto ----------------------------------- */
.lr-shot {
  margin: 0;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface-card);
  box-shadow: 0 18px 44px rgba(20, 21, 43, .10);
}
.lr-shot + .lr-shot { margin-top: var(--space-6); }

.lr-shot-leiste {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-hairline);
  background: var(--nws-white);
}
.lr-shot-leiste i {
  flex: 0 0 auto;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--nws-border-strong);
}
.lr-shot-pfad {
  margin-left: 8px;
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: .04em; color: var(--text-label);
}

/* Das Etikett sitzt in der Leiste rechts — es wandert damit nie vom Bild weg,
   auch nicht beim Herausschneiden eines Bildschirmfotos aus der Seite. */
.lr-shot-demo {
  margin-left: auto;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(20, 21, 43, .06);
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-label);
  white-space: nowrap;
}

.lr-shot img {
  display: block;
  width: 100%; height: auto;
  /* Die Vorlagen sind in doppelter Auflösung aufgenommen; ohne diese Zeile
     stauchte der Browser sie auf die Hälfte und der Text würde matschig. */
  image-rendering: auto;
}

.lr-shot figcaption {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-hairline);
  font-size: 13.5px; line-height: 1.55;
  color: var(--text-label);
}
.lr-shot figcaption strong { color: var(--text-heading); font-weight: var(--fw-semibold); }
/* Ohne diese Zeile erbt der Verweis die gedämpfte Farbe der Beschriftung und
   ist als Verweis nicht mehr zu erkennen. */
.lr-shot figcaption a { color: var(--primary); font-weight: var(--fw-medium); }

/* ---------- Bildstrecke aus mehreren `.lr-shot` ------------------------ */
/* Eingeführt am 14.08.2026 (PLAN §1ac). Vier Bilder untereinander machten den
   Abschnitt „Ihr Studio" doppelt so lang wie jeden anderen der Seite; wer nur
   den Preisrechner sucht, scrollt an vier Bildschirmhöhen Beweis vorbei. Die
   Strecke legt sie nebeneinander und gibt jedem Bild dieselbe Fläche.

   Ruhelage ohne JavaScript ist eine **funktionierende** waagerechte Rolle: die
   Spur rollt und rastet, alle vier Bilder sind erreichbar. `galerie.js` hängt
   nur Knöpfe und Punkte an — es ist nirgends Voraussetzung dafür, dass man
   alle Bilder sieht. Dieselbe Regel wie beim Mobilmenü (`nav.js`). */
.lr-galerie { position: relative; }

.lr-galerie-spur {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* Der Schatten der Rahmen (`.lr-shot`) würde am Rollkasten abgeschnitten. */
  padding: 6px 6px 22px;
  margin: -6px -6px -16px;
  scrollbar-width: none;
}
.lr-galerie-spur::-webkit-scrollbar { display: none; }

.lr-galerie-spur > .lr-shot {
  flex: 0 0 100%;
  scroll-snap-align: center;
  /* Hebt `.lr-shot + .lr-shot` auf — in der Strecke stehen die Rahmen
     nebeneinander, nicht untereinander. */
  margin-top: 0;
  /* Alle Bahnen sind gleich hoch (die Spur streckt sie), die Beschriftungen
     sind es nicht. Ohne diese beiden Zeilen endet der Rahmen einer kurzen
     Beschriftung mitten in der Bahn und der Kasten sieht zerbrochen aus. */
  display: flex;
  flex-direction: column;
}
.lr-galerie-spur > .lr-shot figcaption { flex: 1 1 auto; }

/* Der eigentliche Kniff: Die vier Aufnahmen sind unterschiedlich hoch — der
   Aufschlag ist ein Ausschnitt (2880×1400), der Entwurf eine ganze Seite
   (2880×3000). Nebeneinander in einer Bahn würde das Kurze auf die Höhe des
   Langen aufgeblasen oder das Lange auf die des Kurzen beschnitten. Beides
   wäre falsch: Der Entwurf ist als *ganzes Dokument* der Beweis, und
   abgeschnitten fehlt unten ausgerechnet der Preisrahmen mit dem
   `Dummy-Daten`-Etikett.

   Deshalb bekommt jede Bahn dasselbe Sichtfenster, und ein zu langes Bild
   rollt darin senkrecht — wie in der echten Anwendung auch. Nichts wird
   weggeschnitten, alles bleibt erreichbar. */
.lr-galerie .lr-shot-bild {
  height: clamp(260px, 44vw, 460px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------- Steuerung der Bildstrecke ---------------------------------- */
/* Von `galerie.js` eingehängt und deshalb erst sichtbar, wenn das Skript
   läuft. Steht es nicht zur Verfügung, gibt es hier nichts zu verbergen —
   die Leiste existiert dann gar nicht. */
.lr-galerie-steuerung {
  display: flex; align-items: center; gap: var(--space-3);
  margin-top: var(--space-4);
  flex-wrap: wrap;
}

.lr-galerie-knopf {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-hairline);
  border-radius: 50%;
  background: var(--surface-card);
  color: var(--text-heading);
  font-size: 15px; line-height: 1;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, opacity .15s ease;
}
.lr-galerie-knopf:hover { border-color: var(--primary); color: var(--primary); }
.lr-galerie-knopf:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Am Anfang und am Ende der Strecke bleibt der Knopf stehen, statt zu
   verschwinden — eine Leiste, die ihre Breite ändert, springt beim Blättern. */
.lr-galerie-knopf[disabled] { opacity: .3; cursor: default; }
.lr-galerie-knopf[disabled]:hover { border-color: var(--border-hairline); color: var(--text-heading); }

.lr-galerie-punkte { display: flex; align-items: center; gap: 7px; margin-left: 2px; }
.lr-galerie-punkt {
  width: 8px; height: 8px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--nws-border-strong);
  opacity: .45;
  cursor: pointer;
  transition: opacity .15s ease, background-color .15s ease, transform .15s ease;
}
.lr-galerie-punkt:hover { opacity: .8; }
.lr-galerie-punkt:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.lr-galerie-punkt[aria-current="true"] {
  background: var(--primary); opacity: 1; transform: scale(1.25);
}

/* Der Verschiebe-Hinweis wird nur auf schmalen Schirmen gebraucht — dort
   behält das Bild eine Mindestbreite. Auf dem Schreibtisch passt es in die
   Bahn, und der Hinweis wäre falsch. */
.lr-galerie-wink { display: none; }

/* Sagt, wo man ist und wie viele es sind. Ohne diese Zeile ist an einer Bahn,
   die den Rand nur andeutet, nicht abzulesen, wie viel noch kommt. */
.lr-galerie-stand {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-label);
}

@media (prefers-reduced-motion: reduce) {
  .lr-galerie-spur { scroll-behavior: auto; }
  .lr-galerie-punkt[aria-current="true"] { transform: none; }
}

/* ---------- Zwei Bilder als Paar --------------------------------------- */
/* Für die Gegenüberstellung „mit Beleg" / „ohne Beleg". Untereinander statt
   nebeneinander: die Ausschnitte sind sehr breit, zwei Spalten machten die
   Schrift im Bild unlesbar. Der Zusammenhang entsteht über die Beschriftung. */
.lr-paar { display: grid; gap: var(--space-6); }

/* ---------- Zwischenüberschrift über einer Bildgruppe ------------------ */
.lr-schritt { margin-bottom: var(--space-5); max-width: 640px; }
.lr-schritt h3 {
  margin: var(--space-3) 0 var(--space-3);
  font-size: 22px; font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-heading); color: var(--text-heading);
}
.lr-schritt p { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); }
.lr-schritt + .lr-paar, .lr-schritt + .lr-shot { margin-top: var(--space-5); }
.lr-gruppe + .lr-gruppe { margin-top: var(--space-10); }

/* ---------- Inline-Code ------------------------------------------------ */
/* Die geteilten Stylesheets kennen kein <code>. Gebraucht wird es genau
   zweimal, für die reservierte Endung `.example` und den Status `INBOUND` —
   deshalb eng auf die beiden Stellen begrenzt statt global gesetzt. */
.lr-shot figcaption code, .lr-hinweis code {
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(20, 21, 43, .06);
  font-family: var(--font-mono); font-size: .9em;
  color: var(--text-heading);
}

@media (max-width: 720px) {
  .lr-shot figcaption { padding: var(--space-4); font-size: 13px; }
  .lr-shot-pfad { display: none; }

  /* Auf dem Telefon wäre eine 1440 px breite Anwendung auf 350 px gestaucht
     nicht mehr lesbar — sie wäre Textur statt Beleg. Das Bild behält deshalb
     eine Mindestbreite und wandert im eigenen Kasten seitwärts; nur der Kasten
     scrollt, nie die Seite. */
  .lr-shot-bild { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .lr-shot-bild img { min-width: 760px; }

  /* Ohne Hinweis sieht das abgeschnittene Bild nach einem Fehler aus statt
     nach etwas, das man verschieben kann. Nur auf schmalen Schirmen. */
  .lr-shot figcaption::after {
    content: "↔ Bild seitwärts verschiebbar";
    display: block; margin-top: 10px;
    font-family: var(--font-mono); font-size: 10.5px;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-label);
  }

  /* Das Sichtfenster gilt auf dem Telefon genauso — nur höher, weil hier die
     ganze Breite des Schirms zur Verfügung steht.

     Der erste Bau liess die Bilder hier in voller Höhe stehen, um eine zweite
     Rollrichtung im Bildkasten zu vermeiden. Das war falsch herum gedacht:
     Eine Spur ist so hoch wie ihre längste Bahn, und die längste ist der
     Entwurf mit 760 × 792 px. Unter der kurzen ersten Bahn klaffte dadurch ein
     Loch von mehreren hundert Pixeln, und die Bedienleiste rutschte so weit
     nach unten, dass sie mit dem Bild nicht mehr zusammen im Blick lag
     (Peters Fund am 14.08.2026).

     Mit gleichem Fenster sind alle vier Bahnen gleich hoch, und das Bild wird
     im Kasten geschoben — in beide Richtungen. Das ist dieselbe Geste, die man
     von jeder Karte kennt, und wenn der Kasten an seiner Kante ankommt, gibt
     er das Wischen an die Spur weiter. */
  .lr-galerie .lr-shot-bild { height: clamp(300px, 58vh, 440px); }

  /* Der Hinweis steht in der Strecke einmal unten in der Leiste statt viermal
     an jeder Beschriftung — und sagt dort beides: verschieben und blättern.
     Gebunden an `data-bereit`, das `galerie.js` setzt: Läuft das Skript nicht,
     gibt es die Leiste nicht, und dann muss der Hinweis an der Beschriftung
     stehen bleiben. Sonst verlöre ausgerechnet der Besucher ohne JavaScript
     die einzige Auskunft darüber, dass das Bild verschiebbar ist. */
  .lr-galerie[data-bereit] .lr-shot figcaption::after { content: none; }

  .lr-galerie-wink {
    display: block;
    /* Die Standanzeige trägt `margin-left:auto` und würde den Hinweis sonst
       auf dieselbe Zeile drängen; auf 375 px passt beides nicht nebeneinander. */
    flex: 1 0 100%; order: 9;
    font-family: var(--font-mono); font-size: 10.5px;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-label);
  }
}