/* ---- Testimonial-Karussell ----

   Am Original nachgemessen (1440px, /opt/tooling/ref1.mjs + ref4.mjs). Unser
   bisheriger Aufbau war eine schlichte 640px-Karte mit Rahmen und Wappen
   obendrueber - das Original hat stattdessen:

     Karte      903x470 bei x=269/y=375, radius 27px, overflow:hidden,
                linear-gradient(222deg, #fff 0%, #eed5d8 100%),
                box-shadow #eed5d8 0 0 274px
     Foto       links ueber die Karte hinausragend und von ihr beschnitten
                (Folie 1: 686x470 bei x=51, also -218px zum Kartenrand)
     Textspalte 646px breit, rechts neben dem Foto zentriert (Mitte x=802,
                NICHT die Kartenmitte 720)
     Bedien-    prev/next 47x47 und Video 93x93, alle rgba(255,255,255,.23)
     elemente   mit border-radius 74px und backdrop-filter: blur(9px),
                jeweils 47px vom rechten Kartenrand
     Punkte     6x 15x15, 23px Abstand, 47px unter der Karte, aktiv #333

   Der Rahmen/Flaechen-Look war damit an jeder Stelle falsch - genau das
   Muster "Karten mit Rahmen statt blur()", das schon anderswo aufgefallen ist. */

/* Kopfbereich am Original vermessen: h1 bei y=197 (Kopfzeile ist 74px hoch,
   also 123px Innenabstand - derselbe Wert wie auf den Rechtstextseiten),
   21px bis zum Einleitungsabsatz, dieser 810px breit und zweizeilig, danach
   74px bis zur Karussellkarte bei y=375.
   Die 810px stehen hier lokal und nicht in der sitewide .section-intro-Regel
   (dort 62ch): diese Datei teilt sich die Klasse mit sechs weiteren Seiten,
   die gerade parallel bearbeitet werden. */
.section--referenzen-intro { padding-top: 123px; padding-bottom: 0; }
.section--referenzen-intro h1 { margin-bottom: 21px; }
.section--referenzen-intro .section-intro {
  max-width: 810px; margin-left: auto; margin-right: auto; margin-bottom: 0;
}

/* Original: Karussell 301..907 (606 hoch, pad-bottom 0). Der 48px-Abstand
   machte den Block zu hoch und schob "Unsere Kunden" nach unten. */
.section--testimonial { padding-top: 74px; padding-bottom: 0; }
/* "Unsere Kunden" 123px unter dem Karussell (Original: H2 y=1030). */
.section--kunden { padding-top: 123px; padding-bottom: 123px; }
.section--kompetenz { padding-top: 123px; }

.ref-carousel { --card-w: 903px; --card-h: 470px; }

.ref-stage {
  position: relative;
  width: var(--card-w); height: var(--card-h);
  margin: 0 auto;
  border-radius: 27px;
  overflow: hidden;
  background-image: linear-gradient(222deg, #ffffff 0%, #eed5d8 100%);
  box-shadow: 0 0 274px 0 #eed5d8;
}

.ref-slide { margin: 0; }
.ref-slide[hidden] { display: none; }

/* Das Foto sitzt absolut und wird vom overflow:hidden der Karte beschnitten;
   left/top kommen je Folie aus den Messwerten (inline gesetzt). */
.ref-slide__photo { position: absolute; object-fit: cover; }

.ref-slide__body {
  position: absolute; left: 210px; top: 152px; width: 646px;
  text-align: center;
}

/* Zitat: 29px/700/34.8 (nachgemessen). */
.ref-slide__quote {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-h2); line-height: var(--lh-h2);
  font-weight: var(--fw-bold); color: var(--color-text);
}
/* Zitatnachweis: 400, nicht fett - 27px unter dem Zitat. */
.ref-slide__author {
  margin: 27px 0 0;
  font-size: var(--fs-body); line-height: var(--lh-body);
  font-weight: var(--fw-regular); color: var(--color-text-muted);
}
/* Wappen + Gebietskoerperschaft als zentrierte Zeile, 11px Abstand. */
.ref-slide__region {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  margin: 11px 0 0;
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--color-text-muted);
}
.ref-slide__region img { flex: none; }

/* ---- Bedienelemente ---- */
.ref-nav, .ref-play {
  position: absolute;
  border: 0; padding: 0; cursor: pointer;
  background-color: rgba(255, 255, 255, 0.23);
  border-radius: 74px;
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  background-repeat: no-repeat; background-position: center;
  transition: background-color var(--duration-hover) var(--ease-smooth);
}
/* Hover-Sweep 2026-07: die Karussell-Pfeile des Originals reagieren beim
   Hover NICHT (getComputedStyle vorher/nachher identisch) - die fruehere
   Aufhellung war erfunden und ist entfernt. */
.ref-nav { width: 47px; height: 47px; top: 33px; }
.ref-nav--prev { right: 141px; }
.ref-nav--next { right: 47px; }
/* Chevron 12x21 in #818181, im Original als SVG-Pfad. */
.ref-nav {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 21' width='12' height='21'%3E%3Cpath d='M11 1 L2 10.5 L11 20' fill='none' stroke='%23818181' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 12px 21px;
}
.ref-nav--next { transform: rotate(180deg); }

.ref-play {
  width: 93px; height: 93px; right: 47px; bottom: 47px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 47 47' width='47' height='47'%3E%3Cpath d='M 18.304 14.875 C 20.613 10.875 26.387 10.875 28.696 14.875 L 38.655 32.125 C 40.965 36.125 38.078 41.125 33.459 41.125 L 13.541 41.125 C 8.922 41.125 6.035 36.125 8.345 32.125 Z' transform='rotate(90 23.5 23.5)' fill='%23818181'/%3E%3C/svg%3E");
  background-size: 47px 47px;
  /* Das Dreieck sitzt im Original nicht mittig: Symbol 47x47 bei 26/22
     innerhalb des 93x93-Knopfes. */
  background-position: 26px 22px;
}

/* ---- Punkte ---- */
.ref-dots {
  display: flex; justify-content: center; gap: 23px;
  margin-top: 47px;
}
.ref-dot {
  width: 15px; height: 15px; padding: 0; border: 0; border-radius: 50%;
  background: #c9c9c9; cursor: pointer;
  transition: background-color var(--duration-hover) var(--ease-smooth);
}
/* Hover-Sweep 2026-07: auch die Punkte sind im Original beim Hover statisch -
   erfundenen Hover entfernt (der Aktiv-Wechsel animiert weiter ueber die
   transition). */
.ref-dot.is-active { background: #333333; }

/* Unter 1200px stellt das Original das Karussell komplett um: die Karte ist
   randlos ueber die volle Breite, fest 831px hoch, ohne Rundung; der Text
   sitzt oben (39px), das Foto fuellt beschnitten die untere Haelfte (728x499,
   waagerecht zentriert, buendig am Kartenboden). Die Bedienknoepfe liegen
   ueber dem Foto: Pfeile 60x60 links/rechts (39px Rand), Play 81x81 mittig.
   Alles am Original bei 390/768/1199 vermessen. */
@media (max-width: 1199px) {
  .section--referenzen-intro { padding-top: 76px; }
  /* Original @<=1199: Titel linksbuendig ueber die volle Spaltenbreite
     (getComputedStyle: h1 ta=left, x=39, w=1121) - nicht zentriert wie das
     geerbte .container.text-center es machte. */
  .section--referenzen-intro h1 { text-align: left; }
  /* Original: Karte 51px unter dem Einleitungsabsatz (nicht 74px). */
  .section--testimonial { padding-top: 51px; }
  /* "Unsere Kunden" 103px unter dem Karussell (Original: H2 y=1369).
     Lauf 5: Knopfkasten-Unterkante -> "Kompetenz"-H2 sind im Original 191px
     (2063 -> 2254); aufgeteilt in 97 unten + 96 oben (vorher 115+123 = 47px
     zu viel - Haupttreiber der +47px-Dokumenthoehe @390). Nachgemessen
     2026-07-30: mit 97px landet die H2 bei y=2254,48 = Original-Capture. */
  .section--kunden { padding-top: 103px; padding-bottom: 97px; }
  /* padding-bottom: die Pfadleisten-Zone ist bei uns (sitewide) 13px flacher
     als im Original @390 (Bild-Boden -> Footer: 178 vs. 165). Scoped hier
     ausgeglichen, damit der dichte Footer-Block deckungsgleich sitzt (das
     kurze Pfadleisten-Label wandert dafuer 9px nach unten - kleineres Uebel,
     sitewide-Pfadleiste bleibt unangetastet). */
  .section--kompetenz { padding-top: 96px; padding-bottom: 109px; }
  .ref-carousel { --card-w: 100%; }
  .ref-stage {
    position: relative;
    max-width: none; width: 100%;
    height: 831px; border-radius: 0;
  }
  .ref-slide { position: static; }
  .ref-slide__photo {
    display: block;
    left: 50% !important; top: auto !important; bottom: 0;
    /* Original ankert das Foto 39px links der Mitte (bei 390px: left=-208
       statt zentriert -169), damit das Gesicht deckungsgleich sitzt. */
    transform: translateX(calc(-50% - 39px));
    width: 728px; height: 499px; max-width: none;
  }
  .ref-slide__body {
    position: absolute; left: 0; right: 0; top: 39px; width: auto;
    padding: 0 23px;
  }
  .ref-nav {
    width: 60px; height: 60px; top: 732px; bottom: auto;
  }
  .ref-nav--prev { left: 39px; right: auto; }
  .ref-nav--next { right: 39px; left: auto; }
  .ref-play {
    width: 81px; height: 81px; top: 711px; bottom: auto;
    left: 50%; right: auto; transform: translateX(-50%);
    background-size: 41px 41px; background-position: center;
  }
}

/* ---- Kundenraster ----
   Am Original nachgemessen (getComputedStyle @1440): 6 Spalten a 83px,
   Spaltenschritt 185px (Wappen 83 + 102 Luecke), Zeilenschritt ~157px
   (Wappen 83 + 74). Das Raster ist zunaechst auf 740px Hoehe beschnitten
   (overflow hidden - vier volle Zeilen plus eine anfadende, wie im Original,
   dessen Container 740px hoch ist und dessen scrollHeight ~2642px betraegt),
   blendet unten ueber 222px weich nach Weiss aus (.ref-fade) und wird per
   "Alle zeigen"-Knopf vollstaendig ausgeklappt. Genau diese drei Bausteine
   (Fade, sichtbarer Knopf, Ausklappen) fehlten dem Desktop bisher - er schnitt
   hart bei 880px ab. */
/* Container-breite Haarlinie zwischen H2 und Raster - im Original nur ab 1200px
   (getComputedStyle/Frame-Beleg @1440), unter 1200px NICHT vorhanden. */
/* margin-top 35 statt 36: die Y-Ketten-Messung (Lauf 5, ref-ychain2.mjs)
   zeigte JEDE Wappenzeile bei uns konstant 1px tiefer als im Original
   (1149,2 vs. 1148,2 usw.) - die Kette laeuft bis hierher deckungsgleich,
   der Versatz entsteht also zwischen H2 und Haarlinie. */
.ref-grid-wrap { position: relative; margin-top: 35px; border-top: 1px solid var(--color-border); }
.ref-grid {
  display: grid; grid-template-columns: repeat(6, 83px);
  justify-content: center; column-gap: 102px; row-gap: 74px;
  padding-top: 47px; max-height: 740px; overflow: hidden;
}
.ref-grid.is-expanded { max-height: none; }
.ref-card { display: flex; align-items: center; justify-content: center; }
.ref-card img { width: 83px; height: 83px; object-fit: contain; border-radius: var(--radius-sm); }
/* Der Gemeindename gehoert nur zur Mobil-Liste (<1200px); ab 1200px zeigt das
   Original das reine Wappenraster ohne Beschriftung. */
.ref-card__name { display: none; }

/* ---- Wappen-Hover-Karte (ab 1200px) ----
   Kundenmeldung + Neumessung 2026-07-28 (/opt/tooling/ref-tooltip-probe*.mjs;
   MutationObserver + Frame-Sampling am Original): die fruehere Hover-Sweep-
   Aussage "Wappen beim Hover statisch" galt fuer den Wappen-TICKER der
   Startseite - im grossen Raster auf /referenzen/ waechst das Wappen beim
   Hover zu einer weissen Karte auf ("Grid Element hovered"):

     Endzustand  Breite = max(83, Textblock) + 46, Hoehe = Textblock + 150
                 (23 Polster + 83 Wappen + 21 Luecke + Text + 23 Polster),
                 Radius 18, Schatten 0 0 47px rgba(0,0,0,.23); das Wappen
                 bleibt 83x83 und rueckt oben mittig ein, darunter steht
                 linksbuendig Name ueber Kategorie (Luecke 11)
     Anker       die Kartenoberkante bleibt auf der Wappen-Oberkante; in der
                 Breite waechst die Karte je Rasterspalte anteilig (Spalte 1
                 nur nach rechts, Spalte 6 nur nach links, dazwischen n/5 -
                 an Spalten 1/2/3/6 nachgemessen: 0/.2/.4/1)
     Verlauf     ~800ms ausfedernd (expo-artig, in beide Richtungen gleich);
                 Flaeche/Schatten/Radius blenden mit, der Text per Opacity
     Typo        Name Poppins 15/22.5/700 #333; Kategorie 15/22.5/400 mit
                 festen Zeilenumbruechen (s. catlines in main.go; #818181 im
                 Original -> bei uns #767676 fuer AA 4.5:1, Projektkonvention)

   Fokus und Tap loesen im Original nachweislich nichts aus (tabindex fehlt,
   Tap-Test ohne Variantenwechsel) - daher reiner Hover, gated auf
   (hover:hover). Die Endmasse sind inhaltsabhaengig und werden einmal in
   main.js vermessen (--tip-w/--tip-h, dann .is-measured am Raster); ohne JS
   bleibt das Raster schlicht statisch wie bisher. */
.ref-tip { display: contents; }
.ref-tip__text { display: none; }

@media (min-width: 1200px) {
  .ref-grid { --ease-ref-tip: cubic-bezier(.25, .6, .25, 1); }
  /* Feste 83px-Hoehe: die Hover-Karte liegt absolut, ohne Hoehe wuerde die
     Rasterzeile sonst kollabieren. */
  .ref-card { position: relative; height: 83px; z-index: 0; transition: z-index 0s linear .8s; }
  .ref-tip {
    display: flex; flex-direction: column; align-items: center; gap: 21px;
    position: absolute; left: 0; top: 0;
    width: 83px; height: 83px; padding: 0;
    background: rgba(255, 255, 255, 0);
    border-radius: 0; box-shadow: 0 0 47px rgba(0, 0, 0, 0);
    transition:
      width .8s var(--ease-ref-tip), height .8s var(--ease-ref-tip),
      left .8s var(--ease-ref-tip), padding .8s var(--ease-ref-tip),
      background-color .8s var(--ease-ref-tip),
      border-radius .8s var(--ease-ref-tip), box-shadow .8s var(--ease-ref-tip);
  }
  .ref-tip img { flex: none; }
  .ref-tip__text {
    display: flex; flex-direction: column; align-items: flex-start; gap: 11px;
    width: max-content;
    font-family: var(--font-body); font-size: 15px; line-height: 1.5;
    text-align: left; white-space: nowrap;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .8s var(--ease-ref-tip), visibility 0s .8s;
  }
  .ref-tip__name { font-weight: var(--fw-bold); color: var(--color-text); }
  .ref-tip__cat { font-weight: var(--fw-regular); color: var(--color-text-muted); }
  /* Horizontaler Wachstumsanteil nach links, je Rasterspalte (n-1)/5. */
  .ref-card:nth-child(6n+1) { --tip-ax: 0; }
  .ref-card:nth-child(6n+2) { --tip-ax: .2; }
  .ref-card:nth-child(6n+3) { --tip-ax: .4; }
  .ref-card:nth-child(6n+4) { --tip-ax: .6; }
  .ref-card:nth-child(6n+5) { --tip-ax: .8; }
  .ref-card:nth-child(6n)   { --tip-ax: 1; }
}

@media (min-width: 1200px) and (hover: hover) {
  /* z-index sofort beim Hover, erst nach dem Zuklappen (.8s) wieder weg -
     so bleibt die schrumpfende Karte ueber den Nachbarwappen. */
  .ref-grid.is-measured .ref-card:hover { z-index: 2; transition: z-index 0s; }
  .ref-grid.is-measured .ref-card:hover .ref-tip {
    width: var(--tip-w, 272px); height: var(--tip-h, 206px);
    left: calc(var(--tip-ax, 0) * (83px - var(--tip-w, 272px)));
    padding: 23px;
    background: #ffffff; border-radius: 18px;
    box-shadow: 0 0 47px rgba(0, 0, 0, .23);
  }
  .ref-grid.is-measured .ref-card:hover .ref-tip__text {
    opacity: 1; visibility: visible;
    transition: opacity .8s var(--ease-ref-tip), visibility 0s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ref-card, .ref-tip, .ref-tip__text { transition: none !important; }
}

/* Fade unten: transparent -> Seitenhintergrund (Weiss), 222px hoch, buendig am
   unteren Rand des beschnittenen Rasters. Als eigenes, absolut positioniertes
   Element (kein Grid-Item). Beim Ausklappen weich ausgeblendet. */
.ref-fade {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 222px; pointer-events: none;
  /* Lauf 5 (ref-fade-probe.mjs): das Original stapelt ZWEI identische
     Fade-Ebenen ("Blur" + "Blur 2", je 222px, transparent->weiss). Die
     Alphas multiplizieren sich (1-(1-a)^2) - Zeile 5 ist dadurch schon zu
     ~90 % weiss. Unsere einzelne Ebene liess sie deutlich staerker
     durchscheinen (sichtbar im Pixeldiff). Daher hier derselbe Verlauf
     ZWEIMAL als background-Ebenen. */
  background-image:
    linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, var(--color-bg) 100%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, var(--color-bg) 100%);
  transition: opacity var(--duration-hover) var(--ease-smooth);
}
.ref-grid.is-expanded ~ .ref-fade { opacity: 0; }

/* "Alle zeigen"-Knopf - Lauf 5, am Original per getComputedStyle + Zoom-Capture
   nachgemessen (@1440 UND @390 identisch): ZWEI verschachtelte Kaesten, beide
   weiss mit sichtbarer Haarlinie -
     aussen 182x93, Radius 18, Polster 22 (+1px Kante)
     innen (die eigentliche Pille) 136x47, Radius 9, Polster 11 (+1px Kante),
     Text 15/400 + Abwaerts-Pfeil 12x20 mit 13px Abstand.
   Vorher hatten wir EINE grosse 182x77-Pille - 16px zu flach (Teil der
   Dokumenthoehen-Differenz) und ohne den inneren Kasten. Textfarbe #767676
   statt des Original-Grautons #818181, damit der Text AA (4.5:1) haelt. */
.ref-showall { display: flex; justify-content: center; margin-top: 47px; }
.ref-showall__box {
  display: flex; align-items: center; justify-content: center;
  padding: 22px; background: var(--color-bg);
  border: 1px solid var(--color-border); border-radius: 18px;
  transition: box-shadow var(--duration-hover) var(--ease-smooth);
}
.ref-showall__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 13px;
  min-width: 136px; min-height: 47px; padding: 11px; cursor: pointer;
  font-family: var(--font-body);
  font-size: 15px; font-weight: var(--fw-regular);
  color: var(--color-text-muted);
  background: var(--color-bg);
  border: 1px solid var(--color-border); border-radius: 9px;
  transition: color var(--duration-hover) var(--ease-smooth);
}
/* Hover-Sweep 2026-07 (Original gemessen): "Alle zeigen" verhaelt sich wie die
   uebrigen Pill-Buttons - Glow 0 0 47px .23 (der Schatten-Slot sitzt im
   Original auf dem AEUSSEREN Kasten) + Text #818181->#333. */
.ref-showall__box:hover { box-shadow: 0 0 47px rgba(0, 0, 0, .23); }
.ref-showall__box:hover .ref-showall__btn { color: var(--color-text); }
.ref-showall__btn::after {
  content: ""; width: 12px; height: 20px; flex: none;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20' width='12' height='20'%3E%3Cpath d='M6 2 L6 17 M2 13 L6 17 L10 13' fill='none' stroke='%23767676' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transition: transform var(--duration-hover) var(--ease-smooth);
}
.ref-showall__btn[aria-expanded="true"]::after { transform: rotate(180deg); }

/* ---- Kompetenz-Fallstudien ---- */
.case-study {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: center;
  padding: var(--space-7) 0; border-top: 1px solid var(--color-border);
}
.case-study--reverse { direction: rtl; }
.case-study--reverse > * { direction: ltr; }
/* Textrhythmus in den Karten - Original @1440 UND @390 (Lauf 5):
   Titel->Absatz 23px, Absatz->"Presseartikel:" 11px, Label->Link 2px. */
.case-study h3 { margin-bottom: 23px; }
.case-study p { margin-bottom: 11px; }
/* Spezifitaet beachten: ".case-study p" (0,1,1) schlaegt ".case-study__label"
   (0,1,0) - daher die Label-Marge ebenfalls mit p-Selektor. */
/* Label-Farbe: Original "Presseartikel:" ist GRAU (#818181, ref-card-dom3.mjs
   Lauf 5) - nicht #333; bei uns wie ueberall #767676 fuer AA 4.5:1. */
.case-study p.case-study__label { font-weight: var(--fw-regular); color: var(--color-text-muted); margin-bottom: 2px; }
/* Behoerden-Logos (LUBW/WWA) stehen im Original als Inline-SVG zentriert in
   der Textspalte; Abstaende je Breite unten bzw. im Desktop-Block. */
.case-study__logo { display: block; margin: 0 auto; }
/* Presseartikel-Verweis: im Original blau (#0099ff gemessen). Wir nehmen den
   bereits im Projekt genutzten, AA-sicheren Blauton #0072e0 (~4,5:1 auf Weiss)
   auf ALLEN Breiten statt nur mobil - auf dem Desktop war der Verweis vorher
   grau und damit ein sichtbarer Farbverlust gegenueber dem Original. */
.case-study__link { color: #0072e0; transition: color var(--duration-hover) var(--ease-smooth); }
/* Hover-Sweep 2026-07: das Original dunkelt den Presse-Link leicht ab
   (#0099ff->#0088ff, ~7%). Analog auf unserem AA-Blau: #0072e0->#0065c8. */
.case-study__link:hover { color: #0065c8; }
.case-study__media img { width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--color-border); }

/* Unter 1200px: einspaltige, beschriftete Liste wie im Original.
   Wappen 51px + Name 18px, Zeilenschritt 90px, nach sechs Zeilen (540px)
   abgeschnitten; der "Alle zeigen"-Knopf klappt sie per JS vollstaendig aus. */
@media (max-width: 1199px) {
  /* Unter 1200px zeigt das Original KEINE Haarlinie unter dem Titel. */
  .ref-grid-wrap { margin-top: 31px; border-top: 0; }
  /* Original @390 (Lauf 5, gridChain-Probe): Listencontainer 510px hoch
     INKLUSIVE 39px Kopf-Polster - die Wappenzeilen selbst belegen 471px ab
     Oberkante des ersten Wappens. Unsere Zeilen starten 19,5px ueber dem
     ersten Wappen (51px-Wappen mittig in der 90px-Zeile), daher 471+19,5 ~
     490px. Die vorherigen 510px zeigten 20px zu viel von Zeile 6 und schoben
     alles Folgende nach unten. */
  .ref-grid {
    display: block;
    padding-top: 0; max-height: 490px; overflow: hidden;
  }
  /* Beschnitt -> Knopfkasten: Original 51px (Desktop: 47px). */
  .ref-showall { margin-top: 51px; }
  .ref-card {
    display: flex; align-items: center; justify-content: flex-start;
    gap: 18px; height: 90px;
  }
  .ref-card img { width: 51px; height: 51px; flex: none; }
  .ref-card__name {
    display: block;
    /* Fuellt die Restbreite neben dem Wappen und zentriert den Namen darin -
       so wie das Original (getComputedStyle @390: Namensbox w=243 > Text w=163,
       ta=center). Vorher hing der Name als schmaler Inhalt links am Wappen. */
    flex: 1;
    font-family: var(--font-heading);
    font-size: 18px; line-height: 1.2; font-weight: var(--fw-bold);
    text-align: center;
    color: var(--color-text);
  }
  /* Fade (.ref-fade) und "Alle zeigen"-Knopf (.ref-showall) gelten unveraendert
     aus dem Basisblock - das Original zeigt beide identisch @390 und @1440;
     unter 1200px stellt sich nur die Liste selbst auf eine Spalte um. */
  .case-study, .case-study--reverse {
    display: block; grid-template-columns: 1fr; direction: ltr;
    padding: 0; border-top: 0;
  }
  /* Lauf 5: Flaechentext ist im Original LINKSBUENDIG (getComputedStyle @390:
     p/label/link ta=left), nur die Kartentitel sind zentriert. Der Presse-Link
     ist blau: Original #0099ff (Kontrast 3.0 - WCAG-Fehler), wir nehmen das
     naechstliegende, barrierefreie Blau #0072e0 (Kontrast 4.68), damit
     Lighthouse-A11y=100 bleibt. */
  .case-study__text { text-align: left; }
  .case-study__text h3 { text-align: center; }
  .case-study__link { color: #0072e0; }
  /* Mobil-Kette Kompetenz - per PIXELDIFF entschieden (Lauf 5): die
     nachfolgenden Werte stammen aus ref5-detail.mjs DIREKT gegen
     https://www.spekter.de/referenzen/ (Original-H3 "Baden-Wuerttemberg"
     y=2534 wurde in zwei unabhaengigen ypos-Laeufen am Original bestaetigt)
     und liefern visdiff ref5d @390 = 6,48 % (Baender 5-7: 5,6/7,2/9,6).
     Die zwischenzeitliche Gegenkette (Intro->Karte 0px, Bild-Gaps 51/51,
     Titelanker 2477) verschob alles um ~-50px und verschlechterte auf
     11,83 % (Baender 5-7: 15,5/25,1/17,1; Band 8: 36,4 statt 26,4) -
     vd-ref5e-* in /opt/tooling. Kette @390 (Original):
       Intro-Boden     -> Titel 1    51px (2483 -> 2534, Container-Marge 56
                                          wg. 5px H2-Margendifferenz)
       Titel-1-Boden   -> LUBW       62px (2624 -> 2686)
       LUBW-Boden      -> Urkunde    49px (2749 -> 2798)
       Bild-1-Boden    -> Titel 2    71px (3358 -> 3429)
       Link-Boden      -> WWA        40px (3915 -> 3955)
       WWA-Boden       -> Bayern     42px (4018 -> 4060)
     Randkollaps beachtet: margins ersetzen kleinere Geschwister-Margen. */
  .section--kompetenz .container + .container { margin-top: 56px; }
  .case-study + .case-study { margin-top: 71px; }
  .case-study__logo--lubw { margin-top: 62px; }
  .case-study__logo--wwa { margin-top: 40px; }
  .case-study__media { margin-top: 49px; }
  .case-study--reverse .case-study__media { margin-top: 42px; }
  /* Fallstudienbild randlos ueber die volle Breite (Original: x=0, 390px breit,
     BEIDE Bilder fest 560px hoch mit object-fit cover; das Bayern-Bild wird
     also beschnitten, nicht in Naturhoehe 245 gezeigt). Bricht aus dem
     39px-Innenabstand des Containers aus. */
  .case-study__media img {
    width: calc(100% + 78px); max-width: none; margin: 0 -39px;
    height: 560px; object-fit: cover; border: 0; border-radius: 0;
  }
}

/* ============================================================
   Kompetenz-Fallstudien ab 1200px (Desktop) - am Original nachgemessen
   ============================================================
   DESKTOP-ONLY (min-width:1200px), damit die parallele Mobil-Arbeit an
   /referenzen/ unberuehrt bleibt. Betrifft nur referenzen.css.

   Original (Lauf 5 nachgemessen): jede Fallstudie ist eine WEISSE,
   abgerundete Karte (903x540, Radius 27, HAARLINIE statt Schatten - der
   Schatten-Slot ist im Ruhezustand transparent, die Kante ist im Zoom-Capture
   eine 1px-Linie), Innenabstand 36. Textspalte links, Titel 59px unter der
   Kartenoberkante (36 Karten- + 23 Spaltenpolster), Flaechentext linksbuendig,
   Titel zentriert; Urkunden-/Kartenbild rechts 331x468 (Radius 18, cover).
   Beide Karten haben das Bild RECHTS (nicht alternierend); die
   --reverse-Klasse wird hier neutralisiert.
   Karte 1 y=2424, Karte 2 y=3038 (Abstand 74px). Die Haarlinie liegt als
   0-0-0-1px-Schattenring an, damit die Kartenhoehe exakt 540 bleibt. */
@media (min-width: 1200px) {
  /* Restdelta Lauf 5: Karte-2-Boden -> Footer sind im Original 169px,
     bei uns 165 - die 4px auf das Standard-Sektionspolster (--space-9 = 96)
     aufgeschlagen (Dokumenthoehe exakt 4158). */
  .section--kompetenz { padding-bottom: 100px; }
  .section--kompetenz .case-study,
  .section--kompetenz .case-study--reverse {
    /* gap 36 (nicht 35): im Original hat die Infospalte 36px padding-right
       und die Textbreite ist exakt 464 (831 - 36 - 331). Mit 35 war unser
       Text 465px breit - eine andere Umbruchstelle im Bayern-Absatz war die
       Folge (Pixeldiff-Befund Lauf 5, ref-card-dom.mjs: Info Part pad
       "23px 36px 0px 0px"). */
    display: flex; direction: ltr; align-items: flex-start; gap: 36px;
    max-width: 903px; margin: 0 auto; padding: 36px;
    /* FESTE Kartenhoehe wie im Original (beide Karten exakt 540): die
       Textspalte von Karte 2 (Titel+Absatz+Presse+WWA-Logo = 521px ab
       Kartenoberkante) endet im Original 19px ueber dem Kartenboden -
       OHNE feste Hoehe drueckte sie die Karte auf 557px auf. */
    height: 540px;
    background: #fff; border: 0; border-top: 0; border-radius: 27px;
    box-shadow: 0 0 0 1px var(--color-border);
  }
  /* Einleitungsabsatz-Boden -> Karte 1: 74px (Original 2350 -> 2424). */
  .section--kompetenz .case-study:first-child { margin-top: 78px; }
  .section--kompetenz .case-study + .case-study { margin-top: 74px; }
  .section--kompetenz .case-study__text { flex: 1 1 auto; order: 0; text-align: left; padding-top: 23px; }
  .section--kompetenz .case-study__text h3 { text-align: center; }
  /* Logos: Titelboden 2528 -> LUBW 2598 = 70px; Linkboden 3449 -> WWA 3496 =
     47px (Randkollaps: margin ersetzt die kleinere Geschwister-Marge). */
  .section--kompetenz .case-study__logo--lubw { margin-top: 70px; }
  .section--kompetenz .case-study__logo--wwa { margin-top: 47px; }
  .section--kompetenz .case-study__media { flex: 0 0 331px; order: 1; }
  .section--kompetenz .case-study__media img {
    width: 331px; height: 468px; object-fit: cover;
    border: 0; border-radius: 18px;
  }
}