/* Matrix Marketing – /leistungen als eine Reise (Prototyp 12.10.2026): Flyer → Webdesign → Social Media → Logo & CI → Kontakt.
   Ergänzt main.css, seiten.css, leistung.css und schaustueck.css. Hier nur, was die Reise braucht: Kapitelleiste, Kapitelauftakte
   mit Preis, feststehende Szenen (sticky in einem hohen Rahmen, Fortschritt aus scrollY in assets/js/leistungen-reise.js),
   die Flyer-Wolke mit Goldstaub, Preisüberblick und die Abschlüsse der Kapitel.
   Regeln wie überall: Schwarz, Gold, Elfenbein, Haarlinien, Bewegung nur mit transform/opacity/clip-path, bei «weniger Bewegung»
   nur Einblenden, ohne JavaScript steht jede Szene im Endbild (geordnete Reihe, Schritt 4, Bildschirme oben). */

:root { --lr-nav-h: 0px; --lr-luft: clamp(88px, 8vw, 120px); --lr-bh: 42vh; }   /* Runde 2: Kapitelabstand höchstens ~120 px */
/* Runde 9 (leiste, 14.10.2026): die Leistungsleiste unter dem Kopf ist entfernt (doppelt zur Kopf-Navigation). --lr-nav-h bleibt
   als 0 stehen, damit die Rechnungen der klebenden Szenen unverändert gelten; Sprunglinks landen unter dem Kopf (main.css). */
@supports (height: 1svh) { :root { --lr-bh: 42svh; } }
@media (min-width: 1024px) {
  :root { --lr-bh: calc(100vh - var(--kopf-h) - var(--lr-nav-h) - 150px); }
}
html.lupe-offen { overflow: hidden; }

/* ------------------------------------------------------------------ Seitenkopf: rechts die vier Kapitel mit Preis (nur am Computer – am Handy folgt die Kapitelleiste) */
.lr-kopf__liste { display: none; }
.lr-kopf__liste ul { border-top: 1px solid var(--linie); }
.lr-kopf__liste li { border-bottom: 1px solid var(--linie); }
.lr-kopf__liste a {
  display: grid; grid-template-columns: minmax(0, 1fr) 12px; align-items: center; column-gap: 18px;
  min-height: 52px; padding: 6px 0; color: var(--elfenbein); transition: color .3s var(--ease);
}
.lr-kopf__was { font-size: 15.5px; font-weight: 500; letter-spacing: .005em; }   /* Runde 3: ohne Preis – die Preise stehen im Kapitel und in der Übersicht */
.lr-kopf__runter { width: 12px; height: 16px; color: var(--gold); transition: transform .35s var(--ease); }
.lr-kopf__liste a:hover { color: var(--gold); }
.lr-kopf__liste a:hover .lr-kopf__runter { transform: translateY(3px); }
@media (min-width: 1024px) { .lr-kopf__liste { display: block; align-self: end; padding-bottom: .4em; } }
.lr-kopf { padding-bottom: clamp(44px, 6vw, 88px); }

/* 1024–1099 px: unten steht die feste Leiste «Anrufen | WhatsApp», darum brauchen die Szenen dort 88 px Platz */
@media (min-width: 1024px) and (max-width: 1099px) {
  :root { --lr-bh: calc(100vh - var(--kopf-h) - var(--lr-nav-h) - 214px); }
  .lr-schritte .schritte-wahl__knopf { padding: 9px 0 11px; }
}

/* ------------------------------------------------------------------ Kapitel: viel Luft, Goldlinie zieht sich beim Hineinscrollen über die ganze Breite */
.lr-kapitel { margin-top: var(--lr-luft); }
.lr-kopf + .lr-kapitel { margin-top: clamp(56px, 6vw, 96px); }   /* Runde 9 (leiste): das erste Kapitel folgt direkt auf den Seitenkopf */
.lr-kapitel--ruhig { margin-top: var(--lr-luft); }
.lr-kolumne { position: relative; border-top-color: transparent; }
.lr-kolumne::before { content: ""; position: absolute; top: -1px; left: calc(-1 * var(--rand)); right: calc(-1 * var(--rand)); height: 1px; background: var(--gold); opacity: .55; }
.js .lr-kolumne[data-reveal]::before { left: calc(-1 * var(--rand)); right: calc(-1 * var(--rand)); background: var(--gold); opacity: .55; transition: transform 1.6s var(--ease) .1s; }
.lr-kapitel--ruhig .lr-kolumne::before, .js .lr-kapitel--ruhig .lr-kolumne[data-reveal]::before { background: var(--linie-stark); opacity: 1; }

/* Kapitelauftakt: Titel links über sieben Spalten (wischt sich frei), rechts der Satz und darunter der Preis */
.lr-auftakt { display: grid; gap: 28px; }
.lr-auftakt__neben { display: grid; gap: 26px; justify-items: start; min-width: 0; }
.lr-auftakt .abschnitt__intro { grid-column: auto; max-width: 32em; padding-bottom: 0; }
.lr-auftakt__kopf .titel { grid-column: 1 / -1; }
.lr-preis { display: grid; gap: 6px; justify-items: start; }
.lr-preis--zwei { gap: 16px; }
.lr-preis__zeile { display: grid; gap: 4px; justify-items: start; }
.lr-preis__was { font-family: var(--f-titel); font-stretch: 125%; font-weight: 600; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.lr-preis__wert {
  font-family: var(--f-titel); font-stretch: 125%; font-weight: 600; font-size: clamp(1.5rem, 1.05rem + 1.6vw, 2.5rem); line-height: 1.1; letter-spacing: -.02em;
  color: var(--elfenbein); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap;
}
.lr-preis__ab { font-family: var(--f-text); font-weight: 400; font-size: max(12px, .48em); letter-spacing: .04em; color: var(--grau); margin-right: .25em; vertical-align: .22em; }   /* Runde 3: nie unter 12 px */
.lr-preis__wert--text { font-size: clamp(1.25rem, .95rem + 1.1vw, 1.9rem); color: var(--elfenbein); }
@media (min-width: 768px) { .lr-preis__was { font-size: 11px; } }
@media (min-width: 1024px) {
  .lr-auftakt { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); align-items: end; }
  .lr-auftakt__kopf { grid-column: 1 / span 7; display: block; }
  .lr-auftakt__neben { grid-column: 9 / -1; padding-bottom: .35em; }
  .lr-auftakt .abschnitt__intro { font-size: 17px; }
}

/* ------------------------------------------------------------------ Feststehende Szenen: hoher Rahmen, darin klebt die Bühne */
.lr-szene { position: relative; margin-top: clamp(40px, 4vw, 64px); }
.lr-szene__fest {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  padding: 40px 0; overflow: hidden;
}
.js .lr-szene { height: 170vh; }          /* Runde 2: kürzer – am Handy 70 vh Weg für vier Schritte */
.js .lr-szene--wolke { height: 165vh; }   /* 13.10.: kürzer – der Satz steht früh, die Reihe ist nach 74 % geordnet */
.js .lr-szene__fest { position: sticky; top: 0; height: 100vh; padding: var(--kopf-h) 0 88px; }   /* unten Platz für die Leiste «Anrufen | WhatsApp» */
@supports (height: 1svh) {
  .js .lr-szene { height: 170svh; }
  .js .lr-szene--wolke { height: 165svh; }
  .js .lr-szene__fest { height: 100svh; }
}
@media (min-width: 1024px) {
  .js .lr-szene { height: 200vh; }          /* Runde 2: kürzer, der letzte Schritt kommt bei 76 % – danach kein leerer Bildschirm */
  .js .lr-szene--wolke { height: 200vh; }   /* 13.10.: vorher 260vh; Flug 4–74 %, danach steht die geordnete Reihe */
  .js .lr-szene__fest { top: calc(var(--kopf-h) + var(--lr-nav-h) - 1px); height: calc(100vh - var(--kopf-h) - var(--lr-nav-h) + 1px); padding: 32px 0; }
}
/* Handy quer und sehr niedrige Fenster: nichts klebt, alles steht im Endbild */
@media (max-height: 560px) {
  .js .lr-szene, .js .lr-szene--wolke { height: auto; }
  .js .lr-szene__fest { position: relative; top: auto; height: auto; padding: 40px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .js .lr-szene--wolke, .js .lr-szene[data-reise="web"] { height: auto; }
  .js .lr-szene--wolke .lr-szene__fest, .js .lr-szene[data-reise="web"] .lr-szene__fest { position: relative; top: auto; height: auto; padding: 40px 0; }
}
.lr-szene__innen { width: 100%; display: grid; gap: 22px; align-items: center; }
.lr-szene__text { display: grid; gap: 14px; justify-items: start; min-width: 0; }
.lr-szene__text .titel { max-width: 12em; }
.lr-szene__intro { font-size: 16px; line-height: 1.55; color: var(--text-2); max-width: 30em; text-wrap: pretty; }
.lr-szene__hinweis{ font-size: 13px; line-height: 1.4; letter-spacing: .02em; color: var(--grau); }
@media (max-width: 599px) { .lr-szene__intro, .lr-szene__hinweis { display: none; } }
@media (min-width: 1024px) {
  .lr-szene__innen { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); }
  .lr-szene__innen--flyer .lr-buehne { grid-column: 1 / span 5; }
  .lr-szene__innen--flyer .lr-szene__text { grid-column: 7 / -1; }
  .lr-szene__innen--logo .lr-buehne { grid-column: 1 / span 7; }
  .lr-szene__innen--logo .lr-szene__text { grid-column: 9 / -1; }
  .lr-szene__text { gap: 18px; }
  .lr-szene__intro { font-size: 17px; line-height: 1.6; }
}

/* Bühne mit dem Flyer KONTER: so hoch wie der Platz, Breite folgt dem Format */
.lr-buehne { display: grid; justify-items: center; gap: 14px; min-width: 0; }
.lr-buehne .legende { text-align: center; max-width: 36em; }
.lr-buehne--flyer .bf__buehne { height: var(--lr-bh); width: auto; max-width: 100%; aspect-ratio: 1600 / 2271; }
.lr-buehne--flyer .ls-arbeit__link { height: 100%; }
.lr-buehne--flyer .bf__buehne img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
/* Flyer neigt sich mit dem Scrollen wie Papier in der Hand (nur Computer mit Maus, nie bei «weniger Bewegung») */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .lr-papier { transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-origin: 50% 50%; will-change: transform; }
}
/* Zeichenbühne: nicht höher als der Platz */
.lr-buehne--logo { width: 100%; }
.lr-buehne--logo .zb__buehne { width: 100%; max-width: calc(var(--lr-bh) * 4 / 3); }
@media (max-width: 1023px) { .lr-buehne--logo .zb__buehne { max-width: min(100%, calc(var(--lr-bh) * 4 / 3)); } }

/* Schritte in der Szene: am Computer alle vier (der aktive in Gold), am Handy und Tablet nur der aktive, übereinander gestapelt */
.lr-schritte { margin-top: 0; }
.lr-takt { display: flex; gap: 6px; width: 100%; }
.lr-takt li { position: relative; flex: 1; height: 1px; overflow: hidden; background: var(--linie-stark); }
.lr-takt li::after { content: ""; position: absolute; inset: 0; background: var(--gold); transform: scaleX(0); transform-origin: left center; transition: transform .6s var(--ease); }
.lr-takt li.is-aktiv::after { transform: none; }
@media (max-width: 1023px) {
  .lr-schritte { display: grid; border-top: 0; }
  .lr-schritte li { grid-area: 1 / 1; border-bottom: 0; opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s linear .45s; }
  .lr-schritte li.is-aktiv { opacity: 1; visibility: visible; transition: opacity .55s var(--ease) .1s, visibility 0s; }
  .lr-schritte .schritte-wahl__knopf { padding: 4px 0 0; cursor: default; }
  .lr-schritte .schritte-wahl__knopf::after { display: none; }
  .lr-schritte .schritte-wahl__text { font-size: 15px; }
}
@media (min-width: 1024px) { .lr-takt { display: none; } }
/* Computer bis 920 px Höhe (gemessen 1440 × 900: Textspalte 780 px in 759 px): ohne Hinweis, Schritte etwas enger */
@media (min-width: 1024px) and (max-height: 920px) {
  .lr-szene__hinweis { display: none; }
  .lr-szene__text { gap: 14px; }
  .lr-szene__intro { font-size: 15.5px; line-height: 1.5; }
  .lr-schritte .schritte-wahl__knopf { padding: 12px 0 14px; gap: 5px; }
  .lr-schritte .schritte-wahl__text { font-size: 14.5px; line-height: 1.5; }
}
/* schmale Textspalte (1024–1279 px): fünf statt vier Spalten für die Zeichenbühne; bis 860 px Höhe ohne Einleitung und mit
   kleinerem Titel (gemessen 1024 × 768: Logo-Text 602 px in 583 px, 1280 × 800: 658 in 595) */
@media (min-width: 1024px) and (max-width: 1279px) {
  .lr-szene__innen--logo .lr-buehne { grid-column: 1 / span 6; }
  .lr-szene__innen--logo .lr-szene__text { grid-column: 8 / -1; }
}
@media (min-width: 1024px) and (max-height: 860px) {
  .lr-szene__intro { display: none; }
  .lr-szene__text .titel { font-size: clamp(1.6rem, 1rem + 1.8vw, 2.4rem); }
}
/* niedrige Computerfenster: die Textspalte muss neben der Bühne Platz haben – ohne Einleitung, kompaktere Schritte */
@media (min-width: 1024px) and (max-height: 760px) {
  .lr-szene__intro, .lr-szene__hinweis { display: none; }
  .lr-szene__text { gap: 12px; }
  .lr-szene__text .titel { font-size: clamp(1.6rem, 1rem + 1.8vw, 2.4rem); }
  .lr-schritte .schritte-wahl__knopf { padding: 10px 0 12px; gap: 4px; }
  .lr-schritte .schritte-wahl__text { font-size: 14px; line-height: 1.45; }
}

/* ------------------------------------------------------------------ Druckbogen: sechs Flyer auf einem Sammelbogen, geschnitten, dann in die Reihe
   (13.10.2026, ersetzt die Flyer-Wolke samt Unschärfe, Schweben und Goldstaub). Der Bogen (.lr-bogen) liegt nur mit JavaScript und ohne
   «weniger Bewegung» unter der Reihe; die Flyer bleiben im Layout der Reihe und werden per transform (FLIP) auf ihre Nutzen gelegt.
   Ohne JavaScript, bei «weniger Bewegung» und beim Drucken steht nur die Reihe. */
.lr-wolke { position: relative; width: 100%; height: 100%; min-height: 0; }
.lr-wolke__innen { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; height: 100%; min-height: 0; }   /* Titel, Reihe und Satz als Block mittig – keine Luft zwischen Reihe und Satz */
.lr-wolke__wort { position: relative; z-index: 2; flex: none; max-width: 14em; }   /* bleibt vor dem gekippten Bogen */
.js .lr-wolke__wort-b { opacity: 0; transition: opacity .9s var(--ease); }
.js .lr-wolke.is-ordnung .lr-wolke__wort-b, .js .lr-wolke.is-satz .lr-wolke__wort-b { opacity: 1; }   /* is-satz: Überschrift im oberen Teil des Fensters (leistungen-reise.js) */
.lr-wolke__buehne {
  position: relative; z-index: 1;   /* eigene Ebene unter der Überschrift (z-index 2): der gekippte Bogen deckt «Erst die Idee» nie */
  flex: 0 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center;
  margin-top: clamp(20px, 3vh, 40px);
}
.lr-wolke__reihe { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
.lr-wolke__flyer { min-width: 0; }
.lr-wolke__flyer figure { position: relative; }
.lr-wolke__flyer img { width: 100%; height: auto; aspect-ratio: 148 / 210; object-fit: cover; background: #151515; }
/* Ladegewicht (13.10.2026): die sechs Flyer und die Bogenmarken laden erst, wenn die Szene naht (leistungen-reise.js entfernt
   is-wartet, sobald die Szene weniger als 1,25 Fensterhöhen entfernt ist – am Computer nach den ersten Pixeln Scrollen). Bis dahin
   hält der Link die Fläche im Format des Flyers frei, nichts springt. Ohne JavaScript (kein .js) oder beim Drucken stehen die Bilder sofort da. */
.js .lr-wolke.is-wartet .lr-wolke__flyer img, .js .lr-wolke.is-wartet .lr-bogen__marken { display: none; }
.js .lr-wolke.is-wartet .lr-wolke__flyer .ls-arbeit__link { display: block; aspect-ratio: 148 / 210; background: #151515; }
@media print { .js .lr-wolke.is-wartet .lr-wolke__flyer img { display: block; } }
.lr-wolke__flyer figcaption{ margin-top: 10px; display: grid; gap: 2px; font-size: 13px; line-height: 1.4; }
.js .lr-wolke figcaption, .js .lr-wolke__text { opacity: 0; transition: opacity .9s var(--ease) .15s; }
.js .lr-wolke.is-ordnung figcaption, .js .lr-wolke.is-ordnung .lr-wolke__text { opacity: 1; }
.lr-wolke__text { flex: none; margin-top: 24px; max-width: 40em; font-size: 13.5px; line-height: 1.5; color: var(--grau); text-wrap: pretty; }
.lr-wolke__text a { color: var(--elfenbein); text-decoration: underline; text-decoration-color: var(--linie-stark); text-underline-offset: 3px; transition: color .3s var(--ease); }
.lr-wolke__text a:hover { color: var(--gold); }
/* Die Reihe darf nie höher werden als der Platz in der Bühne: Breite aus der Fensterhöhe (Flyer 148 : 210 = 1,42) */
.lr-wolke__reihe { margin-inline: auto; }
/* Handy (13.10.2026): alle sechs Flyer in drei Spalten und zwei Reihen (vorher vier von sechs). Unter dem Bild nur der Name;
   die Branche steht in der Grossansicht (dort die ganze Legende). Höhe: Kopf 64 + Leiste unten 88 +
   Titel 70 + Abstände 60 + Satz 60 + zwei Legenden 60 + Lücke 18 – der Rest teilt sich auf zwei Flyerreihen (1 : 1,42) */
@media (max-width: 599px) {
  .lr-wolke__reihe { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 10px; max-width: calc((100vh - 430px) / 2.84 * 3 + 20px); }
  @supports (height: 1svh) { .lr-wolke__reihe { max-width: calc((100svh - 430px) / 2.84 * 3 + 20px); } }
  .lr-wolke__flyer figcaption { margin-top: 8px; line-height: 1.3; }
  .lr-wolke__flyer .arbeit__art { display: none; }
  .lr-wolke__text { margin-top: 18px; font-size: 13px; }
}
@media (min-width: 600px) {
  .lr-wolke__reihe { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px var(--spalt); max-width: calc((100vh - 470px) / 2.84 * 3 + 2 * var(--spalt)); }
  @supports (height: 1svh) { .lr-wolke__reihe { max-width: calc((100svh - 470px) / 2.84 * 3 + 2 * var(--spalt)); } }
  .lr-wolke__flyer figcaption { font-size: 13px; }
}
/* ab 1024 px alle sechs in einer Reihe (13.10.: vorher 1024–1279 px nur vier) */
@media (min-width: 1024px) {
  .lr-wolke__reihe { grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: calc((100vh - var(--kopf-h) - var(--lr-nav-h) - 250px) / 1.42 * 6 + 5 * var(--spalt)); }
}
@media (min-width: 1280px) { .lr-wolke__flyer figcaption { font-size: 13.5px; } }
@media (min-width: 1024px) {
  .lr-wolke__wort { max-width: none; }
  .lr-wolke__innen { padding-top: 8px; }
}
/* Der Bogen: 502 × 472 mm (3 × 2 Nutzen A5 hoch, 3 mm Beschnitt, 20 mm Rand). Lage und Grösse setzt leistungen-reise.js (messen),
   oben bündig mit der Bühne, waagrecht mittig. Papier gedämpft (#E6E0D4 zum Rand hin #CFC8BA), damit die Überschrift nicht erschlagen
   wird; Marken, Passkreuze, Kontrollstreifen und Beschnitt im SVG (Computer / Handy), Schnittlinien und Bogenzeile als HTML.
   Das Skript setzt auf .lr-wolke: --lr-rand (0 → 1: der Rand mit Marken wird bis an die äusseren Schnitte weggeschnitten, clip-path),
   --lr-bogen-a (Deckkraft des Rests: Stege und Beschnitt zwischen den Flyern) und --lr-heben (Schatten der Flyer beim Abheben). */
.lr-bogen { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .lr-bogen { display: block; position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
  .js .lr-bogen::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(ellipse 75% 75% at 50% 46%, #E6E0D4 0%, #DFD9CD 48%, #CFC8BA 100%);
    opacity: var(--lr-bogen-a, 1);
    clip-path: inset(calc(var(--lr-rand, 0) * 23 / 472 * 100%) calc(var(--lr-rand, 0) * 23 / 502 * 100%));
  }
  .js .lr-bogen picture, .js .lr-bogen__marken { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
  .js .lr-bogen picture {   /* auf dem picture: am Bild selbst setzt main.js die Einblende-Deckkraft */
    opacity: var(--lr-bogen-a, 1);
    clip-path: inset(calc(var(--lr-rand, 0) * 23 / 472 * 100%) calc(var(--lr-rand, 0) * 23 / 502 * 100%));
  }
  /* Schnitte: 1 px, laufen einmal durch (scaleX/scaleY aus dem Skript), liegen über den Flyern (z-index 2 in der Bühne). Wie an der
     Schneidemaschine: die waagrechten Schnitte gehen über die ganze Bogenbreite, danach ist der Rand oben und unten weg – die
     senkrechten Schnitte laufen darum nur noch von 23 bis 449 mm (nicht durch Kontrollstreifen und Bogenzeile). */
  /* 13.10.2026: Die Schnitte waren 1 px in #8C7B57 auf dem hellen Bogen kaum zu sehen (rund 250 px Scrollweg ohne sichtbare
     Bewegung). Jetzt 2 px dunkle Bronze mit hellem Saum – lesbar auf dem Papier wie auf dunklen Flyern –, und an der Spitze läuft
     eine helle Klinge mit. leistungen-reise.js setzt --s (0 → 1) und --k (Klinge an, solange geschnitten wird). */
  .js .lr-bogen__schnitt { position: absolute; z-index: 2; opacity: calc(1 - var(--lr-rand, 0)); }
  .js .lr-bogen__schnitt::before { content: ""; position: absolute; inset: 0; background: #3E3423; box-shadow: 0 0 0 1px rgba(255, 250, 238, .5), 0 0 8px rgba(255, 240, 210, .45); }
  .js .lr-bogen__schnitt::after { content: ""; position: absolute; opacity: var(--k, 0); }
  .js .lr-bogen__schnitt--h { left: 0; width: 100%; height: 2px; margin-top: -1px; }
  .js .lr-bogen__schnitt--h::before { transform: scaleX(var(--s, 0)); transform-origin: 0 50%; }
  .js .lr-bogen__schnitt--h::after { left: 0; top: -8px; width: 100%; height: 18px; transform: translateX(calc(var(--s, 0) * 100%));
    background: radial-gradient(circle at 0 50%, #FFFDF7 0 2px, rgba(255, 246, 224, .8) 3px, rgba(255, 240, 210, 0) 9px); }
  .js .lr-bogen__schnitt--v { top: calc(23 / 472 * 100%); width: 2px; margin-left: -1px; height: calc(426 / 472 * 100%); }
  .js .lr-bogen__schnitt--v::before { transform: scaleY(var(--s, 0)); transform-origin: 50% 0; }
  .js .lr-bogen__schnitt--v::after { left: -8px; top: 0; width: 18px; height: 100%; transform: translateY(calc(var(--s, 0) * 100%));
    background: radial-gradient(circle at 50% 0, #FFFDF7 0 2px, rgba(255, 246, 224, .8) 3px, rgba(255, 240, 210, 0) 9px); }
  /* Während des Bogens liegen die Flyer per transform auf ihren Nutzen, ihre <figure> aber an der Stelle in der Reihe: die
     unsichtbaren Figuren fingen die Klicks auf Flyer 1 und 3 ab, der unsichtbare Satz «… unter Arbeiten» den Klick ins Leere */
  .js .lr-wolke:not(.is-ordnung) .lr-wolke__flyer figure, .js .lr-wolke:not(.is-ordnung) .lr-wolke__text { pointer-events: none; }
  .js .lr-wolke:not(.is-ordnung) .lr-wolke__flyer .ls-arbeit__link { pointer-events: auto; }
  .js .lr-bogen__schnitt:nth-of-type(1) { top: calc(23 / 472 * 100%); }
  .js .lr-bogen__schnitt:nth-of-type(2) { top: calc(233 / 472 * 100%); }
  .js .lr-bogen__schnitt:nth-of-type(3) { top: calc(239 / 472 * 100%); }
  .js .lr-bogen__schnitt:nth-of-type(4) { top: calc(449 / 472 * 100%); }
  .js .lr-bogen__schnitt:nth-of-type(5) { left: calc(23 / 502 * 100%); }
  .js .lr-bogen__schnitt:nth-of-type(6) { left: calc(171 / 502 * 100%); }
  .js .lr-bogen__schnitt:nth-of-type(7) { left: calc(177 / 502 * 100%); }
  .js .lr-bogen__schnitt:nth-of-type(8) { left: calc(325 / 502 * 100%); }
  .js .lr-bogen__schnitt:nth-of-type(9) { left: calc(331 / 502 * 100%); }
  .js .lr-bogen__schnitt:nth-of-type(10) { left: calc(479 / 502 * 100%); }
  /* Bogenzeile im unteren Rand, nur ab 1024 px (darunter wäre sie kleiner als 9 px) */
  .js .lr-bogen__zeile { display: none; }
  .js .lr-wolke.is-ordnung .lr-bogen { visibility: hidden; }
  /* Flyer: FLIP vom Nutzen in die Reihe (transform nur auf dem Bild-Link, die Legenden bleiben stehen); Schatten beim Abheben */
  .js .lr-wolke__flyer .ls-arbeit__link { transform-origin: 0 0; }
  .js .lr-wolke__flyer .ls-arbeit__link::before {
    content: ""; position: absolute; z-index: -1; left: -5%; right: -5%; top: 3%; bottom: -6%; pointer-events: none;
    background: radial-gradient(closest-side, rgba(20, 16, 10, .55) 70%, rgba(20, 16, 10, 0));
    opacity: var(--lr-heben, 0);
  }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
  .js .lr-bogen__zeile {
    display: block; position: absolute; left: calc(40 / 502 * 100%); top: calc(464.5 / 472 * 100%); transform: translateY(-50%);
    font-size: 9px; line-height: 1; letter-spacing: .03em; color: #615A4E; white-space: nowrap; opacity: calc(1 - var(--lr-rand, 0));
  }
  .js .lr-bogen--klein .lr-bogen__zeile { display: none; }   /* Bogen unter 400 px (sehr niedriges Fenster): die Zeile reichte ans Passkreuz */
}
@media (prefers-reduced-motion: reduce) {
  .js .lr-wolke figcaption, .js .lr-wolke__text, .js .lr-wolke__wort-b { opacity: 1; }
}

/* ------------------------------------------------------------------ Websites auf Computer und Handy: Bildschirme blättern mit dem Scrollen */
.lr-wb { width: 100%; margin-top: 0; min-width: 0; grid-column: 1 / -1; }   /* über alle zwölf Spalten der Szene */
.lr-wb__kopf { display: grid; gap: 14px; margin-bottom: 22px; }
.lr-wb .wb__wahl { margin-top: 0; }
.lr-wb .wb__seite { margin-top: 0; }
.lr-wb .wb__schirm, .lr-wb .wb__handy-schirm { overflow: hidden; overscroll-behavior: auto; }
.lr-wb .lr-schirm img { will-change: transform; }
.lr-wb .wb__text .dienst__intro { margin-top: 0; }
.lr-wb__legende { margin-top: 14px; }
@media (max-width: 599px) {   /* Handy: Bildschirme, Branche, Titel und Link – der Satz dazu steht in der Grossansicht der Website selbst */
  .lr-wb__legende, .lr-wb__kopf .kicker, .lr-wb .wb__text .dienst__intro { display: none; }
  .lr-wb .wb__text { gap: 12px; }
}
@media (max-width: 359px) { .lr-wb .wb__handy { min-width: 100px; } }   /* 320 px: das Handy ragt nicht in die Knöpfe */
@media (min-width: 1024px) {
  .lr-wb .wb__seite { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
  .lr-wb .wb__buehne { grid-column: 1 / span 8; max-width: calc((var(--lr-bh) - 4px) / .64); }   /* Bildschirmhöhe 0,64 der Breite, Legende darunter */
  .lr-wb .wb__text { grid-column: 9 / -1; }
  .lr-wb__kopf { grid-template-columns: auto 1fr; align-items: center; column-gap: 32px; }
  /* Runde 9 (maengel-leistung): Titel und Satz bleiben in ihrer Spalte – vorher lief «wenigen Klicks.» (Firmify) bei 1100 px 63 px,
     bei 1440 px 38 px über den Inhaltsrand. Die Schrift folgt der Spaltenbreite (längste untrennbare Zeile rund 8,7 em). */
  .lr-wb .wb__text { grid-template-columns: minmax(0, 1fr); container-type: inline-size; }
  .lr-wb .wb__text .titel { font-size: min(clamp(1.75rem, 1rem + 2.5vw, 3.35rem), 10.8cqi); }
}
@media (prefers-reduced-motion: reduce) { .lr-wb .lr-schirm img { transform: none !important; } }

/* ------------------------------------------------------------------ Social Media: das Handy steigt ins Bild, die Kacheln erscheinen nacheinander */
.lr-ig { margin-top: clamp(40px, 4vw, 64px); }
.lr-ig .ig__story-bild { object-fit: contain; background: #000; }   /* Story 9:16 ganz zeigen – der Text im Bild klebte sonst am Rand */
.js .lr-handy[data-reveal] { transform: translate3d(0, 110px, 0); transition: opacity 1.1s var(--ease), transform 1.5s var(--ease); }
.js .lr-handy[data-reveal].is-sichtbar { transform: none; }
.js .lr-handy[data-reveal] .ig__raster li { opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity .6s var(--ease), transform .7s var(--ease); }
.js .lr-handy[data-reveal].is-sichtbar .ig__raster li { opacity: 1; transform: none; }
.js .lr-handy[data-reveal] .ig__raster li:nth-child(1) { transition-delay: .55s; }
.js .lr-handy[data-reveal] .ig__raster li:nth-child(2) { transition-delay: .63s; }
.js .lr-handy[data-reveal] .ig__raster li:nth-child(3) { transition-delay: .71s; }
.js .lr-handy[data-reveal] .ig__raster li:nth-child(4) { transition-delay: .79s; }
.js .lr-handy[data-reveal] .ig__raster li:nth-child(5) { transition-delay: .87s; }
.js .lr-handy[data-reveal] .ig__raster li:nth-child(6) { transition-delay: .95s; }
.js .lr-handy[data-reveal] .ig__raster li:nth-child(7) { transition-delay: 1.03s; }
.js .lr-handy[data-reveal] .ig__raster li:nth-child(8) { transition-delay: 1.11s; }
.js .lr-handy[data-reveal] .ig__raster li:nth-child(9) { transition-delay: 1.19s; }
@media (prefers-reduced-motion: reduce) {
  .js .lr-handy[data-reveal], .js .lr-handy[data-reveal] .ig__raster li { transform: none; }
}

/* ------------------------------------------------------------------ Kapitelabschluss: Preise und Leistung nebeneinander, Reihe, WhatsApp-Knopf */
.lr-nach { margin-top: clamp(40px, 4vw, 64px); }
.lr-nach--eng { margin-top: clamp(36px, 4vw, 56px); }
.lr-nach__raster { display: grid; gap: 40px; }
@media (min-width: 1024px) {
  .lr-nach__raster { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); align-items: start; }
  .lr-nach__raster > .preise { grid-column: 1 / span 6; }
  .lr-nach__raster > :last-child { grid-column: 8 / -1; }
}
.lr-reihe { margin-top: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px 12px; }
.lr-reihe li { min-width: 0; }
.lr-reihe img { width: 100%; height: auto; object-fit: cover; background: #151515; }
.lr-reihe--quer img { aspect-ratio: 4 / 3; }
.lr-reihe figcaption { margin-top: 12px; display: grid; gap: 2px; font-size: 13px; line-height: 1.4; }
.js .lr-reihe [data-reveal] img { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease) .15s; }
.js .lr-reihe [data-reveal].is-sichtbar img { clip-path: inset(0); }
@media (min-width: 600px) { .lr-reihe--quer { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--spalt); } .lr-reihe figcaption { font-size: 14px; } }
/* 13.10.2026, Logo-Einbau: vier Marken (IDR Engineering, Freeplanning, Holzbau Heber, grad) – Handy und Tablet 2 × 2, ab 1024 px alle vier
   in einer Reihe; gleiche Spalten und 4:3 → gleiche Bildhöhen, die Bildunterschriften beginnen je Reihe auf einer Linie */
.lr-reihe--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
.lr-reihe--vier figcaption span { text-wrap: pretty; }   /* kein einzelnes Wort auf der letzten Zeile */
@media (max-width: 599px) { .lr-reihe--vier figcaption{ margin-top: 10px; font-size: 13px; } }
@media (min-width: 600px) { .lr-reihe--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px var(--spalt); } }
@media (min-width: 1024px) { .lr-reihe--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lr-aktion { margin-top: clamp(32px, 4vw, 48px); padding-top: 28px; border-top: 1px solid var(--linie); display: flex; flex-wrap: wrap; align-items: center; gap: 16px 36px; }
.lr-aktion__text { font-size: 15px; line-height: 1.5; color: var(--text-2); max-width: 32em; text-wrap: pretty; }
@media (max-width: 599px) { .lr-aktion .knopf { flex: 1 1 100%; } }

/* Webdesign: Merkmale links, Firmify rechts (am Computer bleibt das Bild beim Lesen stehen) */
.lr-merkmale__raster { display: grid; gap: 48px; }
.lr-merkmale__text { min-width: 0; }
.lr-merkmale.merkmale { margin-top: clamp(28px, 3.5vw, 48px); grid-template-columns: minmax(0, 1fr); }
.lr-merkmale__bild { width: 100%; max-width: 520px; }
.lr-merkmale__bild img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: contain; background: #151515; }   /* 13.10.: Firmify hoch (4 : 5) – das ganze Bild, nichts weggeschnitten */
.lr-merkmale__bild .legende { margin-top: 14px; }
.js .lr-merkmale__bild[data-reveal] img { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease) .15s; }
.js .lr-merkmale__bild[data-reveal].is-sichtbar img { clip-path: inset(0); }
@media (min-width: 768px) {
  .lr-merkmale.merkmale { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--spalt); }
  .lr-merkmale .merkmal { border-bottom: 0; padding-bottom: 36px; }   /* Luft zur Linie der nächsten Reihe */
}
@media (min-width: 1024px) {
  .lr-merkmale__raster { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); align-items: start; }
  .lr-merkmale__text { grid-column: 1 / span 7; }
  .lr-merkmale__bild { grid-column: 9 / -1; max-width: none; position: sticky; top: calc(var(--kopf-h) + var(--lr-nav-h) + 24px); }
}

/* ------------------------------------------------------------------ Preise im Überblick */
.lr-preise { margin-top: clamp(36px, 4.5vw, 64px); max-width: 960px; }
.lr-preise__tabelle { table-layout: fixed; }                         /* 320 px: die Tabelle wird nie breiter als ihr Rahmen */
.lr-preise__tabelle th:first-child { width: auto; }
.lr-preise__tabelle td { width: 9.5em; }
.lr-preise__tabelle tbody th { padding-right: 16px; overflow-wrap: anywhere; }
@media (min-width: 600px) { .lr-preise__tabelle tbody th { padding-right: 24px; } .lr-preise__tabelle td { width: 11em; } }
.lr-preise__link { color: var(--elfenbein); text-decoration: underline; text-decoration-color: var(--linie-stark); text-underline-offset: 3px; transition: color .3s var(--ease); }
.lr-preise__link:hover { color: var(--gold); }
.lr-preise__aktion { margin-top: 36px; }

/* 1024–1099 px: Platz für die feste Leiste «Anrufen | WhatsApp» unter jeder Szene (nach der allgemeinen Szenenregel, damit sie gilt);
   die Website-Bühne ohne Legende und mit engerem Kopf (gemessen 1024 × 768: 529 px in 527 px) */
@media (min-width: 1024px) and (max-width: 1099px) {
  .js .lr-szene__fest { padding-bottom: 88px; }
  .lr-wb__legende { display: none; }
  .lr-wb__kopf { margin-bottom: 14px; }
}
/* niedrige Handyfenster (320 × 700): die Flyer-Bühne etwas kleiner, damit Legende, Titel und Schritt Platz haben (gemessen 581 px in 548 px) */
@media (max-width: 1023px) and (max-height: 720px) {
  :root { --lr-bh: 35vh; }
  @supports (height: 1svh) { :root { --lr-bh: 35svh; } }
}

/* ------------------------------------------------------------------ Druck und Kleinkram */
@media print {
  .lr-bogen { display: none !important; }
  .js .lr-wolke__buehne, .js .lr-wolke__flyer .ls-arbeit__link { transform: none !important; }   /* Druckbogen mitten im Ablauf: gedruckt wird die Reihe */
  .js .lr-szene { height: auto; }
  .js .lr-szene__fest { position: static; height: auto; overflow: visible; padding: 24px 0; }   /* 13.10.2026: ohne Polster und Abschnitt – vorher sprang der Druckbogen als ungeteilter Block auf eine neue Seite, davor eine leere */
  .js .lr-wolke figcaption, .js .lr-wolke__text, .js .lr-wolke__wort-b { opacity: 1; }
  .js .lr-handy[data-reveal], .js .lr-handy[data-reveal] .ig__raster li { opacity: 1 !important; transform: none !important; }   /* 13.10.2026 */
  .js .lr-reihe [data-reveal] img, .js .lr-merkmale__bild[data-reveal] img { clip-path: none !important; }
}

/* Feinschliff Hauptchat (12.10.2026 abends): Kapitel rücken enger zusammen – Luft bleibt, aber kein leerer Bildschirm zwischen
   dem WhatsApp-Knopf eines Kapitels und der Linie des nächsten */
.lr-kapitel, .lr-kapitel--ruhig { margin-top: var(--lr-luft); }   /* Runde 2: ein Mass für alle Kapitel, höchstens 120 px */
.lr-nach { margin-top: clamp(40px, 4vw, 64px); }

/* Runde 2: der Abschnitt «In drei Schritten» ist weg (steht auf der Startseite) – die Regeln dazu auch. */

/* Runde 3: keine Beschriftung unter 12 px (Kicker, Preis-Etiketten, Merkmal-Marken, Legenden – auch bei 320–390 px) */
.lr .kicker, .lr-preis__was, .lr .merkmal__marke, .lr .preise__chf { font-size: 12px; }
/* 18.10.2026 (Matrix): Legenden und MWST-Hinweise mindestens 13 px */
.lr .legende, .lr .preise__mwst, .lr-wolke__flyer figcaption { font-size: 13px; }

/* Social Media am Computer: Text neben dem Handy vertikal mittig, darunter kein leeres Feld (Gutachten/Kundentest 12.10. abends) */
@media (min-width: 1024px) { .lr-ig { align-items: center; } .lr-ig .ig-buehne__text { align-self: center; } }

/* ================================================================== 13.10.2026 Fehlersuche (Unterseiten) */
/* Handy und Tablet: die Bühne ist nur so hoch wie ihr Inhalt (--lr-ih misst leistungen-reise.js) und klebt mittig zwischen Kopf
   und Leiste «Anrufen | WhatsApp». Vorher war sie ein ganzer Bildschirm mit Polstern – vor und nach jeder Szene standen
   200–300 px Schwarz (390 × 844: Wolke → KONTER rund 300 px). Der Scrollweg je Szene bleibt gleich (65 bzw. 70 % der Höhe). */
@media screen and (max-width: 1023px) and (min-height: 561px) {
  .js .lr-szene {
    --lr-top: max(0px, calc(var(--kopf-h) + (100vh - 88px - var(--kopf-h) - var(--lr-ih, 100vh)) / 2));
    height: calc(var(--lr-ih, 100vh) + var(--lr-top) + 70vh);
  }
  .js .lr-szene--wolke { height: calc(var(--lr-ih, 100vh) + var(--lr-top) + 65vh); }
  .js .lr-szene__fest { top: var(--lr-top); height: auto; padding: 12px 0; }
  @supports (height: 1svh) {
    .js .lr-szene {
      --lr-top: max(0px, calc(var(--kopf-h) + (100svh - 88px - var(--kopf-h) - var(--lr-ih, 100svh)) / 2));
      height: calc(var(--lr-ih, 100svh) + var(--lr-top) + 70svh);
    }
    .js .lr-szene--wolke { height: calc(var(--lr-ih, 100svh) + var(--lr-top) + 65svh); }
  }
}
@media screen and (max-width: 1023px) and (min-height: 561px) and (prefers-reduced-motion: reduce) {
  .js .lr-szene--wolke, .js .lr-szene[data-reise="web"] { height: auto; }   /* stehen ohne Bewegung im Endbild (wie oben) */
}
/* Niedrige Handyfenster (320 × 568; iPhone SE in Safari 375 × 553 schon über die Regel bis 560 px): Titel, sechs Flyer und Satz
   passten nicht klebend in die Höhe – die Flyer schrumpften auf 43–49 px, die Namen stiessen aneinander, bei KONTER, den Websites
   und der Zeichenbühne lag die letzte Zeile unter der Leiste. Dort klebt keine Szene, jede steht im Endbild, die Reihe in voller Breite. */
@media (max-width: 599px) and (max-height: 620px) {
  .js .lr-szene, .js .lr-szene--wolke { height: auto; }
  .js .lr-szene__fest, .js .lr-szene--wolke .lr-szene__fest { position: relative; top: auto; height: auto; padding: 24px 0; }
  .lr-wolke__reihe { max-width: none; }
  :root { --lr-bh: 52vh; }
  @supports (height: 1svh) { :root { --lr-bh: 52svh; } }
}
/* Handy 621–720 px hoch (360 × 640, 375 × 667, 390 × 664): ohne Dachzeile über dem Szenentitel und etwas höher gesetzt (beim
   Scrollen nach unten ist der Kopf weg) – so bleibt die letzte Zeile über der Leiste */
@media screen and (max-width: 599px) and (min-height: 621px) and (max-height: 720px) {
  .lr-szene__text > .kicker { display: none; }
  .js .lr-szene { --lr-top: max(0px, calc(32px + (100vh - 120px - var(--lr-ih, 100vh)) / 2)); }
  @supports (height: 1svh) { .js .lr-szene { --lr-top: max(0px, calc(32px + (100svh - 120px - var(--lr-ih, 100svh)) / 2)); } }
}
/* Die Breite der Reihe aus der Fensterhöhe nie unter 240 px (Handy); Handy quer (600–1023 px, höchstens 560 px hoch): dort klebt
   nichts, die Formel wurde negativ und die Flyer fielen auf 0 px zusammen */
@media (max-width: 599px) and (min-height: 621px) {
  .lr-wolke__reihe { max-width: max(240px, calc((100vh - 430px) / 2.84 * 3 + 20px)); }
  @supports (height: 1svh) { .lr-wolke__reihe { max-width: max(240px, calc((100svh - 430px) / 2.84 * 3 + 20px)); } }
}
@media (min-width: 600px) and (max-width: 1023px) and (max-height: 560px) { .lr-wolke__reihe { max-width: min(100%, 760px); } }
/* Handy quer: nichts klebt – KONTER und die Zeichenbühne dürfen grösser sein als die 35 % der Höhe, die sie klebend hätten (vorher
   844 × 390: Zeichenbühne 182 px breit, die Masszahlen lagen übereinander) */
@media (max-width: 1023px) and (max-height: 560px) {
  :root { --lr-bh: 70vh; }
  @supports (height: 1svh) { :root { --lr-bh: 70svh; } }
}
.lr-wolke__flyer figcaption { overflow-wrap: normal; }

/* Websites: Bildschirme vor dem Laden dunkel statt weiss (kein weisses Aufblitzen beim schnellen Scrollen) */
.lr-wb .wb__schirm, .lr-wb .wb__handy-schirm { background: #161616; }

/* Preise: Abstand zwischen Leistung und Preis in allen Tabellen der Seite (EN 390 px: «Instagram presence set-up» klebte an «from») */
.lr .preise__tabelle tbody th { padding-right: 16px; }
/* Preisübersicht: Spaltenbreite nach dem Inhalt (bei «table-layout: fixed» teilte die versteckte Kopfzeile die Tabelle genau in
   zwei Hälften, «Instagram-Auftritt aufbauen» stand bei 320 px auf drei Zeilen). Am Handy steht «ab CHF» klein über dem Betrag. */
.lr-preise__tabelle { table-layout: auto; }
@media (max-width: 599px) {
  .lr-preise__tabelle td { width: auto; }
  .lr-preise__tabelle td .preise__betrag { display: block; min-width: 0; margin-top: 2px; }
  .lr-preise__tabelle td .preise__chf { margin-right: 0; }
}

/* ================================================================== Runde 5 (14.10.2026) */
/* Preisüberblick im Seitenkopf: fest im HTML (Magazin zuerst, dann die vier Kapitel mit Einstiegspreis), auf allen Breiten – am
   Handy unter dem Text. Jede Zeile ist ein Link: Pfeil nach unten zum Kapitel, Pfeil nach rechts zum Magazin auf der Startseite.
   Unter 1024 px ersetzt er die Kapitelleiste (die beiden Listen standen sonst untereinander). */
.lr-kopf__liste { display: block; }
.lr-kopf__titel {
  margin-bottom: 14px;
  font-family: var(--f-titel); font-stretch: 125%; font-weight: 600; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
}
.lr-kopf__liste--preise a { grid-template-columns: minmax(0, 1fr) auto 24px; column-gap: 14px; min-height: 54px; }
.lr-kopf__preis {
  font-family: var(--f-titel); font-stretch: 125%; font-weight: 600; font-size: 17px; line-height: 1.2; letter-spacing: -.01em;
  color: var(--elfenbein); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; text-align: right; transition: color .3s var(--ease);
}
.lr-kopf__ab { margin-right: .3em; font-family: var(--f-text); font-stretch: 100%; font-weight: 400; font-size: 12px; letter-spacing: .04em; color: var(--grau); }
.lr-kopf__preis--text { font-family: var(--f-text); font-stretch: 100%; font-weight: 400; font-size: 14px; letter-spacing: .01em; color: var(--text-2); }
.lr-kopf__liste--preise .lr-kopf__runter { justify-self: center; }
.lr-kopf__pfeil { justify-self: end; width: 24px; height: 11px; color: var(--gold); transition: transform .35s var(--ease); }
.lr-kopf__liste a:hover .lr-kopf__preis { color: var(--gold); }
.lr-kopf__liste a:hover .lr-kopf__pfeil { transform: translateX(3px); }
.lr-kopf__mwst{ margin-top: 12px; font-size: 13px; line-height: 1.4; color: var(--grau); }
@media (min-width: 1024px) { .lr-kopf__preis:not(.lr-kopf__preis--text) { font-size: 19px; } }
@media (prefers-reduced-motion: reduce) { .lr-kopf__pfeil, .lr-kopf__runter { transition: none; } .lr-kopf__liste a:hover .lr-kopf__pfeil { transform: none; } }

/* Kapitelabschluss ohne eigene Preistabelle (die Preise stehen im Kapitelkopf und vollständig in «Alle Leistungen, alle Preise») */
@media (min-width: 1024px) { .lr-nach__raster > :only-child { grid-column: 1 / span 7; } }

/* Webdesign: rechts neben «Was eine gute Website ausmacht» der Partner Lucravis (vorher ein zweites Firmify-Bild) */
.lr-merkmale__partner .partner { margin-top: 0; }
@media (min-width: 1024px) {
  .lr-merkmale__partner { grid-column: 9 / -1; padding-top: 8px; position: sticky; top: calc(var(--kopf-h) + var(--lr-nav-h) + 24px); }
  .lr-merkmale__partner .partner { max-width: none; }
}

/* Social Media am Computer: Text oben neben dem Handy und klebend, solange das Handy durchläuft (vorher mittig – links stand
   unter «Social Media im Stil Ihrer Marke.» rund 300 px Leere) */
@media (min-width: 1024px) {
  .lr-ig { align-items: start; }
  .lr-ig .ig-buehne__text { align-self: start; position: sticky; top: calc(var(--kopf-h) + var(--lr-nav-h) + 40px); padding-top: 8px; }
}

/* Druckbogen ab 1280 px: Überschrift oben statt mittig – der Bogen (leistungen-reise.js) steht links an ihrer Spalte und wird grösser */
@media (min-width: 1280px) {
  .lr-wolke__innen { justify-content: flex-start; padding-top: clamp(8px, 2.5vh, 28px); }
  .lr-wolke__buehne { flex: 1 1 auto; }   /* die geordnete Reihe steht mittig im Platz unter der Überschrift */
}

/* Websites: ruhige Reiter wie in der Heft-Galerie der Startseite statt dreier grosser Knöpfe (Runde 5, vor allem am Handy) */
.lr-wb .wb__wahl { flex-wrap: nowrap; gap: 0; overflow-x: auto; scrollbar-width: none; box-shadow: inset 0 -1px 0 var(--linie); }   /* Linie als Schatten: die Goldlinie des Reiters liegt darauf (overflow würde sie unter dem Rahmen abschneiden) */
.lr-wb .wb__wahl::-webkit-scrollbar { display: none; }
.lr-wb .wb__knopf {
  position: relative; flex: none; min-height: 48px; padding: 0 18px; border: 0;
  font: 500 15px/1 var(--f-text); font-stretch: 100%; letter-spacing: .005em; text-transform: none; color: var(--text-2); white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.lr-wb .wb__knopf:first-child { padding-left: 0; }
.lr-wb .wb__knopf + .wb__knopf { border-left: 1px solid var(--linie); }
.lr-wb .wb__knopf::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left center; transition: transform .45s var(--ease);
}
.lr-wb .wb__knopf + .wb__knopf::after { left: 0; }
.lr-wb .wb__knopf:first-child::after { right: 18px; }
.lr-wb .wb__knopf[aria-selected="true"] { color: var(--elfenbein); border-color: var(--linie); }
.lr-wb .wb__knopf[aria-selected="true"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .lr-wb .wb__knopf:hover { color: var(--gold); border-color: var(--linie); } }
@media (max-width: 599px) { .lr-wb .wb__knopf { flex: none; padding: 0 14px; font-size: 14px; letter-spacing: .005em; } .lr-wb .wb__knopf:first-child { padding-left: 0; } }
@media (prefers-reduced-motion: reduce) { .lr-wb .wb__knopf::after { transition: none; } }
/* Runde 9 (nach-leistung, 14.10.2026): mit Firmify wieder drei Reiter (zusammen 330 px) – unter 375 px heisst der erste nur
   «Litonya», sonst wäre «Firmify» bei 320 und 360 px angeschnitten */
@media (max-width: 374px) { .lr-wb__zusatz { display: none; } }

/* ================================================================== Runde 6 (14.10.2026) */
/* Kapitel Magazin MEISTERWERK: kurz, ohne Szene – zwei Sätze mit den fünf Formaten, darunter zwei Wege zur Startseite
   (Tippflächen mindestens 44 px hoch, .textlink in main.css) */
.lr-magazin__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 32px; margin-top: -6px; }
.lr-magazin__links .textlink { min-height: 44px; }
/* Handy und Tablet: die Kapitellinie zeichnet sich von der Mitte nach beiden Seiten (vorher von links – während des Zeichnens
   begann sie am linken Rand und endete vor dem rechten); in Ruhe reicht sie wie bisher von Rand zu Rand */
@media (max-width: 1023px) { .js .lr-kolumne[data-reveal]::before { transform-origin: 50% 50%; } }

/* ================================================================== Runde 7 (14.10.2026, Leistungen/Arbeiten/Über uns) */
/* Kapitelauftakt am Handy und Tablet: eine Spalte, nie breiter als der Bildschirm (360 px: «im&nbsp;MEISTERWERK.» machte die
   Spalte 361 px breit, Titel und Text liefen rechts aus dem Bild); der Magazin-Titel wird auf schmalen Handys kleiner */
@media (max-width: 1023px) {
  .lr-auftakt { grid-template-columns: minmax(0, 1fr); }
  .lr-auftakt__kopf { min-width: 0; }
  .lr-auftakt__kopf .titel { overflow-wrap: break-word; }
}
@media (max-width: 599px) { .lr-kapitel--magazin .lr-auftakt__kopf .titel { font-size: min(2rem, calc((100vw - 2 * var(--rand)) / 11.6)); } }

/* Magazin: die fünf Formate als kurze Liste, daneben eine Doppelseite aus dem Heft, ein Link zur Startseite */
.lr-magazin { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; margin-top: clamp(36px, 4vw, 56px); }
.lr-magazin__bild { margin: 0; }
.lr-magazin__bild img { display: block; width: 100%; height: auto; background: #1a1a1a; }
.lr-magazin__bild .legende { margin-top: 10px; }
.lr-magazin__preise { display: grid; gap: 14px; justify-items: start; align-content: start; min-width: 0; }
.lr-magazin__tabelle { width: 100%; table-layout: auto; }
.lr-magazin__titel {
  caption-side: top; padding-bottom: 12px; text-align: left;
  font-family: var(--f-titel); font-stretch: 125%; font-weight: 600; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
}
.lr-magazin__tabelle th { padding-right: 16px; }
.lr-magazin__tabelle td { width: auto; text-align: right; white-space: nowrap; }
.lr-magazin__preise .preise__mwst { margin-top: -4px; }
.lr-magazin__preise .textlink { min-height: 44px; }
@media (max-width: 1023px) { .lr-magazin__preise { order: -1; } }
@media (min-width: 1024px) {
  .lr-magazin { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); align-items: center; }
  .lr-magazin__bild { grid-column: 1 / span 7; }
  .lr-magazin__preise { grid-column: 9 / -1; }
}

/* Handy ab 721 px Höhe (14.10.2026): weniger Schwarz um die klebenden Szenen. Gemessen 390 × 844: Druckbogen oben 171 px und
   unten 126 px leer (Inhalt 502 px im Platz von 692 px zwischen Kopf und Leiste, mittig gesetzt), Websites 166 / 121 px.
   Druckbogen: die Bühne füllt den Platz – Überschrift oben, Bogen und Reihe mittig darunter (wie am Computer ab 1280 px), die
   Klebestrecke folgt über --lr-ih; leistungen-reise.js legt den Bogen mittig auf die Reihe (--lr-bogen-mitte).
   Websites: höhere Bildschirme (4 : 3, ab 800 px Höhe 1 : 1) statt 16 : 10, das Handy etwas grösser.
   Nachher 390 × 844 (Kopf weg, Leiste da): Druckbogen über dem Titel 76 px, unter der Reihe 126 px; Websites 108 / 63 px.
   Die drei A5-Flyer nebeneinander sind breitenbegrenzt (Bogen 350 × 329 px) – mehr Höhe gibt der Inhalt dort nicht her. */
@media screen and (max-width: 599px) and (min-height: 721px) and (prefers-reduced-motion: no-preference) {
  .js .lr-szene--wolke .lr-szene__fest { min-height: calc(100vh - var(--kopf-h) - 88px); }
  @supports (height: 1svh) { .js .lr-szene--wolke .lr-szene__fest { min-height: calc(100svh - var(--kopf-h) - 88px); } }
  .js .lr-szene--wolke .lr-wolke { --lr-bogen-mitte: 1; flex: 1 1 auto; display: flex; flex-direction: column; height: auto; }
  .js .lr-szene--wolke .lr-wolke__innen { flex: 1 1 auto; height: auto; justify-content: flex-start; }
  .js .lr-szene--wolke .lr-wolke__buehne { flex: 1 1 auto; }
  .js .lr-wb .wb__schirm { aspect-ratio: 4 / 3; }
}
@media screen and (max-width: 599px) and (min-height: 800px) and (prefers-reduced-motion: no-preference) {
  .js .lr-wb .wb__schirm { aspect-ratio: 1 / 1; }
  .js .lr-wb .wb__handy { min-width: 136px; }
}

/* ------------------------------------------------------------------ Runde 9 (14.10.2026) */
/* Klebende Szenen am Handy und Tablet: die Bühne beginnt unter Kopf und Leiste (vorher hätte die Leiste ihren oberen Rand verdeckt) */
@media screen and (max-width: 1023px) and (min-height: 561px) {
  .js .lr-szene {
    --lr-top: max(calc(var(--lr-nav-h) + 8px), calc(var(--kopf-h) + var(--lr-nav-h) + (100vh - 88px - var(--kopf-h) - var(--lr-nav-h) - var(--lr-ih, 100vh)) / 2));
  }
  @supports (height: 1svh) {
    .js .lr-szene {
      --lr-top: max(calc(var(--lr-nav-h) + 8px), calc(var(--kopf-h) + var(--lr-nav-h) + (100svh - 88px - var(--kopf-h) - var(--lr-nav-h) - var(--lr-ih, 100svh)) / 2));
    }
  }
}
@media screen and (max-width: 599px) and (min-height: 621px) and (max-height: 720px) {
  .js .lr-szene { --lr-top: max(calc(var(--lr-nav-h) + 8px), calc(var(--lr-nav-h) + 20px + (100vh - 120px - var(--lr-nav-h) - var(--lr-ih, 100vh)) / 2)); }
  @supports (height: 1svh) { .js .lr-szene { --lr-top: max(calc(var(--lr-nav-h) + 8px), calc(var(--lr-nav-h) + 20px + (100svh - 120px - var(--lr-nav-h) - var(--lr-ih, 100svh)) / 2)); } }
}
@media screen and (max-width: 599px) and (min-height: 721px) and (prefers-reduced-motion: no-preference) {
  .js .lr-szene--wolke .lr-szene__fest { min-height: calc(100vh - var(--kopf-h) - var(--lr-nav-h) - 88px); }
  @supports (height: 1svh) { .js .lr-szene--wolke .lr-szene__fest { min-height: calc(100svh - var(--kopf-h) - var(--lr-nav-h) - 88px); } }
}
/* Druckbogen: ein Satz erklärt die Überschrift «Erst die Idee, dann das Layout.»; er füllt am Handy auch die Lücke über dem Bogen */
.lr-wolke__lead { position: relative; z-index: 2; flex: none; max-width: 34em; margin-top: 14px; font-size: 16px; line-height: 1.55; color: var(--text-2); text-wrap: pretty; }
@media (min-width: 1024px) { .lr-wolke__lead { margin-top: 16px; font-size: 17px; } }
/* Jede Leistung zeigt nur eine Auswahl – der Weg zur ganzen Sammlung auf /arbeiten steht im Kapitelabschluss */
.lr-aktion__alle { flex: none; }
@media (min-width: 1024px) { .lr-aktion__alle { margin-left: auto; } }
/* Logo & CI: zwei weitere Marken statt vier (die übrigen stehen auf /arbeiten) */
@media (min-width: 1024px) { .lr-reihe--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); } }