/* Matrix Marketing – /arbeiten als Grafikstudio (Umbau 13.10.2026, Bauplan Kapitel 4). Ergänzt main.css, referenzen.css und
   referenzen-story.css; dort wird keine Regel geändert – jede Regel hier hängt an einem eigenen Modifier.
   Von oben nach unten: Magazin-Karte im Kopf · Textblock der Aufmacher · Websites (Partner-Auftakt, Litonya 8 + 4, Paar 6 + 6) ·
   Logo & CI (IDR 4 + 8 gespiegelt, 2 × 2) · Social Media (Lärchenbüel 8 + 4, Paar 6 + 6) · Bewegung · Druck.
   Rhythmus der Seite: Bild links (Websites), Bild rechts (Logo & CI), Szene (Flyer), Bild links (Social Media).
   Bewegung nur mit transform/scale und opacity, nur unter .js; bei «weniger Bewegung» nur Einblenden. Ohne JS steht alles da. */

/* ------------------------------------------------------------------ 1 Magazin-Karte im Kopf (führt zur Heft-Galerie der Startseite) */
.rs-heftkarte {
  display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; column-gap: 18px;
  max-width: 34rem; margin-top: 26px; padding: 18px 20px;
  border: 1px solid var(--linie-stark); color: var(--elfenbein);
  transition: border-color .35s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.rs-heftkarte__hefte { display: flex; justify-content: center; align-items: flex-end; width: 76px; }
.rs-heftkarte__hefte img {
  flex: none; width: 44px; height: auto; aspect-ratio: 1200 / 1697; background: #151515;
  transform-origin: 50% 100%; transition: transform .5s var(--ease);
}
.rs-heftkarte__hefte img + img { margin-left: -24px; }
.rs-heftkarte__hefte img:nth-child(1) { transform: rotate(-8deg); }
.rs-heftkarte__hefte img:nth-child(2) { position: relative; z-index: 1; }   /* das mittlere Heft liegt oben */
.rs-heftkarte__hefte img:nth-child(3) { transform: rotate(8deg); }
.rs-heftkarte__text { display: grid; gap: 4px; min-width: 0; }
.rs-heftkarte__kicker {   /* wie .kicker */
  font-family: var(--f-titel); font-stretch: 125%; font-weight: 600; font-size: 10.5px; line-height: 1.4;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
}
.rs-heftkarte__titel { font-family: var(--f-titel); font-stretch: 125%; font-weight: 600; font-size: 16px; line-height: 1.25; color: var(--elfenbein); text-wrap: balance; }
.rs-heftkarte__zeile { font-size: 13px; line-height: 1.45; color: var(--grau); text-wrap: pretty; }
.rs-heftkarte__pfeil { width: 24px; height: 11px; color: var(--gold); flex: none; transition: transform .35s var(--ease); }
.rs-heftkarte:hover, .rs-heftkarte:focus-visible { border-color: var(--gold); }
.rs-heftkarte__kicker { font-size: 12px; }   /* Runde 5 (14.10.2026): nie unter 12 px (vorher 10,5 / 11 px) */
/* Schmale Spalte (Handy, Computer 1280–1439 px): etwas knapper, damit der Text nicht in Einzelwörtern umbricht.
   Gemessen wird die Breite der Textspalte im Kopf, nicht das Fenster. */
.rs-kopf__text { container-type: inline-size; }
@container (max-width: 400px) {
  .rs-heftkarte { grid-template-columns: 64px minmax(0, 1fr) auto; column-gap: 14px; padding: 16px; }
  .rs-heftkarte__hefte { width: 64px; }
  .rs-heftkarte__hefte img { width: 38px; }
  .rs-heftkarte__hefte img + img { margin-left: -22px; }
  .rs-heftkarte__titel { font-size: 15px; }
  .rs-heftkarte__zeile { font-size: 12.5px; }
}
/* Runde 6: ganz schmal (320–360 px) die Hefte oben, Text und Pfeil darunter über die ganze Breite – vorher brach der Text in einer
   ~130 px schmalen Spalte in fünf Zeilen */
@container (max-width: 340px) {
  .rs-heftkarte { grid-template-columns: minmax(0, 1fr) auto; row-gap: 14px; align-items: end; }
  .rs-heftkarte__hefte { grid-column: 1 / -1; justify-content: flex-start; padding-left: 6px; }
}
/* Runde 5 (14.10.2026): Lead links unter «Unsere Arbeiten.», rechts die Magazin-Karte – vorher standen Lead und Karte rechts,
   links unter der Überschrift blieb eine grosse Leerfläche */
.rg-kopf .rs-kopf__raster > .rs-kopf__lead { margin-top: 22px; }
.rg-kopf .rs-kopf__raster > .rs-kopf__lead + .rs-kopf__text { margin-top: 0; }   /* Abstand zur Karte gibt die Karte selbst (26 px) */
@media (min-width: 1024px) {
  .rg-kopf .rs-kopf__raster { align-items: end; }
  .rg-kopf .rs-kopf__titel { grid-column: 1 / span 7; grid-row: 2; }
  .rg-kopf .rs-kopf__raster > .rs-kopf__lead { grid-column: 1 / span 6; grid-row: 3; margin-top: 24px; max-width: 34em; }
  .rg-kopf .rs-kopf__text { grid-column: 8 / -1; grid-row: 2 / span 2; align-self: end; margin-top: 0; padding-bottom: 0; }
  .rg-kopf .rs-heftkarte { margin: 0 0 0 auto; }
}
@media (min-width: 1280px) { .rg-kopf .rs-kopf__text { grid-column: 9 / -1; } }
/* breite Karte: «Geschäfts­empfehlungen» nicht trennen (der weiche Trennstrich ist nur für die schmale Spalte bis 360 px) */
@container (min-width: 401px) { .rs-heftkarte__zeile { hyphens: none; } }
/* 1024–1279 px: Titel 7 Spalten, Text mit Karte 5 Spalten (mit 4 Spalten wären es ~145 px Text in der Karte, fünf Zeilen) */
@media (min-width: 1024px) and (max-width: 1279px) {
  .rs-kopf__titel { grid-column: 1 / span 7; }
  .rs-kopf__text { grid-column: 8 / span 5; }
}
@media (prefers-reduced-motion: no-preference) {
  /* der Fächer öffnet sich um je 3°, der Pfeil rückt nach rechts */
  .rs-heftkarte:hover .rs-heftkarte__hefte img:nth-child(1), .rs-heftkarte:focus-visible .rs-heftkarte__hefte img:nth-child(1) { transform: rotate(-11deg); }
  .rs-heftkarte:hover .rs-heftkarte__hefte img:nth-child(3), .rs-heftkarte:focus-visible .rs-heftkarte__hefte img:nth-child(3) { transform: rotate(11deg); }
  .rs-heftkarte:hover .rs-heftkarte__pfeil, .rs-heftkarte:focus-visible .rs-heftkarte__pfeil { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .rs-heftkarte__hefte img, .rs-heftkarte__pfeil { transition: none; }
}

/* ------------------------------------------------------------------ 2 Textblock neben bzw. unter einem Aufmacher */
.rs-auf__text { display: grid; gap: 14px; justify-items: start; align-content: start; max-width: 30em; }
.rs-auf__titel { font-family: var(--f-titel); font-stretch: 125%; font-weight: 600; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.2; letter-spacing: -.01em; color: var(--elfenbein); text-wrap: balance; }
.rs-auf__satz { font-size: 15.5px; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
/* ohne tabular-nums: Inter macht damit auch den Bindestrich breit («Instagram - Auftritt»); Ziffern sind ohnehin Versalziffern */
.rs-auf__preis { font-size: 14px; line-height: 1.5; font-weight: 500; color: var(--elfenbein); }
/* zwei Preise in einer Zeile, getrennt durch «·»; bricht die Zeile um, steht der zweite Preis bündig links – der Punkt liegt dann
   ausserhalb und ist abgeschnitten (gleiches Verfahren wie die Zahlenzeile in referenzen.css) */
.rs-auf__preis--zwei { display: flex; flex-wrap: wrap; align-items: baseline; margin-left: -1.2em; clip-path: inset(0 0 0 1.2em); }
.rs-auf__preis--zwei::before { content: ""; flex: none; width: 1.2em; }
.rs-auf__punkt { display: inline-block; width: 1.2em; text-align: center; color: var(--grau); }
/* neben dem Bild unten bündig: die letzte Grundlinie (Textlink, 44 px hoch) steht auf der letzten Zeile der Legende */
@media (min-width: 1024px) {
  .rg-web__eintrag--auf > .rs-auf__text, .rg-kachel--auf > .rs-auf__text { margin-bottom: -12px; }
}

/* ------------------------------------------------------------------ 3 Websites: Partner-Auftakt, Litonya als Aufmacher (8 + 4), Firmify und Gutjahr (6 + 6) */
/* Auftakt «Matrix Marketing ⁄ Lucravis» vor der Liste – grösser als die frühere Zeile darunter; der Hinweis bleibt daneben */
.partner.partner--abspann { margin: 0 0 clamp(32px, 4vw, 56px); }
.partner--abspann .partner__zeichen { font-size: clamp(13px, 1.2vw, 17px); gap: 16px; }
.partner--abspann .partner__matrix, .partner--abspann .partner__lucravis { font-size: 1em; letter-spacing: .2em; }
.partner--abspann .partner__matrix { margin-right: -.2em; }   /* Sperrung nach dem letzten Buchstaben: Balken steht mittig zwischen den Namen */
.partner--abspann .partner__balken { width: 6px; height: 11px; }   /* Feinschliff 10: gleich wie überall (vorher 1.05 × 1.9 em) */
/* schmale Handys: Zeichen bleibt einzeilig im Rahmen (bei 13 px und .2em wäre es 340 px breit, bei 320 px stehen 280 px zur Verfügung) */
@media (max-width: 389px) {
  .partner--abspann .partner__zeichen { font-size: clamp(11px, 3.3vw, 13px); gap: 12px; }
  .partner--abspann .partner__matrix, .partner--abspann .partner__lucravis { letter-spacing: .16em; }
  .partner--abspann .partner__matrix { margin-right: -.16em; }
}

@media (max-width: 1023px) {
  .rg-web__eintrag--auf > .rs-auf__text { margin-top: 20px; }
}
@media (min-width: 1024px) {
  .rg-web.rg-web--studio {
    grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); row-gap: clamp(48px, 5vw, 72px); max-width: none;
  }
  .rg-web--studio > li { grid-column: span 6; min-width: 0; }
  .rg-web.rg-web--studio > .rg-web__eintrag--auf {
    grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt);
  }
  .rg-web__eintrag--auf > .rg-web__arbeit { grid-column: 1 / span 8; grid-row: 1; min-width: 0; }
  .rg-web__eintrag--auf > .rs-auf__text { grid-column: 9 / -1; grid-row: 1; align-self: end; }
  /* Bühnen: Aufmacher 16 : 11 (PC 86 %, Handy 21 %), das Paar 4 : 3 (PC 86 %, Handy 24 %) – Handy bleibt in der Bühne, PC ganz sichtbar */
  .rg-web--studio .rg-web__eintrag--auf .rg-web__buehne { aspect-ratio: 16 / 11; }
  .rg-web--studio .rg-web__eintrag--auf .rg-web__pc { width: 86%; }
  .rg-web--studio .rg-web__eintrag--auf .rg-web__handy { width: 21%; }
  .rg-web--studio > li:not(.rg-web__eintrag--auf) .rg-web__buehne { aspect-ratio: 4 / 3; }
  .rg-web--studio > li:not(.rg-web__eintrag--auf) .rg-web__pc { width: 86%; }
  .rg-web--studio > li:not(.rg-web__eintrag--auf) .rg-web__handy { width: 24%; }
}
/* Feinschliff 17.10.2026 (Gutachten Runde 9): Litonya als geschlossener Aufmacher.
   – Der Computer bekommt unten einen schmalen Rahmen wie die Leiste oben: das Bildschirmfoto endet sauber statt mitten im Inhalt.
   – Ab 1024 px stehen Legende und Text (Lucravis, Preis, Link) zusammen rechts neben der Bühne, unten bündig mit dem Handy
     (vorher Legende links unter der Bühne und Text rechts: zwei getrennte Inseln). Die Legende bleibt in der figure (subgrid).
   – Tablet 600–1023 px: volle Breite und Bühne 16 : 11 wie am Computer (vorher 4 : 5 bei 560 px: das hohe Handy stand allein,
     daneben blieb es leer); Legende und Text darunter nebeneinander. */
.rg-web--studio .rg-web__pc::after { content: ""; display: block; height: 12px; border-top: 1px solid var(--linie); background: #161616; }
@media (min-width: 600px) and (max-width: 1023px) {
  .rg-web.rg-web--studio { max-width: none; }
  .rg-web--studio .rg-web__buehne { aspect-ratio: 16 / 11; }
  .rg-web--studio .rg-web__pc { width: 86%; }
  .rg-web--studio .rg-web__handy { width: 21%; }
  .rg-web.rg-web--studio > .rg-web__eintrag--auf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--spalt); }
  .rg-web__eintrag--auf > .rg-web__arbeit { grid-column: 1 / -1; grid-row: 1 / span 2; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; min-width: 0; }
  .rg-web__eintrag--auf > .rg-web__arbeit > .rs-arbeit__link { grid-column: 1 / -1; grid-row: 1; }
  .rg-web__eintrag--auf > .rg-web__arbeit > figcaption { grid-column: 1; grid-row: 2; align-self: start; }
  .rg-web__eintrag--auf > .rs-auf__text { grid-column: 2; grid-row: 2; align-self: start; margin-top: 14px; }
}
@media (min-width: 1024px) {
  .rg-web.rg-web--studio > .rg-web__eintrag--auf { grid-template-rows: minmax(0, 1fr) auto; }
  .rg-web__eintrag--auf > .rg-web__arbeit { grid-column: 1 / -1; grid-row: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; }
  .rg-web__eintrag--auf > .rg-web__arbeit > .rs-arbeit__link { grid-column: 1 / span 8; grid-row: 1 / -1; }
  .rg-web__eintrag--auf > .rg-web__arbeit > figcaption { grid-column: 9 / -1; grid-row: 1; align-self: end; margin-top: 0; }
  .rg-web__eintrag--auf > .rs-auf__text { grid-column: 9 / -1; grid-row: 2; align-self: end; margin: 22px 0 -12px; padding-top: 22px; border-top: 1px solid var(--linie); }
}

/* ------------------------------------------------------------------ 4 Logo & CI: IDR gross (Text links 4, Bild rechts 8), darunter 2 × 2 */
.rg-zeichen__arbeit--auf .rs-arbeit__link { overflow: hidden; }   /* das Bild setzt sich beim Auftritt im Rahmen (siehe Bewegung) */
@media (hover: hover) and (pointer: fine) {
  /* im festen Rahmen hebt sich das Bild nicht (sonst entstünde unten ein Spalt); heller wird es wie die übrigen Arbeiten */
  .rg-zeichen__arbeit--auf .rs-arbeit:hover img, .rg-zeichen__arbeit--auf .rs-arbeit__link:focus-visible img { transform: none; }
}
@media (max-width: 599px) {
  .rg-zeichen.rg-zeichen--studio { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }   /* im 2 × 2 wären die Bilder nur 170 px breit */
}
@media (max-width: 1023px) {
  .rg-zeichen__arbeit--auf > .rs-auf__text { margin-top: 20px; }
}
@media (min-width: 1024px) {
  .rg-zeichen.rg-zeichen--studio { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); row-gap: clamp(48px, 5vw, 72px); }
  .rg-zeichen.rg-zeichen--studio > li:nth-child(n) { grid-column: span 6; min-width: 0; }
  .rg-zeichen.rg-zeichen--studio > .rg-zeichen__arbeit--auf:nth-child(n) {
    grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt);
  }
  .rg-zeichen__arbeit--auf > .rs-arbeit { grid-column: 5 / -1; grid-row: 1; min-width: 0; }
  .rg-zeichen__arbeit--auf > .rs-auf__text { grid-column: 1 / span 4; grid-row: 1; align-self: center; }
}

/* ------------------------------------------------------------------ 5 Social Media: Lärchenbüel als Aufmacher (8 + 4), das Paar 6 + 6 */
@media (max-width: 1023px) {
  .rg-kachel--auf > .rs-auf__text { margin-top: 20px; }
}
@media (min-width: 1024px) {
  .rg-raster.rg-raster--studio { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); row-gap: clamp(48px, 5vw, 72px); }
  .rg-raster.rg-raster--studio > li { grid-column: span 6; min-width: 0; }
  .rg-raster.rg-raster--studio > .rg-kachel--auf {
    grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt);
  }
  .rg-kachel--auf > .rs-arbeit { grid-column: 1 / span 8; grid-row: 1; min-width: 0; }
  .rg-kachel--auf > .rs-auf__text { grid-column: 9 / -1; grid-row: 1; align-self: center; }   /* Runde 6: senkrecht mittig neben dem Bild (vorher unten, oben ~450 px leer) */
}

/* ================================================================== 6 Bewegung (nur mit JS; Endzustand = Normalzustand oben) */
/* Websites: «Matrix Marketing» und «Lucravis» gleiten beim Einblenden der Zeile vom Balken nach aussen an ihren Platz
   (data-reveal / .is-sichtbar aus main.js); der Balken zeichnet sich wie bisher (main.css) */
@media (prefers-reduced-motion: no-preference) {
  .js .partner--abspann .partner__matrix, .js .partner--abspann .partner__lucravis { transition: transform .8s var(--ease) .1s, opacity .8s var(--ease) .1s; }
  .js .partner--abspann[data-reveal]:not(.is-sichtbar) .partner__matrix { transform: translateX(14px); opacity: .4; }
  .js .partner--abspann[data-reveal]:not(.is-sichtbar) .partner__lucravis { transform: translateX(-14px); opacity: .4; }
}

/* Logo & CI, IDR: das Listenelement bleibt ruhig (überschreibt .js [data-kachel]:not(.is-da) aus referenzen-story.css);
   das Bild setzt sich im Rahmen von 105 % auf 100 % und blendet ein, Legende und Text folgen 0,3 s später.
   Danach zeichnet sich die Goldlinie wie bisher. Der Beobachter in referenzen-story.js setzt .is-da. */
.js .rg-zeichen__arbeit--auf[data-kachel]:not(.is-da) { opacity: 1; transform: none; }
.js .rg-zeichen__arbeit--auf .rs-arbeit__link img { transition: opacity 1.2s var(--ease), scale 1.2s var(--ease), transform .6s var(--ease), filter .6s var(--ease); }
.js .rg-zeichen__arbeit--auf:not(.is-da) .rs-arbeit__link img { opacity: 0; }
.js .rg-zeichen__arbeit--auf figcaption, .js .rg-zeichen__arbeit--auf > .rs-auf__text { transition: opacity .9s var(--ease) .3s; }
.js .rg-zeichen__arbeit--auf:not(.is-da) figcaption, .js .rg-zeichen__arbeit--auf:not(.is-da) > .rs-auf__text { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .js .rg-zeichen__arbeit--auf:not(.is-da) .rs-arbeit__link img { scale: 1.05; }
}
/* Logo & CI, 2 × 2: Reihe für Reihe von links nach rechts. Die Staffelung --i aus referenzen-story.js zählt noch wie die frühere
   Fünferreihe (Heber 0,42 s, grad 0 s) – in der zweiten Reihe kam sonst rechts vor links. Einspaltig ohne Wartezeit. */
@media (prefers-reduced-motion: no-preference) {
  .js .rg-zeichen--studio > li:nth-child(2n)[data-kachel] { transition-delay: 0s; }
  .js .rg-zeichen--studio > li:nth-child(2n+3)[data-kachel] { transition-delay: .14s; }
}
@media (max-width: 599px) and (prefers-reduced-motion: no-preference) {
  .js .rg-zeichen--studio > li:nth-child(n)[data-kachel] { transition-delay: 0s; }
}

/* Social Media: der Aufmacher fährt von links ein; die beiden anderen erscheinen wie bisher Kachel für Kachel */
.js .rg-kachel--auf[data-kachel] { transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.js .rg-kachel--auf[data-kachel]:not(.is-da) { opacity: 0; transform: translate3d(-32px, 0, 0); }
@media (prefers-reduced-motion: reduce) {
  .js .rg-kachel--auf[data-kachel], .js .rg-kachel--auf[data-kachel]:not(.is-da) { transform: none; }
  .js .rg-kachel--auf[data-kachel] { transition: opacity .9s var(--ease); }
}

@media print {
  .js .rg-zeichen__arbeit--auf .rs-arbeit__link img, .js .rg-zeichen__arbeit--auf figcaption, .js .rg-zeichen__arbeit--auf > .rs-auf__text,
  .js .rg-kachel--auf[data-kachel], .js .partner--abspann .partner__matrix, .js .partner--abspann .partner__lucravis {
    opacity: 1 !important; transform: none !important; scale: 1 !important;
  }
  .rs-heftkarte { break-inside: avoid; }
}

/* Runde 9 (14.10.2026): /arbeiten ist die vollständige Sammlung – zu jeder Arbeit eine kurze, neutrale Zeile zur gestalterischen
   Lösung (nur was im Bild zu sehen ist); /leistungen zeigt je Leistung nur eine Auswahl und verlinkt hierher */
.arbeit__loesung { display: block; margin-top: 6px; max-width: 34em; font-size: 13.5px; line-height: 1.45; color: var(--text-2); text-wrap: pretty; }
@media (min-width: 1024px) { .arbeit__loesung { font-size: 14px; } }

/* Feinschliff 10 (17.10.2026): Verweis im Social-Aufmacher auf den Flyer «Wildzeit» weiter oben – jede Arbeit nur einmal pro Seite.
   Link wie .partner__link; Polster nur oben/unten (Inline), damit die Trefferfläche mindestens 24 px hoch ist, ohne die Zeilen zu verschieben */
.rs-auf__verweis { padding-block: 5px; color: var(--elfenbein); text-decoration: underline; text-decoration-color: var(--linie-stark); text-underline-offset: 3px; transition: color .3s var(--ease), text-decoration-color .3s var(--ease); }
.rs-auf__verweis:hover { color: var(--gold); text-decoration-color: var(--gold); }