/* ==================================================================
   #fallstudien · Referenzen neu (29.09.2026)
   Zwei Karten untereinander, ein Bauplan: links das Bild im grauen Feld (gleiches Format),
   rechts Art, Name, Ort/Gewerk, Kernaussage hinter derselben Linie, Link unten.
   Biewer = Ergebnis (zwei gleichwertige Zahlen wie die zwei Wege darueber),
   Thurwach = Vorher, nachher (Vorher als Ausschnitt, liegt unten rechts auf dem Nachher).
   Klassen rf-, Seitenbauteile 2 px Radius.
   ================================================================== */

/* ---------- zwei Karten untereinander ---------- */
.fsx .rf{display:flex;flex-direction:column;gap:24px}
.fsx .rf__k{display:grid;grid-template-columns:1.4fr 1fr;min-width:0;padding:8px;background:#fff;border-radius:2px;box-shadow:var(--card-shadow)}

/* Melvin 29.09.2026: Bild groesser, weniger graues Feld (Bildspalte 1.4fr, Rand 28 px).
   Bild: die Kundenseite ab dem Hero, so wie man sie herunterscrollt. Sie fuellt das graue Feld und laeuft
   unten aus ihm heraus (leicht ausgeblendet): kein leerer Buehnenrand, egal wie hoch die Textspalte ist.
   Das Bild traegt nicht zur Kartenhoehe bei, die Hoehe kommt vom Text. */
.fsx .rf__bild{position:relative;min-height:470px;background:#EDF0F4;border-radius:2px;overflow:hidden;--rf-r:28px}
.fsx .rf__bild::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(10,23,48,.06);z-index:4}
.fsx .rf__bild > picture,
.fsx .rf__vn{position:absolute;left:var(--rf-r);right:var(--rf-r);top:var(--rf-r)}
.fsx .rf__vn{bottom:0}
.fsx .rf__bild > picture{width:calc(100% - 2 * var(--rf-r))}
.fsx .rf__bild > picture img{width:100%}
.fsx .rf__fig--nach img{width:100%}
.fsx .rf__bild > picture img,
.fsx .rf__fig--nach img{display:block;height:auto;border-radius:3px 3px 0 0;
  box-shadow:0 0 0 1px rgba(10,23,48,.08),0 22px 38px -18px rgba(11,27,43,.34)}
.fsx .rf__bild::before{content:"";position:absolute;left:0;right:0;bottom:0;height:56px;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(237,240,244,0) 0%,rgba(237,240,244,.7) 100%)}
.fsx .rf__fig{margin:0;position:relative}
/* Vorher: kleiner Ausschnitt der alten Seite, unten rechts im Feld, ueber der Kante des Nachher */
.fsx .rf__fig--vor{position:absolute;right:calc(-1 * var(--rf-r) + 18px);bottom:22px;width:40%;z-index:2}
.fsx .rf__fig--vor img{display:block;width:100%;height:auto;border-radius:2px;
  box-shadow:0 0 0 1px rgba(10,23,48,.14),0 18px 34px -12px rgba(11,27,43,.45)}
/* Beschriftung als kleines Schild auf der oberen Bildkante, bei beiden Bildern gleich */
.fsx .rf__fig figcaption{position:absolute;z-index:3;left:10px;top:-10px;padding:5px 8px 4px;background:#fff;border-radius:2px;
  font:600 10.5px/1 'Inter Tight',system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  box-shadow:0 0 0 1px rgba(10,23,48,.10)}
.fsx .rf__fig--nach figcaption{color:var(--blue)}

/* Text: gleiche Reihenfolge in beiden Karten, Link immer unten */
.fsx .rf__txt{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:40px 44px 40px 46px}
.fsx .rf__art{font:600 11px/1 'Inter Tight',system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.fsx .rf__name{margin:14px 0 0;font:500 26px/1.2 'Inter Tight',system-ui,sans-serif;letter-spacing:-.015em;color:var(--ink)}
.fsx .rf__txt .fst__meta{margin-top:10px}

/* Kernaussage: in beiden Karten hinter derselben Linie */
.fsx .rf__zahlen,
.fsx .rf__aussage{margin:26px 0 0;padding-top:22px;border-top:1px solid rgba(10,23,48,.10)}
.fsx .rf__zahlen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.fsx .rf__z{margin:0;min-width:0}
.fsx .rf__z + .rf__z{padding-left:26px;border-left:1px solid rgba(10,23,48,.10)}
.fsx .rf__z b{display:block;font:500 52px/1 'Inter Tight',system-ui,sans-serif;letter-spacing:-.035em;color:var(--blue)}
.fsx .rf__z span{display:block;margin-top:10px;font:500 18px/1.25 'Inter Tight',system-ui,sans-serif;letter-spacing:-.01em;color:var(--ink)}
.fsx .rf__z small{display:block;margin-top:5px;padding-right:12px;font:400 14.5px/1.45 'Inter Tight',system-ui,sans-serif;color:var(--ink-2)}
.fsx .rf__zeit{margin:20px 0 0;font:400 14.5px/1.55 'Inter Tight',system-ui,sans-serif;color:var(--ink-3)}
.fsx .rf__txt .fst__quote{margin-top:14px}
.fsx .rf__txt .fst__quote span{white-space:nowrap}
.fsx .rf__aussage{font:500 22px/1.3 'Inter Tight',system-ui,sans-serif;letter-spacing:-.015em;color:var(--ink);text-wrap:pretty}
.fsx .rf__p{margin:14px 0 0;font:400 15px/1.6 'Inter Tight',system-ui,sans-serif;color:var(--ink-2)}
.fsx .rf__txt > .fst__link{margin-top:28px;align-self:flex-start}

/* Abstand zu den Bewertungen */
.fsx .rf + .tr__stat{margin-top:88px}

/* ---------- Breiten ---------- */
@media (min-width:1000px) and (max-width:1229px){
  .fsx .rf__k{grid-template-columns:1.25fr 1fr}
  .fsx .rf__bild{--rf-r:24px}
  .fsx .rf__txt{padding:32px 30px 32px 32px}
  .fsx .rf__name{font-size:24px}
  .fsx .rf__z b{font-size:46px}
}
@media (max-width:999px){
  .fsx .rf{gap:16px;max-width:720px;margin:0 auto}
  .fsx .rf__k{grid-template-columns:minmax(0,1fr)}
  .fsx .rf__bild{--rf-r:28px;min-height:0;height:440px}
  .fsx .rf__txt{padding:32px 34px 36px}
  .fsx .rf + .tr__stat{margin-top:64px}
}
@media (max-width:699px){
  .fsx .rf__k{padding:6px}
  .fsx .rf__bild{--rf-r:14px;height:330px}
  .fsx .rf__fig--vor{right:calc(-1 * var(--rf-r) + 8px);bottom:14px;width:50%}
  .fsx .rf__fig figcaption{left:8px;top:-9px;padding:4px 6px 3px;font-size:9.5px}
  .fsx .rf__txt{padding:24px 20px 28px}
  .fsx .rf__name{margin-top:12px;font-size:22px}
  .fsx .rf__zahlen,.fsx .rf__aussage{margin-top:20px;padding-top:18px}
  .fsx .rf__z + .rf__z{padding-left:18px}
  .fsx .rf__z b{font-size:42px}
  .fsx .rf__z span{margin-top:8px;font-size:16.5px}
  .fsx .rf__z small{font-size:14px;padding-right:6px}
  .fsx .rf__aussage{font-size:19px}
  .fsx .rf__txt .fst__quote span{display:block;margin:4px 0 0}
  .fsx .rf + .tr__stat{margin-top:52px}
}
/* bis 480 px: Desktop-Ansicht der Kundenseite (Melvin 01.10.2026: Handy-Aufnahme sah schlecht aus). Das Bild
   behaelt sein Seitenverhaeltnis 4:5, der Rahmen ist so hoch wie das Bild minus dem Rand, den die Fade-Kante abschneidet:
   Rahmenbreite = 100vw - 2*22 (Container) - 2*6 (Kartenrand), Bildbreite = Rahmen - 2*14. */
@media (max-width:480px){
  .fsx .rf__bild{height:calc(1.25 * (100vw - 84px))}
  .fsx .rf__bild > picture img,.fsx .rf__fig--nach img{border-radius:6px 6px 0 0}
}

/* ---------- Google-Bewertungen, leiser (Melvin 29.09.2026) ----------
   Ruhige Bestaetigung unter den Referenzen statt eigener grosser Block: keine Unterzeile,
   Kopfzeile eine Stufe kleiner, drei gleich hohe kompakte Karten in einer Reihe,
   Name klein unter dem Zitat statt Avatar-Kreis. */
.fsx .rf + .tr__stat{margin-top:80px}
.fsx .tr__stat b{font-size:21px;font-weight:500;letter-spacing:-.012em}
.fsx .tr__stat .lbl{margin-bottom:0}
.fsx .tr__wall{margin-top:22px;column-count:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.fsx .tr__wall > div{margin:0!important;padding:20px 22px!important;gap:8px!important}
.fsx .tr__wall > div > p{font-size:14.5px!important;line-height:1.55!important}
.fsx .tr__wall > div > div:nth-child(2){font-size:12.5px!important}
.fsx .tr__wall > div > div:nth-child(2) svg{width:14px!important;height:14px!important}
.fsx .tr__wall > div > div:last-child{margin-top:2px!important}
.fsx .tr__wall > div > div:last-child > span:first-child{display:none!important}
.fsx .tr__wall > div > div:last-child b{font-size:13.5px!important;font-weight:500!important;color:var(--ink-2)!important}
@media (max-width:999px){
  .fsx .tr__wall{grid-template-columns:minmax(0,1fr);max-width:720px;margin-left:auto;margin-right:auto;gap:12px}
  .fsx .rf + .tr__stat{margin-top:60px}
}
@media (max-width:699px){
  .fsx .rf + .tr__stat{margin-top:48px}
  .fsx .tr__stat b{font-size:19px}
  .fsx .tr__wall{margin-top:20px}
  .fsx .tr__wall > div{padding:18px!important}
}