/* ==========================================================================
   Referenzen – /referenzen, /referenzen/{slug} und der Startseiten-Abschnitt
   Markeneigene Darstellung: echte Screenshots in Geräte-Rahmen (Browser + Smartphone)
   auf einer ruhigen Bühne in der Hausfarbe (Pfirsich). Die Projektfarbe steckt nur im
   Wappen (Marktritter-Schild mit #, vollständig sichtbar) und in der Projektnummer.
   Titel in normaler Schreibweise NEBEN/UNTER dem Bild – keine Text-über-Bild-Kacheln.
   Projektfarbe per Inline-Variable: --acc (Fläche) / --acc-ink (Text auf --acc, WCAG ≥ 4.5)
   ========================================================================== */

/* Kleintext-Grau mit sicherem Kontrast (≥ 4.5 : 1 auf Creme und Pfirsich) */
.ref-stage, .ref-card, .ref-hero, .ref-filter, .ref-dhead, .ref-facts, .ref-index, .ref-pager { --ref-muted: #6A6058; }

/* Fokus: Ink statt Orange (Orange auf Creme erreicht nur ~2,4 : 1) */
.ref-more:focus-visible, .ref-ext:focus-visible, .ref-modfilter__btn:focus-visible,
.ref-pager__link:focus-visible, .ref-pager__all:focus-visible, .ref-facts__link:focus-visible,
.home-refs__foot .btn:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 3px;
}
.ref-more:focus-visible, .ref-ext:focus-visible, .ref-pager__link:focus-visible, .ref-facts__link:focus-visible { border-radius: 4px; }

/* ---------- Bühne mit Geräten ----------
   Maße relativ zur Bühne (Container-Einheiten): --bw Browserbreite, --pw Handybreite, --cw Wappenbreite.
   Standard: Browser links, Handy rechts unten, Wappen rechts oben. .is-flip spiegelt. */
.ref-stage {
  --acc: var(--orange);
  --bw: 72cqw; --pw: 19cqw; --cw: 11.5cqw;
  position: relative; isolation: isolate; overflow: hidden;
  aspect-ratio: 16 / 11;
  border-radius: var(--r-lg);
  background: var(--peach-2);
  container-type: inline-size;
}
.ref-stage__crest {
  position: absolute; z-index: 0; pointer-events: none;
  width: var(--cw); height: auto; right: 7.5%; top: 6.5%;
  transform: rotate(-6deg);
  filter: drop-shadow(0 6px 10px rgba(60, 30, 10, .12));
}
.ref-stage__shield { fill: var(--acc); }
.ref-stage__hash { fill: none; stroke: var(--acc-ink, #fff); stroke-width: 3.2; }

.ref-browser {
  position: absolute; z-index: 1; left: 6%; top: 9%; width: var(--bw);
  border-radius: clamp(8px, 1.5cqw, 16px); overflow: hidden;
  background: #141414;
  box-shadow: 0 2px 4px rgba(20,20,20,.08), 0 28px 50px -22px rgba(20,20,20,.5);
  transition: transform .6s var(--ease);
}
.ref-browser__bar {
  display: flex; align-items: center; gap: 2cqw;
  height: clamp(16px, 3.9cqw, 40px); padding: 0 1.8cqw;
}
.ref-browser__dots { display: flex; gap: .8cqw; flex: none; }
.ref-browser__dots i { display: block; width: clamp(4px, .95cqw, 10px); aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.26); }
.ref-browser__url {
  flex: 0 1 64%; min-width: 0; margin-inline: auto;
  display: flex; align-items: center; justify-content: center; gap: .5em;
  height: 64%; padding: 0 .7em; border-radius: clamp(4px, .9cqw, 8px);
  background: rgba(255,255,255,.09); color: rgba(255,255,255,.8);
  font-size: clamp(7px, 1.35cqw, 13px); font-weight: 500; line-height: 1; letter-spacing: 0; font-kerning: normal; white-space: nowrap;
  text-rendering: geometricPrecision; /* ohne: bei 7 px gerundete Glyphen-Abstände → Lücken („ne ue -he ck…“) */
}
.ref-browser__url span { overflow: hidden; text-overflow: ellipsis; }
.ref-browser__url .icon { flex: none; width: 1em; height: 1em; opacity: .7; }
.ref-browser__screen { background: #fff; }
.ref-browser__screen img, .ref-phone__screen img { display: block; width: 100%; height: auto; }

/* Smartphone: der Lautsprecher-Schlitz sitzt im eigenen oberen Rahmen – der Screenshot beginnt darunter */
.ref-phone {
  position: absolute; z-index: 2; right: 6%; bottom: 7%; width: var(--pw);
  padding: calc(var(--pw) * .125) calc(var(--pw) * .045) calc(var(--pw) * .05);
  border-radius: calc(var(--pw) * .17);
  background: #141414;
  box-shadow: 0 2px 4px rgba(20,20,20,.1), 0 26px 44px -18px rgba(20,20,20,.55);
  transition: transform .6s var(--ease);
}
.ref-phone::before { /* Lautsprecher-Schlitz */
  content: ""; position: absolute; left: 50%; top: calc(var(--pw) * .048); transform: translateX(-50%);
  width: 24%; height: max(2px, calc(var(--pw) * .032)); border-radius: 99px; background: rgba(255,255,255,.2);
}
.ref-phone__screen { position: relative; overflow: hidden; aspect-ratio: 390 / 844; border-radius: calc(var(--pw) * .1); background: #fff; }
.ref-phone__screen img { height: 100%; object-fit: cover; object-position: top; }

.ref-stage__hit { position: absolute; inset: 0; z-index: 3; }
.ref-card:hover .ref-browser { transform: translateY(-6px); }
.ref-card:hover .ref-phone { transform: translateY(-12px); }

/* Gespiegelt (breite Karten im Wechsel): Browser rechts, Handy links, Wappen links */
.is-flip .ref-browser { left: auto; right: 6%; }
.is-flip .ref-phone { right: auto; left: 6%; }
.is-flip .ref-stage__crest { right: auto; left: 7.5%; transform: rotate(6deg); }

/* Große Bühne auf der Detailseite */
.ref-stage--hero { --bw: 74cqw; --pw: 18cqw; --cw: 10cqw; aspect-ratio: 16 / 10; border-radius: var(--r-xl); }
.ref-stage--hero .ref-browser { left: 5%; top: 8%; }
.ref-stage--hero .ref-phone { right: 5%; bottom: 7%; }
.ref-stage--hero .ref-stage__crest { right: 6.5%; top: 7%; }

/* Mobil: das Handy wird zur Hauptfigur (angeschnitten unten), Browser oben links, Wappen frei unten links */
@media (max-width: 760px) {
  .ref-stage { --bw: 74cqw; --pw: 38cqw; --cw: 17cqw; aspect-ratio: 1 / 1; }
  .ref-browser { left: 5%; top: 7%; }
  .ref-phone { right: 6%; bottom: -12%; }
  .ref-stage__crest { top: auto; right: auto; left: 13%; bottom: 13%; }
  .is-flip .ref-browser { left: auto; right: 5%; }
  .is-flip .ref-phone { left: 6%; right: auto; }
  .is-flip .ref-stage__crest { left: auto; right: 13%; }
  .ref-stage--hero { --bw: 80cqw; --pw: 46cqw; --cw: 19cqw; aspect-ratio: 4 / 5; border-radius: var(--r-lg); }
  .ref-stage--hero .ref-browser { left: 5%; top: 5%; }
  .ref-stage--hero .ref-phone { right: 6%; bottom: -9%; }
  .ref-stage--hero .ref-stage__crest { top: auto; right: auto; left: 12%; bottom: 13%; }
}

/* ---------- Karte (Text neben/unter der Bühne) ---------- */
.ref-card { --acc: var(--orange); display: grid; gap: clamp(20px, 2.4vw, 32px); align-content: start; }
.ref-card__body { min-width: 0; }
.ref-card__kicker { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: .92rem; line-height: 1.4; color: var(--ref-muted); }
.ref-card__num {
  align-self: center; padding: 3px 7px 2px; border-radius: 7px;
  background: var(--acc); color: var(--acc-ink);
  font-family: var(--f-display); font-weight: 800; font-stretch: 110%; font-size: .8rem; line-height: 1.2; letter-spacing: .02em;
}
.ref-card__who { font-weight: 600; color: var(--ink); }
.ref-card__title {
  margin-top: 10px;
  font-family: var(--f-display); font-weight: 800; font-stretch: 112%;
  font-size: clamp(1.45rem, 2.2vw, 2.05rem); line-height: 1.06; letter-spacing: -0.018em; text-wrap: balance;
}
.ref-card__company { margin-top: 12px; font-size: .9rem; font-weight: 500; color: var(--ink-2); }
.ref-card__teaser { margin-top: 10px; color: var(--ink-2); max-width: 58ch; }

.ref-tags { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .88rem; color: var(--ink-2); }
.ref-tags li::before { content: "#"; content: "#" / ""; margin-right: .12em; color: var(--orange-deep); font-weight: 700; }

.ref-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 22px; }
.ref-more {
  display: inline-flex; align-items: center; gap: .45em; min-height: 44px;
  font-weight: 600; text-decoration: none; color: var(--ink);
  background: linear-gradient(currentColor, currentColor) left calc(100% - 8px) / 100% 2px no-repeat;
}
.ref-more .icon { width: 1.1em; height: 1.1em; transition: transform .25s var(--ease); }
.ref-more:hover .icon { transform: translateX(4px); }
.ref-ext {
  display: inline-flex; align-items: center; gap: .55em; min-height: 44px;
  font-weight: 500; font-size: .95rem; color: var(--ink-2); text-decoration: none;
}
.ref-ext__icon {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
  border: 1.5px solid var(--line-strong); transition: background .2s, border-color .2s;
}
.ref-ext__icon .icon { width: 16px; height: 16px; }
.ref-ext:hover { color: var(--ink); }
.ref-ext:hover .ref-ext__icon { background: var(--lime); border-color: var(--lime); }

/* ---------- Liste: Startseite (versetztes 2er-Raster) ---------- */
.ref-list { list-style: none; margin: 0; padding: 0; }
.ref-list__item[hidden] { display: none !important; }
.ref-list.ref-list--home {
  --stagger: clamp(0px, 7vw, 112px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(48px, 6vw, 88px) clamp(20px, 3vw, 44px);
  margin-top: clamp(40px, 5vw, 64px); padding-bottom: var(--stagger);
}
.ref-list--home > li:nth-child(even) { transform: translateY(var(--stagger)); }
.home-refs__foot { margin-top: clamp(40px, 5vw, 64px); display: flex; justify-content: center; }
/* Button nie breiter als der Inhalt – mobil mit kürzerem Label (einzeilig, auch bei 320 px) */
.home-refs__foot .btn { max-width: 100%; }
@media (max-width: 480px) {
  .home-refs__foot .ref-lbl-long { display: none; }
  .home-refs__foot .ref-lbl-short { display: inline; }
  .home-refs__foot .btn { white-space: normal; text-align: left; }
}

/* ---------- Liste: /referenzen (wechselnd breit / halb) ---------- */
.ref-list--index {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(64px, 8vw, 128px) clamp(20px, 3vw, 44px);
}
.ref-list--index > .is-wide { grid-column: 1 / -1; }
.ref-list--index > .is-wide .ref-card {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: clamp(28px, 4.5vw, 80px);
}
.ref-list--index > .is-wide.is-flip .ref-card { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.ref-list--index > .is-wide.is-flip .ref-stage { order: 2; }
.ref-list--index > .is-wide .ref-card__title { font-size: clamp(1.6rem, 2.9vw, 2.6rem); }

@media (max-width: 1024px) {
  /* Breite Karten: Bühne über volle Breite, Text darunter */
  .ref-list--index > .is-wide .ref-card, .ref-list--index > .is-wide.is-flip .ref-card { grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 2.4vw, 32px); }
  .ref-list--index > .is-wide.is-flip .ref-stage { order: 0; }
  .ref-list--index > .is-wide .ref-card__body { max-width: 68ch; }
}
@media (max-width: 760px) {
  .ref-list.ref-list--home, .ref-list.ref-list--index { grid-template-columns: minmax(0, 1fr); padding-bottom: 0; }
  .ref-list--home > li:nth-child(even) { transform: none; }
  .ref-card__actions { gap: 2px 28px; margin-top: 16px; }
}

/* ---------- /referenzen: Kopf ---------- */
.ref-hero { padding-top: clamp(40px, 7vw, 100px); padding-bottom: clamp(40px, 5vw, 72px); position: relative; overflow: hidden; }
.ref-hero__title {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 0 clamp(18px, 3vw, 48px);
  margin-top: 22px; font-family: var(--f-display); font-weight: 900; font-stretch: 125%; text-transform: uppercase;
}
.ref-hero__num {
  font-size: clamp(7.5rem, 25vw, 22rem); line-height: .74; letter-spacing: -0.06em;
  color: #E8560C; /* etwas tieferes Orange: 3,3 : 1 auf Creme (--orange erreicht nur 2,4 : 1) */
  margin-left: -.04em;
}
.ref-hero__words {
  font-size: clamp(2rem, 5.4vw, 5.2rem); line-height: .92; letter-spacing: -0.025em;
  max-width: 11ch; text-wrap: balance; padding-bottom: .02em;
}
.ref-hero__foot {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: 24px clamp(32px, 6vw, 96px);
  align-items: end; margin-top: clamp(32px, 4vw, 56px);
}
.ref-hero__note {
  display: flex; gap: 12px; align-items: flex-start; justify-self: end; max-width: 36ch;
  padding-left: 18px; border-left: 2px solid var(--orange); font-size: .9rem; color: var(--ink-2);
}
.ref-hero__note .icon { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--orange-deep); }
@media (max-width: 900px) {
  .ref-hero__foot { grid-template-columns: minmax(0, 1fr); }
  .ref-hero__note { justify-self: start; }
}
@media (max-width: 600px) {
  .ref-hero__title { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ref-hero__num { font-size: clamp(7rem, 42vw, 10rem); }
  .ref-hero__words { font-size: clamp(1.9rem, 9vw, 2.6rem); }
}

/* ---------- /referenzen: Filter („Register“ nach Branche + Funktionen) ---------- */
.ref-filter { margin-bottom: clamp(48px, 6vw, 88px); }
.ref-filter__group { border: 0; margin: 0; padding: 0; min-width: 0; }
.ref-filter__legend { padding: 0; margin-bottom: 12px; font-size: .88rem; font-weight: 600; color: var(--ink-2); }

.ref-register__row {
  --cells: 6;
  display: grid; grid-template-columns: repeat(var(--cells), minmax(0, 1fr));
  border-top: 2px solid var(--ink); overflow: hidden;
}
.ref-register__cell {
  position: relative; appearance: none; -webkit-appearance: none; margin: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-height: 112px;
  padding: 16px 18px 18px;
  box-shadow: 1px 0 0 var(--line-strong), 0 1px 0 var(--line-strong);
  transition: background .2s, color .2s;
}
.ref-register__count { font-family: var(--f-display); font-weight: 900; font-stretch: 125%; font-size: clamp(1.8rem, 2.8vw, 2.6rem); line-height: .9; letter-spacing: -0.03em; }
.ref-register__label { font-size: .92rem; font-weight: 600; line-height: 1.3; }
.ref-register__cell:hover { background: var(--peach-2); }
.ref-register__cell[aria-pressed="true"] { background: var(--ink); color: #fff; }
.ref-register__cell[aria-pressed="true"] .ref-register__count { color: var(--lime); }
.ref-register__cell:focus-visible { outline: 2px solid var(--ink); outline-offset: -5px; }
.ref-register__cell[aria-pressed="true"]:focus-visible { outline-color: var(--lime); }

.ref-modfilter { margin-top: 22px; }
.ref-modfilter .ref-filter__legend { float: left; margin: 0 14px 0 0; line-height: 42px; }
.ref-modfilter__row { display: flex; flex-wrap: wrap; gap: 8px; }
.ref-modfilter__btn {
  position: relative; appearance: none; -webkit-appearance: none; margin: 0; cursor: pointer; font: inherit; color: var(--ink);
  display: inline-flex; align-items: center; gap: .55em; min-height: 42px; padding: 0 14px;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-ctl); background: transparent;
  font-size: .9rem; font-weight: 600; transition: border-color .2s, background .2s, color .2s;
}
.ref-modfilter__count { font-size: .78rem; font-weight: 600; color: var(--ref-muted); }
.ref-modfilter__btn:hover { border-color: var(--ink); }
.ref-modfilter__btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.ref-modfilter__btn[aria-pressed="true"] .ref-modfilter__count { color: var(--lime); }

.ref-filter__status { margin-top: 20px; font-size: .9rem; color: var(--ref-muted); }
.ref-empty { padding: 40px 0; color: var(--ink-2); }
.ref-empty a { font-weight: 600; }

@media (max-width: 1100px) { .ref-register__row { --cells: 3 !important; } }
/* Mobil: je Filter EINE Zeile, die innerhalb der Seite seitlich scrollt (randlos bis zur Bildschirmkante,
   die Seite selbst scrollt nicht quer). Die angeschnittene letzte Zelle zeigt: da kommt noch mehr. */
@media (max-width: 600px) {
  .ref-filter { margin-bottom: 44px; }
  .ref-filter__legend { margin-bottom: 8px; }
  .ref-register__row, .ref-modfilter__row {
    position: relative; /* hält auch die .sr-only-Zusätze (position: absolute) im Scrollbereich */
    display: flex; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
    scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .ref-register__row::-webkit-scrollbar, .ref-modfilter__row::-webkit-scrollbar { display: none; }
  .ref-register__row { border-top: 0; }
  .ref-register__cell {
    flex: 0 0 auto; min-width: 118px; min-height: 72px; gap: 8px; padding: 12px 16px 13px 14px;
    scroll-snap-align: start; border-top: 2px solid var(--ink);
    box-shadow: inset -1px 0 0 var(--line-strong), inset 0 -1px 0 var(--line-strong);
  }
  .ref-register__count { font-size: 1.5rem; }
  .ref-register__label { white-space: nowrap; font-size: .88rem; }
  .ref-modfilter { margin-top: 18px; }
  .ref-modfilter .ref-filter__legend { float: none; line-height: 1.4; margin: 0 0 8px; }
  .ref-modfilter__row { gap: 8px; padding-block: 4px; margin-block: -4px; }
  .ref-modfilter__btn { flex: none; white-space: nowrap; scroll-snap-align: start; }
  .ref-modfilter__btn:focus-visible { outline-offset: -4px; }
  .ref-filter__status { margin-top: 14px; }
}

/* ---------- Detailseite ---------- */
.ref-dhead { padding-top: clamp(32px, 5vw, 72px); padding-bottom: clamp(24px, 2.4vw, 32px); }
.ref-dhead__grid { margin-top: clamp(20px, 2.4vw, 28px); }
.ref-dhead__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: .95rem; color: var(--ink-2); }
.ref-dhead__crest {
  width: 22px; height: 26px; background: var(--acc); flex: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 2.2 35.6 8v11.2c0 9.6-6.6 16.2-15.6 18.6C11 35.4 4.4 28.8 4.4 19.2V8Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 2.2 35.6 8v11.2c0 9.6-6.6 16.2-15.6 18.6C11 35.4 4.4 28.8 4.4 19.2V8Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ref-dhead__num { font-weight: 700; color: var(--ink); }
.ref-dhead__title { margin-top: 16px; font-size: clamp(2rem, 4vw, 4.25rem); max-width: 18ch; overflow-wrap: break-word; hyphens: manual; }
.ref-dhead__aside { margin-top: clamp(20px, 3vw, 32px); display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: 20px clamp(32px, 6vw, 96px); align-items: end; }
.ref-dhead__lead { font-size: clamp(1.02rem, 1.3vw, 1.15rem); line-height: 1.6; color: var(--ink-2); max-width: 62ch; }
.ref-dhead__actions { justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.ref-dhead__visit .ref-ext__icon { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--ink); color: var(--lime); transition: transform .3s var(--ease); }
.ref-dhead__visit .ref-ext__icon .icon { width: 20px; height: 20px; }
.ref-dhead__visit:hover .ref-ext__icon { background: var(--ink); transform: rotate(45deg); }
.ref-dhead__domain { font-size: .85rem; color: var(--ref-muted); }
/* Ab 1100 px: Titel links, Text + Button als rechte Spalte daneben → die Bühne rückt in den ersten Viewport */
@media (min-width: 1100px) {
  .ref-dhead__grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 0 clamp(40px, 5vw, 88px); align-items: end; }
  .ref-dhead__title { font-size: clamp(2.4rem, 3.5vw, 3.5rem); max-width: none; } /* höchstens 2 Zeilen */
  .ref-dhead__aside { margin-top: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
  .ref-dhead__actions { justify-self: auto; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px 18px; }
}
@media (max-width: 900px) {
  .ref-dhead__aside { grid-template-columns: minmax(0, 1fr); }
  .ref-dhead__actions { justify-self: start; align-items: flex-start; }
}
@media (max-width: 600px) { .ref-dhead__title { font-size: clamp(1.75rem, 8.2vw, 2.6rem); max-width: none; } }
@media (max-width: 420px) {
  .ref-dhead__visit { width: 100%; justify-content: space-between; }
  .ref-dhead__actions { width: 100%; }
}

.ref-facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(16px, 2.4vw, 32px);
  margin: clamp(32px, 4vw, 56px) 0 0; border-top: 2px solid var(--ink);
}
.ref-facts > div { padding-top: 16px; min-width: 0; }
.ref-facts dt { font-size: .82rem; font-weight: 600; color: var(--ref-muted); }
.ref-facts dd { margin: 4px 0 0; font-weight: 500; line-height: 1.45; overflow-wrap: anywhere; }
.ref-facts__note { font-weight: 400; color: var(--ref-muted); }
/* inline (nicht inline-flex): bricht die Domain um, bleibt der Pfeil direkt am Textende statt am rechten Spaltenrand */
.ref-facts__link { display: inline; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
.ref-facts__tail { white-space: nowrap; }
.ref-facts__link .icon { display: inline-block; width: 1em; height: 1em; margin-left: .3em; vertical-align: -0.12em; color: var(--orange-deep); transition: transform .2s var(--ease); }
.ref-facts__link:hover .icon { transform: translate(2px, -2px); }
@media (max-width: 900px) { .ref-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; } }
@media (max-width: 480px) { .ref-facts { grid-template-columns: minmax(0, 1fr); gap: 14px; } .ref-facts > div { padding-top: 14px; border-top: 1px solid var(--line); } .ref-facts > div:first-child { border-top: 0; } }

.ref-story__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(40px, 6vw, 104px); align-items: start; }
.ref-story__prose p { font-size: 1.06rem; line-height: 1.72; color: var(--ink-2); max-width: 64ch; }
.ref-story__prose p + p { margin-top: 1.1em; }
.ref-highlights {
  position: sticky; top: calc(var(--header-h) + 24px);
  padding: clamp(24px, 3vw, 36px); border-radius: var(--r-lg); background: var(--paper);
}
.ref-highlights__list { list-style: none; margin: 18px 0 0; padding: 0; }
.ref-highlights__list li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; align-items: start; padding: 13px 0; border-top: 1px solid var(--line); line-height: 1.45; }
.ref-highlights__list li:first-child { border-top: 0; padding-top: 4px; }
.ref-highlights__n {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
  background: var(--acc); color: var(--acc-ink);
  font-family: var(--f-display); font-weight: 800; font-stretch: 110%; font-size: .85rem; line-height: 1;
}
@media (max-width: 900px) {
  .ref-story__grid { grid-template-columns: minmax(0, 1fr); }
  .ref-highlights { position: static; }
}

.ref-mods__box { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-xl); background: var(--dark); color: #fff; padding: clamp(28px, 5vw, 72px); }
.ref-mods__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px clamp(32px, 5vw, 80px); align-items: end; }
.ref-mods__head > p { color: rgba(255,255,255,.74); max-width: 52ch; justify-self: end; }
.ref-mods__list { list-style: none; margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; }
.ref-mod {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px clamp(20px, 3vw, 40px); align-items: center;
  padding: 20px 0; border-top: 1px solid rgba(255,255,255,.16);
}
.ref-mod:last-child { border-bottom: 1px solid rgba(255,255,255,.16); }
.ref-mod__name { font-family: var(--f-display); font-weight: 800; font-stretch: 110%; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.2; }
.ref-mod__tagline { margin-top: 4px; font-size: .92rem; color: rgba(255,255,255,.7); }
.ref-lbl-short { display: none; white-space: nowrap; }
@media (max-width: 420px) {
  .ref-mods__foot .ref-lbl-long { display: none; }
  .ref-mods__foot .ref-lbl-short { display: inline; }
  .ref-mods__foot .btn { font-size: .92rem; letter-spacing: 0; padding-left: 1.3em; }
}
@media (max-width: 359px) { .ref-mods__foot .ref-lbl-short { white-space: normal; } }
.ref-mod__price { white-space: nowrap; text-align: right; }
.ref-mod__price strong { font-family: var(--f-display); font-weight: 900; font-stretch: 115%; font-size: 1.35rem; letter-spacing: -0.01em; }
.ref-mod__from, .ref-mod__unit { font-size: .85rem; color: rgba(255,255,255,.64); }
.ref-mod__add {
  display: inline-flex; align-items: center; gap: .5em; min-height: 44px; padding: 0 14px;
  border: 1.5px solid rgba(255,255,255,.3); border-radius: var(--r-ctl);
  color: #fff; text-decoration: none; font-size: .9rem; font-weight: 600; white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
}
.ref-mod__add .icon { width: 1em; height: 1em; color: var(--lime); }
.ref-mod__add:hover { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.ref-mod__add:hover .icon { color: var(--ink); }
.ref-mods__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 28px; }
.ref-mods__sum { font-size: 1.05rem; color: rgba(255,255,255,.8); }
.ref-mods__sum strong { color: #fff; }
.ref-mods__note { margin-top: 18px; color: rgba(255,255,255,.55); }
@media (max-width: 900px) {
  .ref-mods__head { grid-template-columns: minmax(0, 1fr); }
  .ref-mods__head > p { justify-self: start; }
}
@media (max-width: 640px) {
  .ref-mods__box { border-radius: var(--r-lg); padding: 28px 20px; }
  .ref-mod { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
  .ref-mod__text { flex: 1 1 100%; }
  .ref-mod__price { text-align: left; }
  .ref-mods__foot .btn { width: 100%; justify-content: space-between; white-space: normal; text-align: left; }
}

/* Vor / Zurück: schlanke Textzeilen mit Pfeil und kleinem Wappen – keine Farbkacheln */
.ref-pager__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0 clamp(16px, 3vw, 48px);
  border-top: 2px solid var(--ink);
}
.ref-pager__link {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0;
  padding: 22px 0 6px; text-decoration: none; color: var(--ink);
}
.ref-pager__link--next { align-items: flex-end; text-align: right; }
.ref-pager__dir { display: inline-flex; align-items: center; gap: .45em; font-size: .88rem; font-weight: 600; color: var(--ref-muted); }
.ref-pager__dir .icon { width: 1.05em; height: 1.05em; color: var(--ink); transition: transform .25s var(--ease); }
.ref-pager__link--prev:hover .ref-pager__dir .icon { transform: translateX(-4px); }
.ref-pager__link--next:hover .ref-pager__dir .icon { transform: translateX(4px); }
.ref-pager__title {
  font-family: var(--f-display); font-weight: 800; font-stretch: 112%; font-size: clamp(1.25rem, 2vw, 1.7rem); line-height: 1.1; letter-spacing: -0.015em;
  max-width: 20ch; text-wrap: balance;
  background: linear-gradient(currentColor, currentColor) left bottom / 0 2px no-repeat; transition: background-size .35s var(--ease);
}
.ref-pager__link--next .ref-pager__title { background-position: right bottom; }
.ref-pager__link:hover .ref-pager__title { background-size: 100% 2px; }
.ref-pager__who { display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; font-weight: 600; color: var(--ink-2); }
.ref-pager__crest {
  flex: none; width: 15px; height: 17px; background: var(--acc);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 2.2 35.6 8v11.2c0 9.6-6.6 16.2-15.6 18.6C11 35.4 4.4 28.8 4.4 19.2V8Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 2.2 35.6 8v11.2c0 9.6-6.6 16.2-15.6 18.6C11 35.4 4.4 28.8 4.4 19.2V8Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ref-pager__all {
  align-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 16px; padding: 0 16px;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-ctl); text-decoration: none; font-weight: 600; font-size: .9rem; white-space: nowrap;
  transition: border-color .2s, background .2s;
}
.ref-pager__all:hover { border-color: var(--ink); background: var(--paper); }
.ref-pager__grid-icon { display: grid; grid-template-columns: repeat(2, 7px); gap: 3px; }
.ref-pager__grid-icon i { width: 7px; height: 7px; border-radius: 2px; background: var(--orange); }
@media (max-width: 760px) {
  .ref-pager__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ref-pager__all { grid-column: 1 / -1; grid-row: 2; justify-self: start; margin-top: 20px; }
}
@media (max-width: 480px) {
  .ref-pager__grid { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .ref-pager__link { border-top: 2px solid var(--ink); padding: 16px 0 18px; }
  .ref-pager__link--next { grid-row: 2; border-top-width: 1px; border-top-color: var(--line-strong); align-items: flex-start; text-align: left; }
  .ref-pager__all { grid-row: 3; margin-top: 8px; }
}