/* ══════════════════════════════════════════════════════════════
   REFERENZ.CSS — Case-Study- und Referenz-Komponenten
   Jemke Solutions | 2026
   Prefix: .rf-*   ·   Genutzt von /business/referenzen/**
   Erbt Tokens aus styles.css + page.css (--wa, --text, --muted)
══════════════════════════════════════════════════════════════ */

/* ── Lokale Flächen-Tokens: gleiche Rahmen/Flächen wie .pg-card,
      damit rf-Komponenten neben pg-Karten nicht aus dem Rahmen fallen.
      (--line ist global grün getönt und passt hier nicht.) ── */
[data-world]{--rf-line:rgba(255,255,255,.08);--rf-bg:rgba(255,255,255,.03);--rf-bar:rgba(255,255,255,.05)}
html[data-theme="light"] [data-world],
html[data-theme="light"]{--rf-line:rgba(0,0,0,.08);--rf-bg:rgba(255,255,255,.72);--rf-bar:#f2f4f9}

/* ── Brotkrumen ── */
.rf-crumb{font-size:.8rem;color:var(--muted);margin:0 0 1.4rem;letter-spacing:.02em}
.rf-crumb a{color:var(--wa-mute);text-decoration:none}
.rf-crumb a:hover{color:var(--wa);text-decoration:underline;text-underline-offset:3px}
.rf-crumb span{opacity:.5;margin:0 .15rem}

/* ── Hero ── */
.rf-hero{padding-top:6.5rem}
.rf-hero__grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:3rem;align-items:center}
.rf-h1{font-family:var(--font-heading);font-weight:800;letter-spacing:-.03em;line-height:1.08;
  font-size:clamp(1.85rem,4.3vw,3.1rem);margin:.5rem 0 1rem;color:var(--text)}
.rf-h1 b{color:var(--wa);font-weight:800}
.rf-sub{font-size:clamp(.98rem,1.35vw,1.13rem);line-height:1.68;color:var(--muted);max-width:56ch;margin:0 0 1.7rem}
.rf-sub b{color:var(--text);font-weight:600}
.rf-ctarow{display:flex;flex-wrap:wrap;gap:.7rem}

/* ── Browser-Rahmen um Screenshots ── */
.rf-frame{border-radius:14px;overflow:hidden;border:1px solid var(--rf-line);
  background:var(--rf-bg);box-shadow:0 26px 70px -28px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.03) inset}
.rf-frame__bar{display:flex;align-items:center;gap:.4rem;padding:.55rem .8rem;
  background:var(--rf-bar);border-bottom:1px solid var(--rf-line)}
.rf-frame__dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--wa-glow);flex:0 0 auto}
.rf-frame__url{margin-left:.6rem;font-family:var(--font-heading);font-size:.72rem;font-weight:600;
  letter-spacing:.04em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rf-frame img{display:block;width:100%;height:auto}
.rf-hero__shot{margin:0}

/* ── Faktenzeile ── */
.rf-facts-sec{padding-top:1.2rem;padding-bottom:1.2rem}
.rf-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;margin:0;
  border:1px solid var(--rf-line);border-radius:14px;overflow:hidden;background:var(--rf-bg)}
.rf-fact{padding:1rem 1.1rem;border-right:1px solid var(--rf-line);border-bottom:1px solid var(--rf-line)}
.rf-fact dt{font-family:var(--font-heading);font-size:.66rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--wa-mute);margin-bottom:.32rem}
.rf-fact dd{margin:0;font-size:.9rem;line-height:1.45;color:var(--text);font-weight:500}
.rf-fact dd a{color:var(--wa);text-decoration:underline;text-underline-offset:3px}

/* ── Fließtext ── */
.rf-prose{max-width:64ch;margin:2rem auto 0}
.rf-prose p{font-size:1.02rem;line-height:1.78;color:var(--muted);margin:0 0 1.05rem}
.rf-prose p b{color:var(--text);font-weight:600}

/* ── Vorher/Nachher-Wipe ── */
.rf-ba{max-width:1000px;margin:0 auto}
.rf-ba__stage{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--rf-line);
  cursor:ew-resize;user-select:none;-webkit-user-select:none;touch-action:pan-y;
  box-shadow:0 26px 70px -30px rgba(0,0,0,.7);line-height:0}
.rf-ba__img{display:block;width:100%;height:auto;pointer-events:none}
/* Die „Vorher“-Ebene liegt deckungsgleich über der „Nachher“-Ebene und wird
   per clip-path beschnitten — kein Breiten-Rechnen, kein Reflow beim Ziehen. */
.rf-ba__clip{position:absolute;inset:0;clip-path:inset(0 50% 0 0)}
.rf-ba__clip .rf-ba__img{width:100%;height:100%;object-fit:cover;object-position:top center}
.rf-ba__handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--wa);
  transform:translateX(-1px);pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.3)}
.rf-ba__grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:2.3rem;height:2.3rem;border-radius:50%;display:grid;place-items:center;
  background:var(--wa);color:#0b0f1a;box-shadow:0 6px 20px -4px rgba(0,0,0,.6)}
.rf-ba__tag{position:absolute;bottom:.7rem;font-family:var(--font-heading);font-size:.68rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;padding:.3rem .6rem;border-radius:7px;
  background:rgba(6,9,13,.78);color:#fff;pointer-events:none;backdrop-filter:blur(4px)}
.rf-ba__tag--l{left:.7rem}
.rf-ba__tag--r{right:.7rem}
.rf-ba__ctrl{display:flex;align-items:center;gap:.8rem;margin:1rem 0 .5rem}
.rf-ba__ctrl-label{font-family:var(--font-heading);font-size:.68rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--wa-mute);flex:0 0 auto}
.rf-ba__ctrl input[type=range]{flex:1 1 auto;accent-color:var(--wa);height:1.5rem;cursor:ew-resize}
.rf-ba__note{font-size:.78rem;line-height:1.6;color:var(--muted);opacity:.85;margin:0}

/* ── Messwerte ── */
.rf-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}
.rf-metric{border:1px solid var(--rf-line);border-radius:14px;padding:1.3rem 1.25rem;background:var(--rf-bg)}
.rf-metric--hero{grid-column:1/-1;background:var(--wa-dim);border-color:var(--wa-glow)}
.rf-metric__label{display:block;font-family:var(--font-heading);font-size:.66rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--wa-mute);margin-bottom:.7rem}
.rf-metric__row{display:flex;align-items:baseline;flex-wrap:nowrap;gap:.4rem;margin-bottom:.6rem}
.rf-metric__before{font-family:var(--font-heading);font-size:1.15rem;font-weight:700;color:var(--muted);
  white-space:nowrap;text-decoration:line-through;text-decoration-thickness:2px;
  text-decoration-color:color-mix(in srgb, var(--wa) 55%, transparent)}
.rf-metric__arrow{color:var(--wa-mute);font-size:.95rem;line-height:1;flex:0 0 auto}
.rf-metric__after{font-family:var(--font-heading);font-size:1.75rem;font-weight:800;color:var(--wa);
  letter-spacing:-.02em;white-space:nowrap}
.rf-metric__note{margin:0;font-size:.84rem;line-height:1.6;color:var(--muted)}

/* Hervorgehobene Kachel: große Zahl links, Erklärung rechts */
.rf-metric--hero .rf-metric__row{align-items:center;gap:1.2rem;margin-bottom:0}
.rf-metric__big{font-family:var(--font-heading);font-size:clamp(3rem,7vw,4.4rem);font-weight:800;
  line-height:.9;color:var(--wa);letter-spacing:-.04em;flex:0 0 auto}
.rf-metric__was{margin:0 0 .4rem;font-size:.9rem;line-height:1.55;color:var(--muted)}
.rf-metric__was s{text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb, var(--wa) 55%, transparent)}
.rf-metric__was b{color:var(--text);font-weight:600}

/* ── Callout ── */
.rf-callout{display:flex;gap:1rem;align-items:flex-start;margin-top:1.6rem;padding:1.3rem 1.4rem;
  border:1px solid var(--rf-line);border-radius:14px;background:var(--rf-bg)}
.rf-callout__icon{flex:0 0 auto;width:2.4rem;height:2.4rem;border-radius:11px;display:grid;place-items:center;
  background:var(--wa-dim);color:var(--wa);border:1px solid var(--wa-glow)}
.rf-callout__text{margin:0;font-size:.95rem;line-height:1.7;color:var(--muted)}
.rf-callout__text b{color:var(--text)}

/* ── Galerie ── */
.rf-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.4rem}
.rf-gal{margin:0}
.rf-gal img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--rf-line)}
.rf-gal figcaption{margin-top:.6rem;font-size:.84rem;line-height:1.55;color:var(--muted)}
.rf-gal--phone{display:flex;flex-direction:column;align-items:center;text-align:center}
.rf-phone{width:min(240px,100%);padding:.5rem;border-radius:24px;border:1px solid var(--rf-line);
  background:var(--rf-bg)}
.rf-phone img{border-radius:18px;border:0}

/* ── Technik-Chips ── */
.rf-stack{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.rf-chip{padding:.32rem .8rem;border-radius:8px;background:var(--wa-dim);border:1px solid var(--wa-glow);
  color:var(--wa);font-family:var(--font-heading);font-size:.75rem;font-weight:700}

/* ── Zitat ── */
.rf-quote{margin:0;padding:1.8rem;border-left:3px solid var(--wa);background:var(--rf-bg);
  border-radius:0 14px 14px 0}
.rf-quote p{font-family:var(--font-heading);font-size:clamp(1.05rem,2vw,1.35rem);line-height:1.55;
  font-weight:600;color:var(--text);margin:0 0 .9rem}
.rf-quote footer{font-size:.85rem;color:var(--muted)}
.rf-quote footer b{color:var(--wa)}

/* ── Kleinteile ── */
.rf-trust{text-align:center}
.rf-back{font-size:.9rem;color:var(--muted)}
.rf-back a{color:var(--wa);text-decoration:underline;text-underline-offset:3px}

/* ══════════════════════════════════════════════════════════════
   REFERENZ-ÜBERSICHT (/business/referenzen/)
══════════════════════════════════════════════════════════════ */
.rf-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.5rem}
.rf-card{display:flex;flex-direction:column;border:1px solid var(--rf-line);border-radius:16px;overflow:hidden;
  background:var(--rf-bg);text-decoration:none;color:inherit;
  transition:transform .3s cubic-bezier(.4,0,.2,1),border-color .3s ease,box-shadow .3s ease}
.rf-card--link:hover{transform:translateY(-4px);border-color:var(--wa-glow);
  box-shadow:0 22px 50px -26px rgba(0,0,0,.6)}
.rf-card__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--rf-bg);
  border-bottom:1px solid var(--rf-line)}
.rf-card__media img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.rf-card__badge{position:absolute;top:.7rem;left:.7rem;font-family:var(--font-heading);font-size:.64rem;
  font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:.28rem .58rem;border-radius:7px;
  background:rgba(6,9,13,.8);color:#fff;backdrop-filter:blur(4px)}
.rf-card__badge--live{background:var(--wa);color:#0b0f1a}
.rf-card__body{padding:1.3rem 1.35rem 1.45rem;display:flex;flex-direction:column;flex:1 1 auto}
.rf-card__label{font-family:var(--font-heading);font-size:.66rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--wa-mute);margin-bottom:.45rem}
.rf-card__title{font-family:var(--font-heading);font-size:1.18rem;font-weight:700;line-height:1.3;
  color:var(--text);margin:0 0 .55rem;letter-spacing:-.01em}
.rf-card__text{font-size:.92rem;line-height:1.65;color:var(--muted);margin:0 0 1rem}
.rf-card__meta{margin-top:auto;display:flex;flex-wrap:wrap;gap:.4rem}
.rf-card__tag{font-size:.72rem;padding:.22rem .55rem;border-radius:6px;border:1px solid var(--rf-line);
  color:var(--muted)}
.rf-card__go{margin-top:1rem;font-family:var(--font-heading);font-size:.82rem;font-weight:700;color:var(--wa)}
.rf-card--soon{border-style:dashed;opacity:.82}
.rf-card--soon .rf-card__media{display:grid;place-items:center;aspect-ratio:16/10}
.rf-card--soon .rf-card__media span{font-family:var(--font-heading);font-size:.78rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--wa-mute)}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════ */
@media (max-width:940px){
  .rf-hero{padding-top:5.5rem}
  .rf-hero__grid{grid-template-columns:1fr;gap:2rem}
  .rf-hero__shot{order:-1}
  .rf-metric--hero .rf-metric__after{font-size:2.1rem}
}
@media (max-width:640px){
  .rf-fact{border-right:0}
  .rf-ba__tag{font-size:.6rem;padding:.24rem .45rem}
  .rf-ba__stage{cursor:default}
  .rf-callout{flex-direction:column;gap:.8rem}
  .rf-metric--hero .rf-metric__row{flex-direction:column;align-items:flex-start;gap:.3rem}
  .rf-prose p{font-size:.97rem}
}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion:reduce){
  .rf-card,.rf-card--link:hover{transition:none;transform:none}
}