/* ==============================================================
   referenzen.css  ·  Besitzer: P9 Referenzen  ·  v4 „Passer“ (25.09.2026)
   Plan 8.6 K54-K57, 11.5. Nur Tokens (tokens.css): keine eigenen
   Farben, Radien, Schatten, Easings, keine Hex-Werte.

   Inhalt
     1 Gemeinsame Referenz-Bausteine (auch Start, Staedte, Leistungsseiten):
       .refs/.ref (Browser-Rahmen), .vrefs/.vref (Filmkarten), .grefs,
       .ref-eckdaten. v3-Altbestand, auf Tokens umgestellt; Kleinschrift
       jetzt auf ALLEN Breiten >= 14 px (vorher Desktop 11,5-11,8 px).
     2 /referenzen.php (Praefix rf-):
       2a Hero mit Browser-Stapel K54 (--p aus kern.js, nur Desktop)
       2b Filter K55 (Radio + :has(), ohne JS)
       2c Webseiten als Browser-Boegen K55 mit Orts-Etikett
       2d Filme K56: Hauptfilme + Film-Streifen (Perforation, Snap)
       2e Grafik-Liste K57 (offen, zweispaltig; mobil 6 + Aufklapper)
     3 Reduzierte Bewegung
   Bewegung: nur translate/scale/rotate, nie transform (Plan 9.1).
   ============================================================== */

/* ---- 1 Gemeinsame Bausteine ------------------------------------ */
.ref-eckdaten{display:flex;flex-wrap:wrap;gap:.6rem 2.2rem;margin:1.6rem 0 0}
@media (max-width:47.99rem){   /* fix2 (Jury): mobil 2 x 2 statt 3 + 1 */
  .ref-eckdaten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.5rem}
}
.ref-eckdaten div{display:grid;gap:.1rem}
.ref-eckdaten dt{font-family:var(--schrift-mono);font-size:.875rem;color:var(--accent-text)}
.ref-eckdaten dd{margin:0;font-family:var(--schrift-titel);font-weight:700;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1;letter-spacing:-.03em}

.refs{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.2rem,3vw,2.2rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,26rem),1fr))}
.ref{min-width:0}
.ref-link{display:grid;gap:.9rem;text-decoration:none;color:var(--text);height:100%}

.ref-text{display:grid;gap:.25rem}
.ref-meta{font-family:var(--schrift-mono);font-size:.875rem;color:var(--accent-text)}
.ref-name{font-family:var(--schrift-titel);font-weight:700;font-size:1.2rem;letter-spacing:-.012em}
.ref-pfeil{color:var(--accent-text);display:inline-block;transition:translate var(--t-kurz) var(--ease)}
.ref-kurz{color:var(--muted);font-size:.95rem}
@media (hover:hover) and (pointer:fine){
  
  
  .ref-link:hover .ref-pfeil{translate:2px -2px}
}

.ref-link:focus-visible{outline:3px solid var(--fokus);outline-offset:6px;border-radius:var(--r-bogen)}

/* Filmkarten (kh_videos() auf Leistungs- und Staedteseiten, hier in 2d) */
.vrefs{list-style:none;margin:0;padding:0;display:grid;gap:clamp(.9rem,2vw,1.4rem);grid-template-columns:repeat(auto-fill,minmax(min(100%,15.5rem),1fr))}
.vref-link{display:grid;gap:.4rem;text-decoration:none;color:var(--text)}
.vref-bild{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--r-bogen);overflow:hidden;background:var(--schild);border:1px solid var(--line-2)}
.vref-bild img{width:100%;height:100%;object-fit:cover;display:block;transition:scale var(--t-lang) var(--ease)}
/* fix2: AVIF vor WebP - <picture> darf das Layout nicht aendern */
.vref-bild picture,.rundgang-bild picture{display:contents}
.vref-play{position:absolute;left:50%;top:50%;translate:-50% -50%;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:color-mix(in oklch, var(--schild) 80%, transparent);color:var(--cyan);border:2px solid var(--magenta);
  transition:scale var(--t-kurz) var(--ease)}
@media (hover:hover) and (pointer:fine){
  .vref-link:hover img{scale:1.03}
  .vref-link:hover .vref-play{scale:1.08}
}
.vref-link:focus-visible{outline:3px solid var(--fokus);outline-offset:5px;border-radius:var(--r-bogen)}
.vref-titel{font-family:var(--schrift-titel);font-weight:650;line-height:1.3}
.vref-kunde{font-family:var(--schrift-mono);font-size:.875rem;color:var(--accent-text)}

.grefs{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,16rem),1fr))}
.grefs li{display:grid;gap:.15rem;padding:.8rem 1rem;background:var(--flaeche-licht);border:1px solid var(--line);border-radius:var(--r-chip)}
.gref-name{font-family:var(--schrift-titel);font-weight:650}
.gref-art{font-size:.9375rem;color:var(--muted)}

/* ==============================================================
   2 /referenzen.php
   ============================================================== */
.rf-teil h2{max-width:26ch}
.rf-teil .sub{margin-bottom:0}
.rf-teil > .weiter{padding-block:clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem) 0}
/* Webseiten, Filme, Grafik sind EIN Thema (Referenzen): innen die kleine
   Abstandsstufe (Plan 7), die Grenze macht der Flaechenwechsel. */
.rf-teil.kapitel{padding-block:var(--abstand-klein)}
.rf-teil .kicker{hyphens:manual}

/* ---- 2a Hero + Browser-Stapel K54 ------------------------------- */
.rf-hero{padding-block:clamp(1.25rem, .9rem + 1.6vw, 2.25rem) clamp(1.5rem, 1rem + 2vw, 2.5rem);overflow-x:clip}
.rf-hero-innen{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem, 1.4rem + 2.4vw, 3.75rem);align-items:center}
.rf-hero-innen > *{min-width:0}
@media (min-width:60rem){
  .rf-hero-innen{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
}
.rf-hero .brotkrumen{padding:0;margin:0 0 clamp(1.25rem, 1rem + 1.2vw, 2.25rem)}
.rf-hero .kicker{hyphens:manual}
.rf-hero h1{margin-bottom:1.1rem}
.rf-lead{margin:0 0 1.75rem}

/* Eckdaten als Passer-Zahlen: Zahl oben, Etikett darunter (DOM bleibt dt, dd) */
.rf-hero .ref-eckdaten{
  margin:0;gap:1rem clamp(1.5rem, 1rem + 2vw, 2.75rem);
  padding-top:1.1rem;border-top:1px solid var(--line-2);
}
.rf-hero .ref-eckdaten div{display:flex;flex-direction:column-reverse;gap:.35rem;position:relative}
.rf-hero .ref-eckdaten dd{
  font-weight:780;font-stretch:88%;font-size:clamp(1.9rem, 1.4rem + 1.8vw, 2.75rem);line-height:.95;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--text);
}
.rf-hero .ref-eckdaten dt{
  font-family:var(--schrift-titel);font-weight:620;font-stretch:96%;font-size:.875rem;line-height:1.3;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  hyphens:manual;
}
/* 48-76rem: "Webseiten hier gezeigt" bricht, damit alle vier Zahlen in einer Reihe stehen */
@media (min-width:48rem) and (max-width:75.99rem){
  .rf-hero .ref-eckdaten dt{max-width:10rem}
}
/* Fehlregister-Strich ueber jeder Zahl (Cyan-Platte, Magenta versetzt) */
.rf-hero .ref-eckdaten div::before{
  content:"";order:3;width:22px;height:3px;margin-bottom:.35rem;
  background:var(--platte);box-shadow:2px 2px 0 var(--haar);
}

.rf-stapel{position:relative;width:100%;max-width:36rem;margin-inline:auto;aspect-ratio:10 / 7.4}
.rf-stapel .rf-s{position:absolute;margin:0;width:70%}
.rf-stapel .bogen-bild img{aspect-ratio:1024 / 555;object-fit:cover;object-position:top}
/* Nur der vordere Bogen traegt die Magenta-Haarlinie (Jury 25.09.: zu viele
   ueberlappende Kanten wirken wie ein Sammelalbum). */
.rf-stapel .rf-s:not(.rf-s1)::before,.rf-stapel .rf-s:not(.rf-s1)::after{display:none}
.rf-s1{left:8px;bottom:var(--versatz);z-index:3}
.rf-s2{left:calc(30% - var(--versatz));top:0;z-index:2}
.rf-s3{display:none}
@media (min-width:60rem){
  .rf-stapel{max-width:none;aspect-ratio:10 / 8.4}
  .rf-s1{left:5%}
  .rf-s2{top:22%}
  .rf-s3{display:block;left:0;top:0;z-index:1}
}
/* Der Stapel ist Deko (aria-hidden, Bilder alt=""): kein Zeigen-Effekt. */
.rf-stapel .bogen{pointer-events:none}
/* K54: beim Scrollen ziehen die Boegen auseinander (--p 0..1, kern.js).
   Ohne JS und bei reduzierter Bewegung fehlt --p: der Stapel steht. */
@media (min-width:60rem) and (prefers-reduced-motion:no-preference){
  .rf-s1{translate:calc(var(--p, 0) * -5%) calc(var(--p, 0) * 3rem)}
  .rf-s2{translate:calc(var(--p, 0) * 7%) calc(var(--p, 0) * .5rem)}
  .rf-s3{translate:calc(var(--p, 0) * -4%) calc(var(--p, 0) * -2.5rem)}
}

/* ---- 2b Filter K55 --------------------------------------------- */
.rf-filter{padding-block:0 clamp(1.25rem, .9rem + 1.5vw, 2rem)}
.rf-filter-innen{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1.5rem;
}
.rf-wahl{border:0;margin:0;padding:0;min-width:0}
.rf-wahl legend{float:left;margin:0 1rem 0 0;padding:.8rem 0}
.rf-chips{position:relative;display:flex;flex-wrap:wrap;gap:.5rem}
.rf-radio{position:absolute;left:0;top:0;width:1px;height:1px;margin:0;opacity:0}
.rf-chip{
  display:inline-flex;align-items:center;min-height:44px;padding:.45rem 1rem;cursor:pointer;
  font-family:var(--schrift-titel);font-weight:640;font-stretch:96%;font-size:1rem;line-height:1.2;
  color:var(--text);background-color:var(--flaeche-licht);
  border:1px solid var(--border-feld);border-radius:var(--r-chip);
  transition:background-color var(--t-kurz) var(--ease),box-shadow var(--t-kurz) var(--ease),translate var(--t-kurz) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .rf-chip:hover{background-color:var(--wash)}
}
.rf-radio:checked + .rf-chip{
  background-color:var(--knopf-fill);color:var(--on-knopf);border-color:var(--knopf-fill);
  box-shadow:3px 3px 0 var(--haar);translate:-1px -1px;
}
.rf-radio:focus-visible + .rf-chip{outline:3px solid var(--fokus);outline-offset:2px}
.rf-kontakt-link{
  display:inline-flex;align-items:center;gap:.4rem;min-height:44px;
  font-family:var(--schrift-titel);font-weight:640;font-stretch:96%;font-size:1rem;color:var(--text);
  text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:.22em;
}
.rf-kontakt-link::after{content:"\2193" / "";color:var(--accent-text)}
.rf-kontakt-link:hover{text-decoration-color:currentColor;text-decoration-thickness:2px}

/* Ausblenden je Wahl. Ohne :has() greift keine Regel: alles bleibt sichtbar. */
body:has(#rf-web:checked)    .rf-teil:not([data-rf="web"]),
body:has(#rf-film:checked)   .rf-teil:not([data-rf="film"]),
body:has(#rf-grafik:checked) .rf-teil:not([data-rf="grafik"]){display:none}

/* ---- 2c Webseiten als Browser-Boegen K55 ------------------------ */
.rf-refs{
  margin:clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem) 0 0;
  gap:clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem) clamp(1.25rem, .9rem + 1.5vw, 2.25rem);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:48rem){ .rf-refs{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:72rem){ .rf-refs{grid-template-columns:repeat(3,minmax(0,1fr))} }
.rf-ref{container-type:inline-size}
.rf-ref-link{gap:.35rem;align-content:start;grid-template-columns:minmax(0,1fr)}
/* unter 48rem: Wischreihe mit sichtbarer Nachbarkarte (wie Start, K23) -
   spart mobil rund 2,5 Bildschirme. position:relative haelt .sr-only im Scroller. */
@media (max-width:47.99rem){
  .rf-refs{
    grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:min(84%, 21rem);
    gap:1rem;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--gut);margin-inline:calc(var(--gut) * -1);
    padding:.75rem var(--gut) .75rem;
    scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;
  }
  .rf-ref{scroll-snap-align:start;position:relative}
}
.rf-ref-link:focus-visible{outline:3px solid var(--fokus);outline-offset:4px;border-radius:var(--r-bogen)}
.rf-ref-bild{position:relative;display:block}
.rf-ref-bild .bogen-bild img{aspect-ratio:1024 / 555;object-fit:cover;object-position:top;transition:scale var(--t-lang) var(--ease)}
.rf-ref-link:focus-visible .bogen{translate:0 -4px}
@media (hover:hover) and (pointer:fine){
  .rf-ref-link:hover .bogen-bild img{scale:1.03}
  .rf-ref-link:hover .ref-pfeil{translate:2px -2px}
}
/* Orts-Etikett: klebt schraeg ueber der Unterkante des Bogens, rechts -
   Fensterleiste und Adresse oben bleiben frei. Wiederholt nur den Ort
   aus der Metazeile (aria-hidden). */
.rf-ort{
  position:absolute;bottom:calc(var(--versatz) - .35rem);right:calc(var(--versatz) + .75rem);z-index:2;margin:0;
  max-width:min(70%, 16rem);padding:.3rem .6rem;text-wrap:balance;hyphens:manual;
  background-color:var(--flaeche-licht);color:var(--text);
  border-radius:var(--r-chip);box-shadow:3px 3px 0 var(--platte), var(--sh-1);
  rotate:-2deg;
}
.rf-ref .ref-text{gap:.3rem;padding-inline:.15rem .5rem}
.rf-ref .ref-meta{
  font-family:var(--schrift-titel);font-weight:620;font-stretch:96%;font-size:.875rem;line-height:1.35;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted);hyphens:manual;
}
.rf-ref .ref-name{font-weight:700;font-stretch:92%;font-size:clamp(1.2rem, 1.1rem + .4vw, 1.35rem);line-height:1.2}
.rf-ref .ref-kurz{font-size:1rem;line-height:1.5}
.rf-web .micro{margin-top:clamp(1.5rem, 1.2rem + 1vw, 2rem)}

/* ---- 2d Filme K56 ----------------------------------------------- */
.rf-filme{--loch:var(--flaeche-wash)}   /* Lochfarbe = Flaeche der Sektion (vor .schild aufgeloest) */
.rf-filme .vref-titel{font-weight:660;font-stretch:96%}
.rf-filme .vref-kunde{
  font-family:var(--schrift-titel);font-weight:620;font-stretch:96%;font-size:.875rem;line-height:1.35;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
}
/* Hauptfilme: gross, 16:9, als Bogen (weisser Rand, Cyan-Platte) */
.rf-haupt{
  list-style:none;margin:clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem) 0 0;padding:0;
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.75rem, 1.2rem + 2vw, 3rem);
}
@media (min-width:48rem){ .rf-haupt{grid-template-columns:repeat(2,minmax(0,1fr))} }
.rf-haupt .vref{min-width:0}
.rf-haupt .vref-link{gap:.6rem}
.rf-haupt .vref-bild{
  margin:0 var(--versatz) var(--versatz) 0;
  border:clamp(8px, .6vw, 10px) solid var(--flaeche-licht);border-radius:var(--r-bogen);
  box-shadow:var(--versatz) var(--versatz) 0 var(--platte), var(--sh-2);
}
.rf-haupt .vref-play{width:68px;height:68px}
.rf-haupt .vref-play svg{width:28px;height:28px}
.rf-haupt .vref-titel{font-size:clamp(1.15rem, 1.05rem + .45vw, 1.35rem);line-height:1.25}

/* Film-Streifen: dunkles Band (.schild-Tokens) mit Perforation, die mit
   dem Inhalt mitlaeuft (background-attachment: local). */
.rf-streifen-rahmen{margin-top:clamp(1.5rem, 1.2rem + 1vw, 2rem)}
.rf-pfeile{display:flex;justify-content:flex-end;gap:.5rem;margin-bottom:.5rem}
.rf-pfeile[hidden]{display:none}
.rf-pfeil{
  display:inline-grid;place-items:center;width:44px;height:44px;padding:0;cursor:pointer;
  color:var(--text);background-color:var(--flaeche-licht);
  border:2px solid var(--border-feld);border-radius:var(--r-knopf);
  transition:background-color var(--t-kurz) var(--ease),translate var(--t-kurz) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .rf-pfeil:not([aria-disabled="true"]):hover{background-color:var(--wash);translate:0 -2px}
}
.rf-pfeil[aria-disabled="true"]{cursor:default;opacity:.45}
.rf-streifen{
  --loch-y:9px;
  position:relative;border-radius:var(--r-bogen);
  padding:28px 0;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:1.25rem;
  scrollbar-width:thin;scrollbar-color:var(--muted) transparent;
  background:
    radial-gradient(5px 3.5px at 50% 50%, var(--loch) 92%, transparent 100%) 0 var(--loch-y) / 22px 8px repeat-x local,
    radial-gradient(5px 3.5px at 50% 50%, var(--loch) 92%, transparent 100%) 0 calc(100% - var(--loch-y)) / 22px 8px repeat-x local,
    var(--bg);
}
.rf-streifen:focus-visible{outline:3px solid var(--accent-text);outline-offset:3px}
.rf-streifen-liste{
  list-style:none;margin:0;padding:0 1.25rem;
  display:grid;grid-auto-flow:column;grid-auto-columns:min(70vw, 16rem);gap:1rem;width:max-content;
}
.rf-streifen-liste .vref{min-width:0;scroll-snap-align:start}
.rf-streifen .vref-bild{border:0;border-radius:3px;background:var(--karte)}
.rf-streifen .vref-play{width:44px;height:44px}
.rf-streifen .vref-titel{font-size:1rem;color:var(--text)}
.rf-streifen .vref-link{gap:.45rem}
.rf-streifen .vref-link:focus-visible{outline-offset:3px}

/* ---- 2e Grafik-Liste K57 ---------------------------------------- */
.rf-grefs{
  margin:0;gap:0 clamp(2rem, 1.5rem + 2.5vw, 4rem);grid-template-columns:minmax(0,1fr);
}
.rf-grafik .sub + .rf-grefs,.rf-grafik .entwurf-hinweis + .rf-grefs{margin-top:clamp(1.5rem, 1.2rem + 1vw, 2.25rem)}
.rf-grafik .entwurf-hinweis{margin-top:1.25rem}
@media (min-width:48rem){ .rf-grefs{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:72rem){ .rf-grefs{grid-template-columns:repeat(3,minmax(0,1fr))} }
.rf-grefs li{
  min-width:0;gap:.2rem;padding:.9rem 0 1rem;align-content:start;
  background:none;border:0;border-top:1px solid var(--line-2);border-radius:0;
}
.rf-grefs .gref-name{hyphens:manual;font-weight:680;font-stretch:96%;font-size:1.0625rem;line-height:1.3}
.rf-grefs .gref-art{font-size:.9375rem;line-height:1.5}
.rf-g-mehr{margin:0}
.rf-g-mehr > summary{
  display:inline-flex;align-items:center;gap:.5rem;min-height:44px;margin-top:.75rem;padding:.5rem 1rem;cursor:pointer;
  font-family:var(--schrift-titel);font-weight:640;font-stretch:96%;font-size:1rem;color:var(--text);
  border:2px solid var(--border-feld);border-radius:var(--r-knopf);list-style:none;
}
.rf-g-mehr > summary::-webkit-details-marker{display:none}
.rf-g-mehr > summary::after{content:"\2193" / "";color:var(--accent-text)}
.rf-g-mehr[open] > summary{display:none}

/* ---- 3 Reduzierte Bewegung ------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .ref-pfeil,.vref-bild img,.vref-play,.rf-chip,.rf-pfeil,.rf-ref-bild .bogen-bild img{transition:none}
  .rf-streifen{scroll-behavior:auto}
}

/* ---- 4 Sprungziele (06.10.2026) ---------------------------------
   Die Unterseiten verlinken einzelne Arbeiten (#web-…, #film-…, #grafik-…).
   Das angesprungene Element traegt den Passer-Versatz der Seite (Cyan-Platte
   + Magenta-Haar), damit man sieht, welches gemeint ist. Kein Blinken. */
.rf-ref:target .bogen,.vref:target .vref-bild{
  outline:3px solid var(--accent-fill);outline-offset:5px;
}
.rf-grefs li:target{
  padding-inline:.9rem;border-top-color:transparent;border-radius:var(--r-chip);
  background:var(--flaeche-licht);box-shadow:5px 5px 0 var(--platte), -3px -3px 0 -2px var(--haar);
}
.ohne-deko .rf-grefs li:target{box-shadow:none;outline:2px solid var(--line-2)}

/* ---- 5 Arbeitsproben mit Bild (13.10.2026, Peter) -----------------
   Die bebilderten Grafikarbeiten stehen als Karten vor der Textliste. Die Bilder
   sind Peters Galerie-Tafeln mit eingebrannter Beschriftung: darum ganz im
   4:3-Rahmen (contain auf Weiss), nie beschnitten. Klick = grosse Fassung. */
.rf-gproben{
  list-style:none;margin:clamp(1.5rem, 1.2rem + 1vw, 2.25rem) 0 0;padding:0;
  display:grid;gap:clamp(1.25rem, 1rem + 1vw, 2rem);grid-template-columns:minmax(0,1fr);
}
@media (min-width:48rem){ .rf-gproben{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:72rem){ .rf-gproben{grid-template-columns:repeat(3,minmax(0,1fr))} }
.rf-gprobe{
  min-width:0;display:grid;gap:.2rem;align-content:start;padding:.75rem .75rem 1rem;
  background:var(--flaeche-licht);border:1px solid var(--line);border-radius:var(--r-karte);
}
.rf-gprobe-bild{display:block;margin-bottom:.6rem;border-radius:var(--r-chip);overflow:hidden;background-color:var(--lichtkasten)}
.rf-gprobe-bild img{display:block;width:100%;height:auto;aspect-ratio:4 / 3;object-fit:contain;transition:scale var(--t-mittel) var(--ease)}
@media (hover:hover) and (pointer:fine){ .rf-gprobe-bild:hover img{scale:1.03} }
.rf-gprobe .gref-name{hyphens:manual;font-family:var(--schrift-titel);font-weight:680;font-stretch:96%;font-size:1.0625rem;line-height:1.3}
.rf-gprobe .gref-art{font-size:.9375rem;line-height:1.5;color:var(--muted)}
.rf-g-weitere-h{margin:clamp(2rem, 1.6rem + 1.5vw, 3rem) 0 .25rem}
/* Sprungziel: dieselbe Passer-Platte wie bei den Listeneintraegen */
.rf-gprobe:target{box-shadow:5px 5px 0 var(--platte), -3px -3px 0 -2px var(--haar)}
.ohne-deko .rf-gprobe:target{box-shadow:none;outline:2px solid var(--line-2)}
@media (prefers-reduced-motion:reduce){ .rf-gprobe-bild img{transition:none} }