/* /referenzen/ · top8-Entwurf Karl 20.10.2026
   Lädt nach bauhaus.css + agentic-coding.css + hardheim.css (Tokens/Karten von dort).
   Eigene Klassen t8r-*, kein .lp2-split (bauhaus.css:168 erzwingt dort 2 Spalten). Stapeln unter 800 px selbst.
   Volle Höhe nur noch beim Zweispalter „Was alle gemeinsam haben" (unverändert, .folie-grp.bh-fh). */

/* --- Grund --- */
.t8-ref .bh-sec{min-height:0}
.t8-ref .content a{text-underline-offset:3px}

/* --- Zweispalter-Kopf: H2 links, Text rechts (Intro + Kundenstimme) --- */
.t8r-split{max-width:var(--bh-max)}
.t8r-split>.bh-n{margin-bottom:0!important}
.t8r-split>p{color:var(--ac-sec-text);max-width:62ch}
@media (min-width:800px){
  .t8r-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--ac-gap);align-items:start}
  .t8r-split>p{margin-top:.35em!important}
}
@media (max-width:799px){.t8r-split>*+*{margin-top:var(--ac-stack)!important}}

/* --- Kundenstimme als Statement, nicht mehr als leere Vollhöhen-Folie --- */
.t8r-voice .quote{margin:0;padding:4px 0 4px clamp(18px,2vw,28px);border-left:2px solid var(--ac-lime)}
.t8r-voice .quote blockquote{margin:0}
.t8r-voice .quote blockquote p{font-size:clamp(1.25rem,.9rem + 1vw,1.85rem)!important;line-height:1.45;font-weight:600;letter-spacing:-.01em;color:var(--ac-text);max-width:32ch;text-wrap:pretty;margin:0 0 18px!important}
.t8r-voice .quote figcaption{font-size:.95rem;color:var(--ac-muted)}
.t8r-voice .quote figcaption a{color:var(--ac-text);text-decoration:none;border-bottom:1px solid var(--ac-lime)}

/* --- Projekt-Zweispalter: Screenshot 7 | Text 5, abwechselnd gespiegelt --- */
.t8r-case-grid{max-width:var(--bh-max)}
.t8r-case-grid>.bh-n{margin-bottom:clamp(16px,2vh,24px)!important}
.t8r-case-grid>p:not(.ref-more){color:var(--ac-sec-text)}
.t8r-case-grid a{color:var(--ac-text);text-decoration:none;border-bottom:1px solid var(--ac-lime)}
.t8r-case-grid .ref-shot{margin:0;border:0;border-radius:16px;overflow:hidden;background:var(--ac-card);box-shadow:0 0 0 1px var(--ac-line),0 24px 48px rgba(0,0,0,.35)}
.t8r-case-grid .ref-shot img{display:block;width:100%;height:auto;border:0;border-radius:0}
.t8r-case-grid .ref-more{font-size:.92rem!important;font-weight:600}
.t8r-case-grid .ref-more a{border-bottom-color:var(--ac-lime);padding-bottom:2px}
.t8r-case-grid .ref-more a::after{content:" →";color:var(--ac-lime)}
@media (min-width:800px){
  .t8r-case-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--ac-gap);
    grid-template-rows:1fr auto auto auto 1fr;grid-template-areas:"fig ." "fig head" "fig text" "fig more" "fig .";align-items:start}
  .t8r-rev .t8r-case-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:". fig" "head fig" "text fig" "more fig" ". fig"}
  .t8r-case-grid>.bh-n{grid-area:head}
  .t8r-case-grid>.ref-shot{grid-area:fig;align-self:center}
  .t8r-case-grid>p:not(.ref-more){grid-area:text;margin:0!important}
  .t8r-case-grid>.ref-more{grid-area:more;margin:20px 0 0!important}
}
@media (max-width:799px){
  .t8r-case-grid{display:flex;flex-direction:column}
  .t8r-case-grid>.bh-n{order:1}
  .t8r-case-grid>.ref-shot{order:2;margin-bottom:22px}
  .t8r-case-grid>p:not(.ref-more){order:3;margin:0!important}
  .t8r-case-grid>.ref-more{order:4;margin:16px 0 0!important}
}
/* Projekt-Folgen enger zusammen: ein Block, Trennung über Hintergrund */
.t8r-case{padding-top:clamp(56px,2vw + 4vh,112px)!important;padding-bottom:clamp(56px,2vw + 4vh,112px)!important}

/* --- NEU: drei Bildkarten (Karten wie /webdesign-hardheim/ .hh-ref), bewusst kleiner als die Projekt-Zweispalter --- */
.t8r-more{padding-top:0!important}
.t8r-refs{max-width:var(--bh-max)!important;padding-top:clamp(40px,2vw + 3vh,80px);border-top:1px solid var(--ac-line)}
.t8r-ref{position:relative}
.t8r-ref .t8r-media{display:block;border-radius:10px;overflow:hidden;background:var(--ac-card2)}
.t8r-ref .t8r-media img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top center;border-radius:0}
.t8-ref .t8r-ref-t{font-size:1.05rem!important;line-height:1.35;font-weight:700;color:var(--ac-text);margin:4px 0 0!important;padding:0 6px;max-width:none;letter-spacing:0}
.t8r-ref .t8r-sub{margin:0!important;font-size:.95rem!important;line-height:1.55;color:var(--ac-muted)}
.t8r-ref .hh-ref-site{padding-top:4px}
.t8r-link::after{content:"";position:absolute;inset:0;border-radius:16px}
.t8r-link:focus-visible{outline:none}
.t8r-ref:has(.t8r-link:focus-visible){outline:2px solid var(--ac-lime);outline-offset:3px}
.t8r-ref:hover .hh-ref-site a{color:var(--ac-text);border-color:var(--ac-lime)}
@media (max-width:899px){.t8r-refs{grid-template-columns:1fr!important;max-width:560px!important}}
/* Handy: Handy-Screenshot als Gerät, das unten aus der Karte ragt (statt hohem Hochformat) */
@media (max-width:799px){
  .t8r-ref .t8r-media{display:flex;justify-content:center;aspect-ratio:4/3;padding-top:20px;box-sizing:border-box;
    background:radial-gradient(ellipse 60% 70% at 50% 100%,rgba(255,255,255,.05),transparent 70%),var(--ac-card2)}
  .t8r-ref .t8r-media img{width:44%;height:auto;aspect-ratio:390/844;object-fit:cover;object-position:top;align-self:flex-start;
    border:1px solid var(--ac-line2);border-bottom:0;border-radius:14px 14px 0 0}
}

/* --- FAQ: kein Vollhöhen-Zwang mehr --- */
.t8r-faq .faq{margin-top:0}

/* reduced-motion: Einblenden kommt aus hardheim.css (nur bei no-preference); Hover-Hub hier ebenfalls nur dann */
@media (prefers-reduced-motion:reduce){.t8r-ref,.t8r-ref:hover{transform:none!important;transition:none!important}}