/* Matrix Marketing – /referenzen als Galerie-Geschichte (Prototyp 12.10.2026). Ergänzt main.css und referenzen.css.
   Von oben nach unten: Seitenkopf · Rubrikleiste · Magazin (Titelseiten-Fächer, Firmenporträts, Wand der Geschäftsempfehlungen) ·
   Flyer (aus der Tiefe heran, dann auf den Tisch gelegt) · Websites (Bildschirme blättern mit der Seite) · Social Media (Raster) ·
   Logo & CI (Reihe mit Goldlinie) · Schluss-Aufruf.
   Bewegung nur mit transform und opacity. Ohne JavaScript und bei «weniger Bewegung» steht alles ruhig in Reihen – der Endzustand
   ist der Normalzustand dieses CSS; die feststehenden Szenen gibt es nur mit JS, ab 768 px Breite und 640 px Höhe. */

/* ------------------------------------------------------------------ Seitenkopf: knapper, damit der Hefte-Stapel schon im ersten Bild steht */
.rg-kopf { padding-top: calc(var(--kopf-h) + clamp(44px, 7vw, 92px)); padding-bottom: clamp(32px, 4vw, 56px); }
.rg-kopf__hinweis { margin-top: 14px; max-width: 33em; }
@media (min-width: 1024px) { .rg-kopf .rs-kopf__text { margin-top: 22px; } }
/* 13.10.2026: Kopf, Leiste und offener Fächer stehen zusammen im ersten Bild – der Kopf ist am Computer etwas knapper, der Fächer
   schliesst enger an die Leiste an (referenzen-story.js passt seine Grösse dem verbleibenden Platz an) */
@media (min-width: 1024px) {
  .rg-kopf { padding-top: calc(var(--kopf-h) + clamp(44px, 5vw, 72px)); padding-bottom: 40px; }
}
@media (min-width: 1024px) and (min-height: 640px) and (prefers-reduced-motion: no-preference) {
  .js:not(.rg-ohne) .rs-nav + .rg-bereich--magazin { margin-top: 12px; }
}

/* ------------------------------------------------------------------ Bereichsleiste am Handy (13.10.2026): vorher lief die Leiste
   rechts aus dem Bild, «Social Media» war mitten im Wort abgeschnitten. Jetzt stehen alle fünf Bereiche nebeneinander und
   ganz da – unter 480 px mit kurzen Namen («Social», «Logo»), gemessen 320 px: 279 von 296 px. Reicht der Platz trotzdem nicht
   (grosse Schrift), lässt sich die Leiste seitlich schieben, mit weicher Kante links und rechts (referenzen.js). */
@media (max-width: 599px) {
  .rs-nav__liste { justify-content: space-between; padding-inline: calc(var(--rand) - 8px); }
  .rs-nav__liste li:last-child { padding-right: 0; }
  .rs-nav__link { padding-inline: 8px; }
  .rs-nav__link::after { left: 8px; right: 8px; }
}
@media (max-width: 479px) { .rs-nav__lang { display: none; } }
@media (max-width: 359px) {
  .rs-nav__liste { padding-inline: calc(var(--rand) - 6px); }
  .rs-nav__link { padding-inline: 6px; font-size: 13.5px; }
  .rs-nav__link::after { left: 6px; right: 6px; }
}
@media (max-width: 1023px) {
  .rs-nav::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; z-index: 1; width: 48px; pointer-events: none; opacity: 0;
    background: linear-gradient(270deg, rgba(10, 10, 10, 0), var(--schwarz) 62%); transition: opacity .25s var(--ease); }
  .rs-nav--zurueck::after { opacity: 1; }
}

/* ------------------------------------------------------------------ Rubriken: Abstände (Runde 2: höchstens ~120 px zwischen den Rubriken) */
.rs-bereich.rg-bereich { margin-top: clamp(64px, 7vw, 112px); }
.rs-nav + .rg-bereich--magazin { margin-top: clamp(28px, 3.5vw, 48px); }
.rg-bereich .kolumne { margin-bottom: clamp(24px, 3vw, 40px); }
.rg-bereich .rs-bereich__inhalt { margin-top: clamp(32px, 4vw, 56px); }
.rg-szene--faecher + .rahmen { margin-top: clamp(56px, 6vw, 96px); }
.rg-szene--flug { margin-top: clamp(32px, 4vw, 56px); }
.schluss.rg-schluss { margin-top: clamp(64px, 7vw, 112px); padding-block: clamp(96px, 10vw, 150px); }
.rg-schluss__wege { margin-top: 36px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 32px; }
/* Handy und Tablet: die feste Leiste «Anrufen | WhatsApp» bleibt (referenzen.css blendet sie auf der alten Referenzseite aus) */
@media (max-width: 1099px) { .schnellkontakt { display: grid; } }
/* Kleinste Handys: «MEISTERWERK.» im Rubriktitel muss in 280 px Platz haben (kopf.css hebt .titel--l auf 2rem) */
@media (max-width: 370px) { .rg-bereich .titel--l { font-size: 1.7rem; } }
.rg-flyer--tisch { margin-top: 32px; }
@media (min-width: 768px) { .rg-flyer--tisch { margin-top: clamp(32px, 3.4vw, 56px); } }

/* ------------------------------------------------------------------ Bühne (Fächer und Flug): im Normalzustand ein ruhiger Block */
.rg-szene { position: relative; }
.rg-buehne { position: relative; overflow-x: clip; overflow-y: visible; }   /* gedrehte Hefte ragen nie über den Rand (Layout-Viewport am Handy) */
.rg-wand-rahmen { overflow-x: clip; overflow-y: visible; }                   /* Reihen gleiten innerhalb des Rahmens herein */
.rg-buehne__innen { position: relative; z-index: 1; }
.rg-buehne__kicker { margin-bottom: 18px; }
.rg-staub { display: none; position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.rg-abstand { height: 0; }

/* ------------------------------------------------------------------ Titelseiten: 2 je Reihe am Handy, 3 ab 600 px, 5 ab Tablet (wie heute) */
.rg-titel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; align-items: start; }
@media (min-width: 600px) { .rg-titel { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px var(--spalt); } }
@media (min-width: 768px) { .rg-titel { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .rg-titel { row-gap: clamp(32px, 3vw, 48px); } }
.rg-titel img { aspect-ratio: 1200 / 1697; object-fit: cover; }
.rg-titel figcaption{ font-size: 13px; }
.rg-heft { position: relative; }
/* Anfrage-Kachel füllt das freie Feld (Handy 2 je Reihe: 1 frei; 600–767 px 3 je Reihe: voll; ab 768 px 5 je Reihe: 1 frei) */
.rg-heft--frei { display: none; --luecke: 12px; }
@media (max-width: 599px) { .rg-heft--frei { display: block; } }
@media (min-width: 768px) { .rg-heft--frei { display: block; --luecke: var(--spalt); } }

/* ------------------------------------------------------------------ Firmenporträts (Doppelseiten): Handy eine, Tablet zwei je Reihe, ab 1280 px gross + 2 × 2 –
   die Publireportage Homes & Styles steht gross vorn, daneben die übrigen vier (siehe unten, 13.10.2026) */
.rg-portraets { grid-template-columns: minmax(0, 1fr); }
.rg-portraets img { aspect-ratio: 1376 / 983; object-fit: cover; }
@media (min-width: 768px) { .rg-portraets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ab 1280 px: grosse Karte links, rechts 2 × 2 – Raster siehe unten (13.10.2026, Runde 2) */

/* ------------------------------------------------------------------ Geschäftsempfehlungen: gleichmässiges Raster (Handy 2, Tablet 3, ab 1280 px 4 je Reihe),
   alle A4 hoch, gleiche Höhe je Reihe; die Anfrage-Kachel füllt die letzte Reihe (13 Arbeiten: Rest 1 / 1 / 1 Feld) */
.rg-wand-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; align-items: start; }
@media (min-width: 768px) { .rg-wand-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 3.4vw, 56px) var(--spalt); } }
@media (min-width: 1280px) { .rg-wand-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rg-wand-raster img { aspect-ratio: 210 / 297; object-fit: cover; }
.rg-wand--frei { display: block; --verh: 1.41429; --luecke: 12px; --k: 1; }   /* ein Feld in Inseratgrösse (Runde 2) */

/* ------------------------------------------------------------------ Flyer: 2 je Reihe, ab Tablet 4 (Flug-Reihe und Tisch-Reihe im selben Raster) */
.rg-flyer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; align-items: start; }
@media (min-width: 768px) { .rg-flyer { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(32px, 3.4vw, 56px) var(--spalt); } }
.rg-flyer img { aspect-ratio: 148 / 210; object-fit: cover; }
.rg-blatt { position: relative; }
.rg-blatt--frei { display: block; --luecke: 12px; }
@media (min-width: 768px) { .rg-blatt--frei { --luecke: var(--spalt); } }

/* ------------------------------------------------------------------ Websites: drei Bühnen im Format 4:5 (Computer oben rechts, Handy unten links) */
.rg-web { display: grid; gap: clamp(36px, 4.5vw, 64px) var(--spalt); max-width: 560px; }
@media (min-width: 1024px) { .rg-web { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1320px; } }   /* Deckel: keine Bühne höher als ~60 % des Bildschirms */
.rg-web__buehne { position: relative; display: block; aspect-ratio: 4 / 5; }
.rg-web__buehne--bild img { width: 100%; height: 100%; object-fit: cover; }
.rg-web__pc { position: absolute; top: 0; right: 0; display: block; width: 88%; border: 1px solid var(--linie-stark); background: #161616; }
.rg-web__leiste { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 10px; border-bottom: 1px solid var(--linie); }
.rg-web__punkte { display: flex; gap: 5px; flex: none; }
.rg-web__punkte i { display: block; width: 7px; height: 7px; border-radius: 50%; background: #3A3936; }
.rg-web__adresse {
  flex: 1; max-width: 16em; margin: 0 auto; padding: 2px 8px; background: #222120;
  font-family: var(--f-text); font-weight: 400; font-size: 12px; line-height: 1.3; letter-spacing: 0; color: var(--grau); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rg-web__schirm { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; }
.rg-web__handy {
  position: absolute; left: 0; bottom: 0; display: block; width: 40%; aspect-ratio: 9 / 19.5;
  padding: 5px; border-radius: 22px; background: #1B1B1C; border: 1px solid rgba(255, 255, 255, .12);
}
.rg-web__handy-schirm { display: block; height: 100%; overflow: hidden; border-radius: 17px; background: #fff; }
@media (min-width: 1024px) { .rg-web__handy { padding: 6px; border-radius: 26px; } .rg-web__handy-schirm { border-radius: 20px; } }
.rs-arbeit img.rg-web__seite { width: 100%; height: auto; background: #fff; transition: filter .6s var(--ease); }
.rs-arbeit:hover img.rg-web__seite { transform: none; }
.rg-web__arbeit figcaption { margin-top: 14px; }

/* ------------------------------------------------------------------ Social Media: ab 1024 px drei gleiche Kacheln in einer Reihe */
.rg-raster img { aspect-ratio: 16 / 10; object-fit: cover; }
@media (min-width: 1024px) {
  .rg-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rg-raster .rs-galerie__aufmacher { grid-column: auto; }
  .rg-raster .rs-galerie__aufmacher figcaption { margin-top: 12px; font-size: 13.5px; }
}

/* ------------------------------------------------------------------ Logo & CI: eine Reihe, darunter eine Goldlinie */
.rg-zeichen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 599px) { .rg-zeichen { gap: 24px 12px; } .rg-zeichen figcaption{ font-size: 13px; } }
/* 13.10.2026, Logo-Einbau: fünf Arbeiten ohne Waise – bis 1023 px die erste (IDR Engineering) gross über die ganze Breite, darunter 2 × 2;
   ab 1024 px drei oben und zwei mittig darunter (6er-Raster, jede Arbeit zwei Spalten breit, alle Bilder gleich gross) */
.rg-zeichen > li:first-child { grid-column: 1 / -1; }
.rg-zeichen figcaption span { text-wrap: pretty; }   /* kein einzelnes Wort auf der letzten Zeile */
@media (min-width: 1024px) {
  .rg-zeichen { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .rg-zeichen > li, .rg-zeichen > li:first-child { grid-column: span 2; }
  .rg-zeichen > li:nth-child(4) { grid-column: 2 / span 2; }
}
.rg-zeichen img { aspect-ratio: 4 / 3; object-fit: cover; }
.rg-goldlinie { height: 1px; margin-top: clamp(28px, 3vw, 44px); background: var(--gold); }

/* ================================================================== Bewegung (nur mit JS; der Endzustand steht oben) */
/* Erscheinen beim Scrollen (eigener Beobachter in referenzen-story.js setzt .is-da) */
.js .rg-heft, .js .rg-blatt { transition: opacity .8s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js .rg-heft { transform-origin: 50% 160%; }
.js .rg-heft:not(.is-da) { opacity: 0; transform: translate3d(0, 24px, 0) rotate(-4deg); }
/* Flyer werden wie Papierbogen auf den Tisch gelegt: kurze Neigung, dann flach */
.js .rg-blatt { transform-origin: 50% 100%; }
.js .rg-blatt:not(.is-da) { opacity: 0; transform: perspective(900px) rotateX(18deg) translate3d(0, 36px, 0); }
/* Wand: Reihen gleiten abwechselnd von links und rechts herein – die Richtung je Reihe ergibt sich aus der Spaltenzahl (--wx) */
.js .rg-wand { --wx: -56px; transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
.js .rg-wand:not(.is-da) { opacity: 0; transform: translate3d(var(--wx), 0, 0); }
/* Geschäftsempfehlungen: Handy 2 je Reihe → jede zweite Reihe von rechts */
.rg-wand-raster > li:nth-child(4n+3), .rg-wand-raster > li:nth-child(4n+4) { --wx: 56px; }
@media (min-width: 768px) and (max-width: 1279px) {   /* 3 je Reihe */
  .rg-wand-raster > li:nth-child(4n+3), .rg-wand-raster > li:nth-child(4n+4) { --wx: -56px; }
  .rg-wand-raster > li:nth-child(6n+4), .rg-wand-raster > li:nth-child(6n+5), .rg-wand-raster > li:nth-child(6n+6) { --wx: 56px; }
}
@media (min-width: 1280px) {                            /* 4 je Reihe */
  .rg-wand-raster > li:nth-child(4n+3), .rg-wand-raster > li:nth-child(4n+4) { --wx: -56px; }
  .rg-wand-raster > li:nth-child(8n+5), .rg-wand-raster > li:nth-child(8n+6), .rg-wand-raster > li:nth-child(8n+7), .rg-wand-raster > li:nth-child(8n+8) { --wx: 56px; }
}
/* Firmenporträts: Handy 1 je Reihe, Tablet 2, ab 1280 px eine Reihe */
.rg-portraets > li:nth-child(2n) { --wx: 56px; }
@media (min-width: 768px) and (max-width: 1279px) {
  .rg-portraets > li:nth-child(2n) { --wx: -56px; }
  .rg-portraets > li:nth-child(4n+3), .rg-portraets > li:nth-child(4n+4) { --wx: 56px; }
}
@media (min-width: 1280px) { .rg-portraets > li:nth-child(2n) { --wx: -56px; } }
/* Kacheln (Social Media, Logo & CI): Kachel für Kachel */
.js [data-kachel] { transition: opacity .9s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 140ms); }
.js [data-kachel]:not(.is-da) { opacity: 0; transform: scale(.94) translate3d(0, 20px, 0); }
/* Goldlinie zeichnet sich von links */
.js .rg-goldlinie { transform: scaleX(0); transform-origin: left center; transition: transform 1.5s var(--ease) .25s; }
.js .rg-goldlinie.is-da { transform: scaleX(1); }

/* ---------- Feststehende Szenen: nur am Computer (ab 1024 px, genug Höhe, keine reduzierte Bewegung) – Runde 2: auf Tablet und Handy
   steht die Reihe, die Hefte und Flyer blenden nacheinander ein ---------- */
@media (min-width: 1024px) and (min-height: 640px) and (prefers-reduced-motion: no-preference) {
  .js:not(.rg-ohne) .rg-buehne {
    position: sticky; top: calc(var(--kopf-h) + var(--rs-nav-h));
    min-height: calc(100vh - var(--kopf-h) - var(--rs-nav-h));
    display: flex; flex-direction: column; justify-content: center;
    overflow: clip;
  }
  .js:not(.rg-ohne) .rg-szene--faecher .rg-buehne { justify-content: flex-start; padding-top: clamp(20px, 3vh, 40px); }   /* schliesst an die Leiste an */
  .js:not(.rg-ohne) .rg-abstand { height: 100vh; }       /* so lange steht die Bühne: eine Bildschirmhöhe */
  .js:not(.rg-ohne) .rg-staub { display: block; }
  /* Fächer: das Skript setzt Lage, Tiefe und Winkel je Heft; Legenden erscheinen erst, wenn die Reihe liegt */
  .js:not(.rg-ohne) .rg-titel { perspective: 1400px; }
  .js:not(.rg-ohne) .rg-szene .rg-heft { opacity: 1; transform: none; transition: none; transform-origin: 50% 190%; backface-visibility: hidden; }
  .js:not(.rg-ohne) .rg-szene.is-laeuft .rg-heft { will-change: transform; }
  .js:not(.rg-ohne) .rg-titel figcaption { opacity: var(--rg-text, 1); }
  /* Flug: die vier Flyer kommen aus der Tiefe und Unordnung */
  .js:not(.rg-ohne) .rg-flyer--flug { perspective: none; }   /* Runde 6: jeder Flyer hat seine eigene Perspektive (referenzen-story.js) – keiner fliegt über den Nachbarn */
  .js:not(.rg-ohne) .rg-szene--flug .rg-abstand { height: 60vh; }   /* Runde 6: kürzerer Einflug (vorher eine Bildschirmhöhe) */
  .js:not(.rg-ohne) .rg-flyer--flug .rg-blatt { opacity: 1; transform: none; transition: none; transform-origin: 50% 50%; backface-visibility: hidden; }
  .js:not(.rg-ohne) .rg-szene.is-laeuft .rg-blatt { will-change: transform; }
  .js:not(.rg-ohne) .rg-flyer--flug figcaption { opacity: var(--rg-text, 1); }
}

/* ---------- Weniger Bewegung: nur Einblenden, nichts bewegt sich im Raum ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .rg-heft, .js .rg-blatt, .js .rg-wand, .js [data-kachel] { transition: opacity .9s var(--ease); transform: none; }
  .js .rg-heft:not(.is-da), .js .rg-blatt:not(.is-da), .js .rg-wand:not(.is-da), .js [data-kachel]:not(.is-da) { transform: none; }
  .js .rg-goldlinie { transform: none; opacity: 0; transition: opacity 1s var(--ease); }
  .js .rg-goldlinie.is-da { opacity: 1; }
  .rs-arbeit img.rg-web__seite { transform: none !important; }
}
@media print {
  .js .rg-heft, .js .rg-blatt, .js .rg-wand, .js [data-kachel] { opacity: 1 !important; transform: none !important; }
  .js .rg-goldlinie { transform: none !important; }
  .rg-abstand, .rg-staub { display: none !important; }
}

/* Feinschliff Hauptchat (12.10.2026 abends): Am Handy ist die Wand der Geschäftsempfehlungen gekürzt (sechs sichtbar,
   die Anfrage-Kachel bleibt), ein Knopf zeigt alle – die Seite wird so rund 1'500 px kürzer. referenzen-story.js setzt die Klasse. */
@media (max-width: 767px) {
  .rg-wand-raster.is-gekuerzt > li:nth-child(n+7):not(:last-child) { display: none; }
}
.rg-mehr { display: none; margin-top: 24px; }
@media (max-width: 767px) { .rg-mehr.is-da { display: inline-flex; } }

/* 13.10.2026: fünf Firmenporträts – die Publireportage Homes & Styles steht gross vorn (am Handy normal; 768–1279 px über die
   ganze Breite, darunter die übrigen vier zu zweit) */
@media (min-width: 768px) { .rg-portraets > .rg-portraet--gross { grid-column: 1 / -1; } }
.rg-portraets > .rg-portraet--gross img { width: 100%; }
/* Ab 1280 px links gross, rechts 2 × 2 (Wunsch Inhaber 13.10.2026, Runde 2: «die Grösse passt nicht» – die grosse Doppelseite
   endete 117 px über den Bildern daneben, die Legenden standen versetzt). Jetzt teilen sich alle fünf ein Raster aus fünf Zeilen:
   Bild · Legende · Abstand · Bild · Legende (subgrid). Die grosse Karte reicht mit ihrem Bild über die ersten vier Zeilen, ihre
   Legende steht in der fünften – Bildunterkanten und Legenden liegen genau auf einer Linie. Damit die Doppelseite dabei ganz
   sichtbar bleibt (Format 1376 : 983), ist die rechte Spalte so breit gerechnet, dass die Höhe des Blocks genau zum Format der
   grossen Karte passt: 4 × Spalte = Breite − 2 Abstände − 1,4 × (Reihenabstand + Legende). Die Legenden sind dafür überall
   mindestens drei Zeilen hoch (Kunde + zwei Zeilen Art). Bricht eine Legende doch auf vier Zeilen um (sehr grosse Schrift),
   füllt das Bild die Höhe per object-fit und wird höchstens am rechten Rand (Textspalte) minim beschnitten – die linke
   Fotoseite bleibt ganz. Die Grossansicht zeigt wie bisher die ganze Doppelseite (Link auf das grosse Bild). */
@media (min-width: 1280px) {
  .rg-portraets {
    --g: clamp(36px, 4.5vw, 64px);
    --s: calc((100% - 2 * var(--spalt) - 1.3998 * (var(--g) + 12px + 4.2 * 13.5px + 2px)) / 4);
    grid-template-columns: minmax(0, 1fr) var(--s) var(--s);
    grid-template-rows: auto auto var(--g) auto auto; row-gap: 0; align-items: stretch;
  }
  .rg-portraets > li { display: grid; grid-template-rows: subgrid; }
  .rg-portraets > li > .rs-arbeit { display: grid; grid-template-rows: subgrid; grid-row: 1 / -1; }
  .rg-portraets > li:nth-child(2), .rg-portraets > li:nth-child(4) { grid-column: 2; }
  .rg-portraets > li:nth-child(3), .rg-portraets > li:nth-child(5) { grid-column: 3; }
  .rg-portraets > li:nth-child(2), .rg-portraets > li:nth-child(3) { grid-row: 1 / 3; }
  .rg-portraets > li:nth-child(4), .rg-portraets > li:nth-child(5) { grid-row: 4 / 6; }
  .rg-portraets > li:not(.rg-portraet--gross) .rs-arbeit__link { grid-row: 1; }
  .rg-portraets > li:not(.rg-portraet--gross) figcaption { grid-row: 2; }
  .rg-portraets figcaption { min-height: calc(4.2em + 2px); align-content: start; font-size: 13.5px; }
  .rg-portraets > .rg-portraet--gross { grid-column: 1; grid-row: 1 / 6; }
  .rg-portraets > .rg-portraet--gross .rs-arbeit__link { grid-row: 1 / 5; min-height: 0; overflow: hidden; }
  .rg-portraets > .rg-portraet--gross figcaption { grid-row: 5; }
  .rg-portraets > .rg-portraet--gross img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 0 50%; }
}

/* 13.10.2026: Die Anfrage-Kachel der Geschäftsempfehlungen füllt die letzte Reihe ganz und ist so hoch wie ein Inserat daneben
   (13 Arbeiten + Kachel: ab 1280 px vier je Reihe → die Kachel steht an zweiter Stelle und reicht über drei Felder, 768–1279 px
   drei je Reihe → über zwei). Vorher blieben rechts unten zwei bzw. ein leeres Feld. Die Regeln gelten für jede Anzahl. */
@media (min-width: 768px) and (max-width: 1279px) {
  .rg-wand-raster > .rg-wand--frei { --luecke: var(--spalt); }
  .rg-wand-raster > .rg-wand--frei:nth-child(3n+1) { --k: 3; grid-column: span 3; }
  .rg-wand-raster > .rg-wand--frei:nth-child(3n+2) { --k: 2; grid-column: span 2; }
}
@media (min-width: 1280px) {
  .rg-wand-raster > .rg-wand--frei { --luecke: var(--spalt); }
  .rg-wand-raster > .rg-wand--frei:nth-child(4n+1) { --k: 4; grid-column: span 4; }
  .rg-wand-raster > .rg-wand--frei:nth-child(4n+2) { --k: 3; grid-column: span 3; }
  .rg-wand-raster > .rg-wand--frei:nth-child(4n+3) { --k: 2; grid-column: span 2; }
}
/* breite Kachel: Schrift passend zur Fläche (wie die Kacheln der Titelseiten und Flyer) */
@media (min-width: 768px) and (max-width: 1279px) {
  .rg-wand-raster > .rg-wand--frei:not(:nth-child(3n)) .titelwand__karte { padding-inline: 9%; gap: 16px; }
  .rg-wand-raster > .rg-wand--frei:not(:nth-child(3n)) .titelwand__frage { font-size: clamp(20px, 3.4cqi, 34px); }
  .rg-wand-raster > .rg-wand--frei:not(:nth-child(3n)) .titelwand__preis { font-size: 14px; }
  .rg-wand-raster > .rg-wand--frei:not(:nth-child(3n)) .titelwand__los { font-size: 15px; }
}
@media (min-width: 1280px) {
  .rg-wand-raster > .rg-wand--frei:not(:nth-child(4n)) .titelwand__karte { padding-inline: 9%; gap: 16px; }
  .rg-wand-raster > .rg-wand--frei:not(:nth-child(4n)) .titelwand__frage { font-size: clamp(20px, 3.4cqi, 34px); }
  .rg-wand-raster > .rg-wand--frei:not(:nth-child(4n)) .titelwand__preis { font-size: 14px; }
  .rg-wand-raster > .rg-wand--frei:not(:nth-child(4n)) .titelwand__los { font-size: 15px; }
}

/* 13.10.2026 (Runde 2, Ladezeit): Die erste Reihe der Titelseiten wartete am Handy und Tablet unsichtbar auf das Skript
   (Deckkraft 0 bis .is-da, bei langsamer Leitung bis ~3 s) – dabei ist sie das grösste Bild im ersten Bildschirm (LCP). Jetzt
   steht sie sofort da (Handy 2, 600–767 px 3, ab 768 px 5 Hefte) und gleitet am Handy und Tablet nur per transform herein, ohne
   Skript und ohne Deckkraft. Die übrigen Reihen erscheinen wie bisher beim Scrollen. Am Computer führt der Fächer (Skript). */
@media (max-width: 599px) { .js .rg-heft:nth-child(-n+2):not(.is-da) { opacity: 1; transform: none; } }
@media (min-width: 600px) and (max-width: 767px) { .js .rg-heft:nth-child(-n+3):not(.is-da) { opacity: 1; transform: none; } }
@media (min-width: 768px) { .js .rg-heft:nth-child(-n+5):not(.is-da) { opacity: 1; transform: none; } }
@media (max-width: 599px) and (prefers-reduced-motion: no-preference) {
  .js .rg-heft:nth-child(-n+2) { animation: rg-erste-reihe 1s var(--ease) backwards; }
}
@media (min-width: 600px) and (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .js .rg-heft:nth-child(-n+3) { animation: rg-erste-reihe 1s var(--ease) backwards; }
}
@media (min-width: 768px) and (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  .js .rg-heft:nth-child(-n+5) { animation: rg-erste-reihe 1s var(--ease) backwards; }
}
.js .rg-heft:nth-child(2) { animation-delay: .09s; }
.js .rg-heft:nth-child(3) { animation-delay: .18s; }
.js .rg-heft:nth-child(4) { animation-delay: .27s; }
.js .rg-heft:nth-child(5) { animation-delay: .36s; }
@keyframes rg-erste-reihe { from { transform: translate3d(0, 24px, 0) rotate(-4deg); } }
@media print { .js .rg-heft { animation: none !important; } }

/* ================================================================== Runde 7 (14.10.2026, Leistungen/Arbeiten/Über uns) */
/* Bereichsleiste am Computer: die Felder reichen bis an den rechten Fensterrand, ohne Schlusslinie – vorher blieb rechts von
   «Social Media» zwischen den Linien ein leeres Feld (1440 px: 72 px, 1920 px: 152 px) */
@media (min-width: 1024px) {
  .rs-nav__innen { max-width: none; padding-left: max(var(--rand), calc((100% - var(--inhalt)) / 2)); padding-right: 0; }
  .rs-nav__liste li:last-child { border-right: 0; }
}

/* ================================================================== Runde 9 (nach-rest, 14.10.2026): Neu laden ohne Sprung
   Wie kopf.css («stocken») für [data-reveal], hier für die eigenen Einblend-Teile dieser Seite (referenzen-story.js setzt .is-da):
   1. Keine Scroll-Anker: Edge merkt sich beim Verlassen die Lage eines Elements und stellt sie nach F5 daran wieder her. Lag die
      Kachel dabei noch verkleinert und 20 px tiefer (Einblenden), landete die Seite am Handy 29 px daneben.
   2. Neu laden / Zurück: alles steht sofort da, ohne Übergang (html.rg-ruhig, zwei Bilder lang).
   3. Bis referenzen-story.js läuft (es lädt «async»): Steht die Seite beim ersten Bild schon tiefer, sind die Teile sichtbar statt
      einen Augenblick schwarz (Scroll-Zeitachse wie in kopf.css; ganz oben ohne Wirkung). */
.js .rg-heft, .js .rg-blatt, .js .rg-wand, .js [data-kachel], .js [data-linie] { overflow-anchor: none; }
html.rg-ruhig :is(.rg-heft, .rg-blatt, .rg-wand, [data-kachel], [data-linie]),
html.rg-ruhig :is(.rg-heft, .rg-blatt, .rg-wand, [data-kachel], [data-linie]) * { transition: none !important; }
@supports (animation-timeline: scroll()) {
  html.js:not(.rg-bereit) :is(.rg-blatt, .rg-wand, [data-kachel], [data-linie]):not(.is-da),
  html.js:not(.rg-bereit) .rg-zeichen__arbeit--auf:not(.is-da) :is(.rs-arbeit__link img, figcaption, .rs-auf__text) {
    animation: rg-vorab linear both; animation-timeline: scroll(root block); animation-range: 12px 13px;
  }
  @keyframes rg-vorab { to { opacity: 1; transform: none; scale: 1; } }
}

/* ================================================================== Runde 9 (maengel-rest, 14.10.2026): Bereichsleiste bündig
   Prüfer jaeger-pc Nr. 10: am Computer liefen die Felder bis an den Fensterrand, die Zahl bei «Social Media» stand 45 px ausserhalb
   der Inhaltskante (1440 px: 1398 statt 1353). Jetzt enden die Felder an der Inhaltskante, die letzte Zahl steht genau darauf;
   nur die Linien oben und unten laufen bis an den Rand (wie die Linie unter dem Kopf), rechts kein Abschlussstrich. */
@media (min-width: 1024px) {
  .rs-nav__innen { padding-right: max(var(--rand), calc((100% - var(--inhalt)) / 2)); }
  .rs-nav__liste li:last-child .rs-nav__link { padding-right: 0; }
}