/* =========================
   REFERENZEN LANDINGPAGE
   Qualitätsoptimiert – Design bleibt unverändert
========================= */

.std-references-page{
  background:#fff;
}


/* =========================
   HERO
========================= */

.std-references-hero{
  padding:162px 0 76px;
  background:
    radial-gradient(circle at top left, rgba(182,122,51,.10) 0%, rgba(182,122,51,0) 30%),
    linear-gradient(180deg,#faf7f2 0%, #ffffff 100%);
}


.std-references-hero-inner{
  max-width:900px;
  margin:0 auto;
  text-align:center;
  min-width:0;
}


.std-references-hero h1{
  margin:0 0 16px;
  font-size:clamp(3rem,5vw,5rem);
  line-height:1.02;
  letter-spacing:-.04em;
  text-wrap:balance;
}


.std-references-hero-text{
  max-width:760px;
  margin:0 auto;
  color:var(--std-text-soft);
  line-height:1.85;
  font-size:1.06rem;
  text-wrap:pretty;
}


.std-references-hero-points{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:32px;
}


.std-references-hero-point{
  min-width:0;
  background:rgba(255,255,255,.88);
  border:1px solid var(--std-line);
  border-radius:20px;
  padding:22px 20px;
  box-shadow:var(--std-shadow);
}


.std-references-hero-point strong{
  display:block;
  margin-bottom:6px;
  font-size:1.04rem;
}


.std-references-hero-point span{
  color:var(--std-text-soft);
  line-height:1.6;
  font-size:.95rem;
}


/* =========================
   INTRO
========================= */

.std-references-intro{
  padding:0 0 30px;
}


.std-references-intro-card{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  align-items:stretch;
  background:#fff;
  border:1px solid var(--std-line);
  border-radius:28px;
  padding:34px;
  box-shadow:var(--std-shadow);
}


.std-references-intro-content,
.std-references-intro-side{
  min-width:0;
}

.std-references-intro-content{
  display:flex;
  align-items:center;
}


.std-references-intro-content h2{
  margin:0 0 14px;
  font-size:clamp(2rem,4vw,3rem);
  line-height:1.06;
  letter-spacing:-.03em;
  text-wrap:balance;
}


.std-references-intro-content p{
  margin:0;
  color:var(--std-text-soft);
  line-height:1.82;
  text-wrap:pretty;
}


.std-references-intro-side{
  display:flex;
  align-items:stretch;
}


.std-references-side-card{
  width:100%;
  min-width:0;
  background:linear-gradient(135deg,#faf6ef 0%, #ffffff 100%);
  border:1px solid var(--std-line);
  border-radius:22px;
  padding:26px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}


.std-references-side-card strong{
  display:block;
  margin-bottom:10px;
  font-size:1.12rem;
}


.std-references-side-card p{
  margin:0;
  color:var(--std-text-soft);
  line-height:1.76;
}


/* =========================
   GALERIE & FILTER
========================= */

.std-references-gallery-section{
  padding-top:24px;
}


.std-references-filter-shell{
  background:#fff;
  border:1px solid var(--std-line);
  border-radius:28px;
  padding:30px;
  box-shadow:var(--std-shadow);
  margin-bottom:32px;
}


.std-references-filter-head{
  margin-bottom:22px;
}


.std-references-filter-head h2{
  margin:0 0 10px;
  font-size:clamp(1.95rem,4vw,2.7rem);
  line-height:1.06;
  letter-spacing:-.03em;
  text-wrap:balance;
}


.std-references-filter-head p{
  margin:0;
  color:var(--std-text-soft);
  line-height:1.78;
  max-width:760px;
  text-wrap:pretty;
}


.std-references-filter-groups{
  display:grid;
  gap:20px;
}


.std-references-filter-group{
  min-width:0;
  padding-top:2px;
}


.std-references-filter-label{
  display:block;
  margin-bottom:12px;
  font-size:.92rem;
  font-weight:700;
  color:var(--std-text-soft);
  text-transform:uppercase;
  letter-spacing:.06em;
}


.std-portfolio-filters{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:0;
}


.std-portfolio-filters-secondary{
  margin-top:0;
}


.std-filter-btn{
  min-height:46px;
  padding:0 18px;
  border:1px solid var(--std-line);
  border-radius:12px;
  background:#f8f5f0;
  color:var(--std-text);
  font:inherit;
  font-weight:600;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:
    background .22s ease,
    color .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    transform .22s ease;
}


@media (hover:hover) and (pointer:fine){

  .std-filter-btn:hover{
    background:#f2ebe1;
  }

}


.std-filter-btn.active{
  background:var(--std-accent);
  border-color:var(--std-accent);
  color:#fff;
}


.std-filter-btn:focus-visible{
  outline:3px solid rgba(182,122,51,.26);
  outline-offset:3px;
}


/* =========================
   ADAPTIVES PROJEKT- & MEDIENSYSTEM
   Startseite + Referenzseite
========================= */

.std-ba-card,
.std-project-card{
  min-width:0;
  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.std-ba-card.is-hidden,
.std-project-card.is-hidden{
  display:none !important;
}

/* STARTSEITE */
.std-home-project-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:26px;
  align-items:start;
}

/*
 * Die vier kleineren Startseiten-Projekte erhalten auf Desktop
 * dieselbe visuelle Medienhöhe innerhalb ihrer jeweiligen Zeile.
 * Dadurch entstehen keine zufälligen weißen Löcher im 7/5-Raster.
 * Das große Featured-Projekt bleibt bewusst unverändert.
 */
@media (min-width:1200px){

  .std-home-project-grid > .std-project-card:nth-child(n+2){
    align-self:stretch;
  }

  .std-home-project-grid > .std-project-card:nth-child(n+2) .std-ba-frame{
    height:clamp(330px,34vw,430px);
    aspect-ratio:auto;
  }

  /*
   * Das breite Außenbereichsbild darf den Rahmen vollständig füllen.
   * Die Garage bleibt vollständig sichtbar, weil dort das Hochformat
   * wichtiger ist als ein randloser Crop.
   */
  .std-home-project-grid > .std-project-card:nth-child(3)
  .std-project-image--single{
    object-fit:cover;
  }

  .std-home-project-grid > .std-project-card:nth-child(4)
  .std-project-image--single{
    object-fit:contain;
    background:
      linear-gradient(145deg,#f2efe9 0%,#e8e4dd 100%);
  }

}

.std-home-project-grid > .std-project-card{
  grid-column:span 6;
}

.std-home-project-grid > .std-project-card:first-child{
  grid-column:1 / -1;
}

.std-home-project-grid > .std-project-card:nth-child(2){
  grid-column:span 7;
}

.std-home-project-grid > .std-project-card:nth-child(3){
  grid-column:span 5;
}

.std-home-project-grid > .std-project-card:nth-child(4){
  grid-column:span 5;
}

.std-home-project-grid > .std-project-card:nth-child(5){
  grid-column:span 7;
}

/* REFERENZEN */
.std-portfolio-grid-references,
.std-reference-story-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:28px;
  align-items:start;
  grid-auto-flow:dense;
}

.std-reference-story-grid > .std-project-card{
  grid-column:span 6;
}

.std-reference-story-grid > .std-project-card--featured,
.std-reference-story-grid > .std-project-card--story,
.std-reference-story-grid > .std-project-card--detail-story,
.std-reference-story-grid > .std-project-card--comparison-wide{
  grid-column:1 / -1;
}

.std-reference-story-grid > .std-project-card:nth-child(2),
.std-reference-story-grid > .std-project-card:nth-child(4),
.std-reference-story-grid > .std-project-card:nth-child(7),
.std-reference-story-grid > .std-project-card:nth-child(9),
.std-reference-story-grid > .std-project-card:nth-child(13),
.std-reference-story-grid > .std-project-card:nth-child(15),
.std-reference-story-grid > .std-project-card:nth-child(18),
.std-reference-story-grid > .std-project-card:nth-child(20){
  grid-column:span 7;
}

.std-reference-story-grid > .std-project-card:nth-child(3),
.std-reference-story-grid > .std-project-card:nth-child(5),
.std-reference-story-grid > .std-project-card:nth-child(6),
.std-reference-story-grid > .std-project-card:nth-child(8),
.std-reference-story-grid > .std-project-card:nth-child(14),
.std-reference-story-grid > .std-project-card:nth-child(16),
.std-reference-story-grid > .std-project-card:nth-child(17),
.std-reference-story-grid > .std-project-card:nth-child(19),
.std-reference-story-grid > .std-project-card:nth-child(21){
  grid-column:span 5;
}

/* ECHTE VORHER-/NACHHER-SLIDER */
.std-ba-frame{
  position:relative;
  width:100%;
  height:auto;
  min-height:0;
  aspect-ratio:16 / 9;
  border-radius:24px;
  overflow:hidden;
  isolation:isolate;
  background:#e9e7e3;
  box-shadow:var(--std-shadow);
}

.std-project-media--featured{
  aspect-ratio:1536 / 710;
}

.std-project-media--wide{
  aspect-ratio:16 / 9;
}

.std-project-media--portrait{
  aspect-ratio:3 / 4;
}

.std-ba-after,
.std-ba-before{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}

.std-project-card:hover .std-ba-after,
.std-project-card:hover .std-ba-before{
  transform:none;
}

.std-ba-before-wrap{
  position:absolute;
  inset:0 auto 0 0;
  overflow:hidden;
  height:100%;
  z-index:2;
}

.std-ba-badge{
  position:absolute;
  top:16px;
  z-index:5;
  padding:8px 12px;
  border-radius:10px;
  background:rgba(20,20,20,.78);
  color:#fff;
  font-size:.92rem;
  font-weight:700;
  line-height:1;
  pointer-events:none;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

.std-ba-badge-left{ left:16px; }
.std-ba-badge-right{ right:16px; }

.std-ba-divider{
  position:absolute;
  top:0;
  bottom:0;
  width:2px;
  background:rgba(255,255,255,.95);
  z-index:4;
  transform:translateX(-50%);
  pointer-events:none;
}

.std-ba-handle{
  position:absolute;
  left:50%;
  top:50%;
  width:56px;
  height:56px;
  transform:translate(-50%,-50%);
  border-radius:999px;
  background:#fff;
  color:var(--std-accent-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.35rem;
  font-weight:800;
  box-shadow:0 10px 22px rgba(0,0,0,.16);
  pointer-events:none;
}

.std-ba-caption{
  position:absolute;
  left:18px;
  right:18px;
  bottom:18px;
  z-index:5;
  color:#fff;
  font-size:1.35rem;
  font-weight:800;
  line-height:1.15;
  text-shadow:0 2px 10px rgba(0,0,0,.55);
  pointer-events:none;
  overflow-wrap:anywhere;
}

.std-ba-frame::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:42%;
  z-index:3;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.72) 100%);
  pointer-events:none;
}

.std-ba-range{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  cursor:ew-resize;
  z-index:6;
  touch-action:pan-y;
  -webkit-tap-highlight-color:transparent;
}

.std-ba-frame:focus-within{
  outline:3px solid rgba(182,122,51,.24);
  outline-offset:3px;
}

/* VOLLbild-Fallback */
.std-project-full-links{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}

.std-project-full-links a{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:0 13px;
  border:1px solid var(--std-line);
  border-radius:10px;
  background:#fff;
  color:var(--std-text-soft);
  text-decoration:none;
  font-size:.86rem;
  font-weight:650;
  transition:
    border-color .2s ease,
    color .2s ease,
    background .2s ease;
}

@media (hover:hover) and (pointer:fine){
  .std-project-full-links a:hover{
    border-color:rgba(182,122,51,.38);
    color:var(--std-accent-dark);
    background:#faf7f2;
  }
}

/* EINZELBILDER */
.std-project-single{
  margin:0;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--std-line);
  border-radius:24px;
  box-shadow:var(--std-shadow);
}

.std-gallery-link{
  display:block;
  min-width:0;
  overflow:hidden;
  background:#ece9e4;
  text-decoration:none;
}

.std-project-single .std-project-image,
.std-reference-detail-card .std-project-image,
.std-reference-process-card .std-project-image{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:contain;
  object-position:center;
}

.std-project-single figcaption,
.std-reference-detail-card figcaption,
.std-reference-process-card figcaption{
  padding:15px 17px 17px;
  color:var(--std-text);
  font-size:.98rem;
  font-weight:700;
  line-height:1.4;
}

.std-home-project-grid .std-project-image--single{
  object-fit:contain;
  background:#e9e7e3;
}

/* SIDE-BY-SIDE & PROJEKTSTORY */
.std-project-comparison{
  min-width:0;
  background:#fff;
  border:1px solid var(--std-line);
  border-radius:26px;
  padding:22px;
  box-shadow:var(--std-shadow);
}

.std-project-comparison-head{
  margin-bottom:18px;
}

.std-project-comparison-head h3{
  margin:0;
  font-size:clamp(1.3rem,2.3vw,1.85rem);
  line-height:1.15;
  letter-spacing:-.02em;
}

.std-project-comparison-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  align-items:start;
}

.std-project-card--story .std-project-comparison-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.std-project-card--detail-story .std-project-comparison-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.std-project-comparison-item{
  min-width:0;
  margin:0;
  overflow:hidden;
  background:#f7f5f1;
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
}

.std-project-comparison-item .std-gallery-link{
  background:#ebe8e2;
}

.std-project-comparison-item img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:contain;
  object-position:center;
}

.std-project-comparison-item figcaption{
  padding:12px 14px 14px;
  color:var(--std-text-soft);
  font-size:.9rem;
  font-weight:700;
  line-height:1.35;
}

/* DETAILS & AUSFÃœHRUNG */
.std-reference-details-section{
  background:linear-gradient(180deg,#fff 0%,#fbfaf8 100%);
}

.std-reference-detail-grid,
.std-reference-process-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  align-items:start;
}

.std-reference-process-grid{
  align-items:stretch;
  grid-auto-flow:row;
}

.std-reference-detail-card,
.std-reference-process-card{
  min-width:0;
  margin:0;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--std-line);
  border-radius:22px;
  box-shadow:var(--std-shadow);
}

.std-reference-process-card{
  display:flex;
  flex-direction:column;
  height:100%;
}

.std-reference-detail-card .std-gallery-link{
  background:#ebe8e2;
}

/*
 * Arbeitsprozess:
 * Alle vier Karten bekommen auf Desktop dieselbe ruhige 4:3-Medienfläche.
 * Hoch- und Querformate bleiben mit object-fit:contain vollständig sichtbar.
 * Der freie Raum liegt damit kontrolliert innerhalb der Bildfläche statt
 * als große zufällige Lücke zwischen zwei Grid-Zeilen.
 */
.std-reference-process-card .std-gallery-link{
  display:grid;
  place-items:center;
  width:100%;
  aspect-ratio:4 / 3;
  background:
    linear-gradient(145deg,#f2efe9 0%,#e8e4dd 100%);
}

.std-reference-process-card .std-project-image{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  object-fit:contain;
  object-position:center;
}

.std-reference-process-card figcaption{
  margin-top:auto;
}

.std-reference-details-section .std-section-head,
.std-reference-process-section .std-section-head{
  max-width:820px;
  margin-left:auto;
  margin-right:auto;
}

.std-gallery-link:focus-visible,
.std-project-full-links a:focus-visible{
  outline:3px solid rgba(182,122,51,.28);
  outline-offset:3px;
}

/* =========================
   LEERZUSTAND
========================= */

.std-references-empty{
  margin-top:28px;
  padding:28px;
  text-align:center;
  background:#fff;
  border:1px solid var(--std-line);
  border-radius:24px;
  box-shadow:var(--std-shadow);
}


.std-references-empty h3{
  margin:0 0 10px;
  font-size:1.3rem;
}


.std-references-empty p{
  margin:0;
  color:var(--std-text-soft);
  line-height:1.75;
}


/* =========================
   VIDEO-BEREICH
========================= */

.std-references-video-block{
  background:#fff;
  border:1px solid var(--std-line);
  border-radius:28px;
  padding:34px;
  box-shadow:var(--std-shadow);
}


.std-references-video-head{
  margin-bottom:24px;
}


.std-references-video-head h2{
  margin:0 0 12px;
  font-size:clamp(2rem,4vw,2.9rem);
  line-height:1.06;
  letter-spacing:-.03em;
  text-wrap:balance;
}


.std-references-video-head p{
  margin:0;
  color:var(--std-text-soft);
  line-height:1.82;
  max-width:760px;
  text-wrap:pretty;
}


.std-references-video-placeholder-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}


.std-references-video-placeholder-card{
  min-width:0;
  min-height:150px;
  background:linear-gradient(135deg,#faf6ef 0%, #ffffff 100%);
  border:1px solid var(--std-line);
  border-radius:22px;
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}


.std-references-video-placeholder-card strong{
  display:block;
  margin-bottom:8px;
  font-size:1.06rem;
}


.std-references-video-placeholder-card span{
  color:var(--std-text-soft);
  line-height:1.68;
}


.std-video-placeholder-thumb{
  width:100%;
  aspect-ratio:16 / 10;
  border-radius:18px;
  margin-bottom:18px;
  overflow:hidden;
  border:1px solid var(--std-line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(0,0,0,.16) 100%),
    linear-gradient(135deg, #efe7dc 0%, #d9c3a5 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}


.std-video-placeholder-thumb span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 16px;
  border-radius:999px;
  background:rgba(255,255,255,.86);
  color:var(--std-text);
  font-size:.92rem;
  font-weight:700;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}


.std-home-cta-band-references{
  padding-top:0;
}


/* =========================================================
   GALERIE – FINALER FORMAT-FEINSCHLIFF
   Unterschiedliche Originalformate bleiben vollständig sichtbar,
   ohne große zufällige Leerflächen im Grid zu erzeugen.
========================================================= */

/* Einzelreferenzen bekommen eine klar definierte Medienfläche. */
.std-project-single .std-gallery-link{
  display:grid;
  place-items:center;
  width:100%;
  aspect-ratio:4 / 3;
  background:
    linear-gradient(145deg,#f2efe9 0%,#e8e4dd 100%);
}

.std-project-card--wide .std-project-single .std-gallery-link{
  aspect-ratio:16 / 9;
}

.std-project-card--standard .std-project-single .std-gallery-link{
  aspect-ratio:4 / 3;
}

.std-project-card--portrait .std-project-single .std-gallery-link{
  aspect-ratio:4 / 3;
}

.std-project-single .std-project-image{
  width:100%;
  height:100%;
  object-fit:contain;
}

/* Side-by-Side: gleiche kompakte Medienhöhe, kein leerer Karten-Unterbau. */
.std-project-comparison-item .std-gallery-link{
  display:grid;
  place-items:center;
  width:100%;
  aspect-ratio:4 / 3;
  background:
    linear-gradient(145deg,#f2efe9 0%,#e8e4dd 100%);
}

.std-project-comparison-item img{
  width:100%;
  height:100%;
  object-fit:contain;
}

/* Breite Vergleichsprojekte dürfen etwas flacher wirken. */
.std-project-card--comparison-wide
.std-project-comparison-item .std-gallery-link{
  aspect-ratio:16 / 10;
}

/* Garage / Projektstory: drei gleichwertige, kompakte Medienkacheln. */
.std-project-card--story .std-project-comparison{
  padding:22px;
}

.std-project-card--story
.std-project-comparison-item .std-gallery-link{
  aspect-ratio:4 / 3;
}

/* Vollbild-Aktionen weniger technisch, optisch als kleine Bildaktionen. */
.std-project-full-links{
  justify-content:flex-start;
  margin-top:10px;
}

.std-project-full-links a{
  min-height:36px;
  padding:0 12px;
  border-radius:999px;
  background:#faf8f5;
  font-size:.82rem;
}

/* Klickbare Bilder erhalten nur auf echten Zeigegeräten einen Hinweis. */
@media (hover:hover) and (pointer:fine){
  .std-gallery-link{
    cursor:zoom-in;
  }

  .std-gallery-link .std-project-image{
    transition:
      transform .28s ease,
      filter .28s ease;
  }

  .std-gallery-link:hover .std-project-image{
    transform:scale(1.012);
    filter:brightness(.985);
  }
}



/* Portrait-Slider bleiben kompakt im normalen Galerie-Raster.
   Der starke dunkle Verlauf wird hier bewusst reduziert,
   damit die eigentliche Aufnahme sichtbar bleibt. */
.std-project-media--portrait.std-ba-frame::after{
  height:18%;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.46) 100%
    );
}

.std-project-media--portrait .std-ba-caption{
  left:14px;
  right:auto;
  bottom:14px;
  max-width:calc(100% - 28px);
  padding:8px 11px;
  border-radius:10px;
  background:rgba(20,20,20,.68);
  font-size:1.05rem;
  text-shadow:none;
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}


/* =========================================================
   LIGHTBOX
========================================================= */

.std-gallery-dialog{
  width:min(94vw,1440px);
  max-width:1440px;
  height:min(92vh,980px);
  max-height:92vh;
  margin:auto;
  padding:0;
  border:0;
  border-radius:20px;
  overflow:hidden;
  background:#111;
  color:#fff;
  box-shadow:
    0 34px 90px rgba(0,0,0,.42),
    0 8px 28px rgba(0,0,0,.22);
}

.std-gallery-dialog::backdrop{
  background:rgba(8,8,8,.82);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}

.std-gallery-dialog-inner{
  position:relative;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  width:100%;
  height:100%;
  min-height:0;
}

.std-gallery-dialog-media{
  display:grid;
  place-items:center;
  min-width:0;
  min-height:0;
  padding:54px 24px 18px;
  overflow:hidden;
}

.std-gallery-dialog-image{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:calc(92vh - 110px);
  object-fit:contain;
}

.std-gallery-dialog-caption{
  min-height:52px;
  margin:0;
  padding:14px 70px 16px 20px;
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.86);
  font-size:.92rem;
  line-height:1.45;
}

.std-gallery-dialog-close{
  position:absolute;
  top:14px;
  right:14px;
  z-index:2;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  padding:0;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(18,18,18,.78);
  color:#fff;
  font:inherit;
  font-size:1.35rem;
  line-height:1;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(0,0,0,.22);
}

.std-gallery-dialog-close:focus-visible{
  outline:3px solid rgba(226,178,105,.62);
  outline-offset:3px;
}

html.std-gallery-modal-open,
html.std-gallery-modal-open body{
  overflow:hidden;
}

@media (max-width:767px){
  .std-gallery-dialog{
    width:100vw;
    max-width:none;
    height:100dvh;
    max-height:100dvh;
    border-radius:0;
  }

  .std-gallery-dialog-media{
    padding:58px 12px 12px;
  }

  .std-gallery-dialog-image{
    max-height:calc(100dvh - 112px);
  }

  .std-gallery-dialog-caption{
    padding:12px 60px 14px 14px;
    font-size:.86rem;
  }
}

@media (prefers-reduced-motion:reduce){
  .std-gallery-link .std-project-image{
    transition:none !important;
    transform:none !important;
  }
}


/* =========================
   REDUCED MOTION
========================= */

@media (prefers-reduced-motion:reduce){

  .std-filter-btn,
  .std-ba-card,
  .std-project-card,
  .std-gallery-link,
  .std-project-full-links a,
  .std-ba-after,
  .std-ba-before{
    transition:none !important;
  }

}


/* =========================================================
   PREMIUM MOTION PASS – BASISKLASSEN
   Aktivierung erfolgt erst gezielt über assets/js/main.js.
   Ohne JavaScript bzw. vor der Aktivierung bleibt jeder Inhalt
   vollständig sichtbar und die bestehende Website unverändert.
========================================================= */

:root{
  --std-motion-ease:cubic-bezier(.18,.78,.22,1);
  --std-motion-ease-soft:cubic-bezier(.22,.72,.22,1);
  --std-motion-duration:720ms;
  --std-motion-duration-long:840ms;
}

/*
 * Die Klasse .std-motion-enabled wird erst gesetzt, wenn main.js
 * alle Ziele vorbereitet hat. Dadurch gibt es keinen CSS-only
 * Zustand, in dem Inhalte versehentlich unsichtbar bleiben.
 */
.std-motion-enabled .std-motion-pending{
  --std-motion-delay:0ms;
  opacity:0;
  transition-delay:var(--std-motion-delay);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

/* 1. EDITORIAL LIFT
 * Für ausgewählte Überschriften und CTA-Inhalte.
 */
.std-motion-enabled .std-motion-pending.std-motion-lift{
  transform:translate3d(0,16px,0);
  transition:
    opacity 660ms var(--std-motion-ease) var(--std-motion-delay),
    transform 660ms var(--std-motion-ease) var(--std-motion-delay);
  will-change:opacity,transform;
}

.std-motion-enabled .std-motion-pending.std-motion-lift.is-motion-visible{
  opacity:1;
  transform:translate3d(0,0,0);
}

/* 2. CARD CASCADE
 * Sehr kleine Tiefenbewegung für Leistungen und Prozesskarten.
 */
.std-motion-enabled .std-motion-pending.std-motion-card{
  transform:translate3d(0,18px,0) scale(.985);
  transform-origin:50% 58%;
  transition:
    opacity 700ms var(--std-motion-ease) var(--std-motion-delay),
    transform 760ms var(--std-motion-ease) var(--std-motion-delay);
  will-change:opacity,transform;
}

.std-motion-enabled .std-motion-pending.std-motion-card.is-motion-visible{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}

/* 3. ARCHITECTURAL REVEAL
 * Projektmedien werden einmal ruhig freigelegt.
 * Kein starker Zoom und keine Veränderung des Bildausschnitts.
 */
.std-motion-enabled .std-motion-pending.std-motion-mask{
  transform:translate3d(0,10px,0) scale(.994);
  transition:
    opacity 720ms var(--std-motion-ease-soft) var(--std-motion-delay),
    transform var(--std-motion-duration-long) var(--std-motion-ease) var(--std-motion-delay),
    clip-path var(--std-motion-duration-long) var(--std-motion-ease) var(--std-motion-delay),
    -webkit-clip-path var(--std-motion-duration-long) var(--std-motion-ease) var(--std-motion-delay);
  will-change:opacity,transform,clip-path;
}

@supports ((clip-path:inset(1%)) or (-webkit-clip-path:inset(1%))){
  .std-motion-enabled .std-motion-pending.std-motion-mask{
    -webkit-clip-path:inset(7% 0 7% 0 round 22px);
    clip-path:inset(7% 0 7% 0 round 22px);
  }
}

.std-motion-enabled .std-motion-pending.std-motion-mask.is-motion-visible{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  -webkit-clip-path:inset(0 0 0 0 round 0);
  clip-path:inset(0 0 0 0 round 0);
}

/*
 * Detailbilder bekommen dieselbe Motion-Familie, aber noch ruhiger.
 * Damit bleibt Materialfotografie hochwertig und sachlich.
 */
.std-motion-enabled .std-motion-pending.std-motion-mask-soft{
  transform:translate3d(0,8px,0) scale(.99);
  transition:
    opacity 700ms var(--std-motion-ease-soft) var(--std-motion-delay),
    transform 820ms var(--std-motion-ease) var(--std-motion-delay),
    clip-path 820ms var(--std-motion-ease) var(--std-motion-delay),
    -webkit-clip-path 820ms var(--std-motion-ease) var(--std-motion-delay);
  will-change:opacity,transform,clip-path;
}

@supports ((clip-path:inset(1%)) or (-webkit-clip-path:inset(1%))){
  .std-motion-enabled .std-motion-pending.std-motion-mask-soft{
    -webkit-clip-path:inset(5% 0 5% 0 round 20px);
    clip-path:inset(5% 0 5% 0 round 20px);
  }
}

.std-motion-enabled .std-motion-pending.std-motion-mask-soft.is-motion-visible{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  -webkit-clip-path:inset(0 0 0 0 round 0);
  clip-path:inset(0 0 0 0 round 0);
}

/* 4. DIRECTIONAL PAIR
 * Für echte Vorher-/Nachher-Gegenüberstellungen und About-Split.
 * Die Wege bleiben bewusst sehr kurz.
 */
.std-motion-enabled .std-motion-pending.std-motion-from-left{
  transform:translate3d(-18px,0,0);
  transition:
    opacity 680ms var(--std-motion-ease-soft) var(--std-motion-delay),
    transform 760ms var(--std-motion-ease) var(--std-motion-delay);
  will-change:opacity,transform;
}

.std-motion-enabled .std-motion-pending.std-motion-from-right{
  transform:translate3d(18px,0,0);
  transition:
    opacity 680ms var(--std-motion-ease-soft) var(--std-motion-delay),
    transform 760ms var(--std-motion-ease) var(--std-motion-delay);
  will-change:opacity,transform;
}

.std-motion-enabled .std-motion-pending.std-motion-from-left.is-motion-visible,
.std-motion-enabled .std-motion-pending.std-motion-from-right.is-motion-visible{
  opacity:1;
  transform:translate3d(0,0,0);
}

/*
 * Sehr kleine Bildschirmbreiten: horizontale Wege noch weiter reduzieren.
 * So wirkt der Split nicht wie ein seitliches Hereinfliegen.
 */
@media (max-width:767px){
  .std-motion-enabled .std-motion-pending.std-motion-from-left{
    transform:translate3d(-12px,0,0);
  }

  .std-motion-enabled .std-motion-pending.std-motion-from-right{
    transform:translate3d(12px,0,0);
  }

  .std-motion-enabled .std-motion-pending.std-motion-from-left.is-motion-visible,
  .std-motion-enabled .std-motion-pending.std-motion-from-right.is-motion-visible{
    transform:translate3d(0,0,0);
  }
}

/*
 * Interaktive Vorher-/Nachher-Medien:
 * Die Reveal-Klasse darf nur auf dem äußeren Medienrahmen liegen.
 * Die eigentlichen Slider-Ebenen und der Range-Regler werden hier
 * ausdrücklich nicht transformiert oder verzögert.
 */
.std-motion-enabled .std-ba-range,
.std-motion-enabled .std-ba-before-wrap,
.std-motion-enabled .std-ba-before,
.std-motion-enabled .std-ba-after,
.std-motion-enabled .std-ba-divider,
.std-motion-enabled .std-ba-handle{
  animation:none;
}

/*
 * Reduced Motion:
 * Inhalte sind sofort vollständig sichtbar. Keine Maskenfahrt,
 * Translation oder Scale aus diesem Motion-Pass.
 */
@media (prefers-reduced-motion:reduce){
  .std-motion-enabled .std-motion-pending,
  .std-motion-enabled .std-motion-pending.std-motion-lift,
  .std-motion-enabled .std-motion-pending.std-motion-card,
  .std-motion-enabled .std-motion-pending.std-motion-mask,
  .std-motion-enabled .std-motion-pending.std-motion-mask-soft,
  .std-motion-enabled .std-motion-pending.std-motion-from-left,
  .std-motion-enabled .std-motion-pending.std-motion-from-right,
  .std-motion-enabled .std-motion-pending.is-motion-visible{
    opacity:1 !important;
    transform:none !important;
    -webkit-clip-path:none !important;
    clip-path:none !important;
    transition:none !important;
    will-change:auto !important;
  }
}

/* =========================================================
   DESKTOP-PRESERVATION >=1200px
   Die bereits freigegebenen visuellen Spezialfälle bleiben
   auf Desktop erhalten.
========================================================= */

@media (min-width:1200px){

  /* Balkon · Projekt 03 */
  .std-reference-story-grid >
  .std-project-card.std-project-card--portrait[data-project-type="before_after"]
  .std-project-media--portrait{
    aspect-ratio:4 / 3;
  }

  .std-reference-story-grid >
  .std-project-card.std-project-card--portrait[data-project-type="before_after"]
  .std-ba-after,
  .std-reference-story-grid >
  .std-project-card.std-project-card--portrait[data-project-type="before_after"]
  .std-ba-before{
    height:100%;
    object-fit:cover;
    object-position:center 44%;
  }

  /* Gewinkelte Treppenanlage */
  .std-reference-story-grid >
  .std-project-card:last-child
  .std-project-single .std-gallery-link{
    aspect-ratio:4 / 5;
    overflow:hidden;
  }

  .std-reference-story-grid >
  .std-project-card:last-child
  .std-project-single .std-project-image{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center top !important;
    background:#ebe8e2;
  }

  /* Prozessbereich */
  .std-reference-process-grid{
    align-items:start;
  }

  .std-reference-process-card{
    height:auto;
    align-self:start;
  }

  .std-reference-process-card .std-gallery-link{
    display:block;
    width:100%;
    overflow:hidden;
    line-height:0;
    background:#ebe8e2;
  }

  .std-reference-process-card .std-project-image{
    display:block;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    object-fit:cover !important;
  }

  .std-reference-process-card:nth-child(1) .std-gallery-link,
  .std-reference-process-card:nth-child(2) .std-gallery-link,
  .std-reference-process-card:nth-child(4) .std-gallery-link{
    aspect-ratio:4 / 5;
    min-height:320px;
  }

  .std-reference-process-card:nth-child(3) .std-gallery-link{
    aspect-ratio:16 / 10;
    min-height:260px;
  }

  .std-reference-process-card:nth-child(1) .std-project-image{
    object-position:center 58% !important;
  }

  .std-reference-process-card:nth-child(2) .std-project-image{
    object-position:center 56% !important;
  }

  .std-reference-process-card:nth-child(3) .std-project-image{
    object-position:center center !important;
  }

  .std-reference-process-card:nth-child(4) .std-project-image{
    object-position:center 22% !important;
  }

  .std-reference-process-card figcaption{
    margin-top:0;
  }

}


/* =========================================================
   PREMIUM RESPONSIVE REBUILD – HOME / REFERENZEN
   EIN verbindliches System bis 1199px.
========================================================= */


/* ---------------------------------------------------------
   900–1199px
--------------------------------------------------------- */

@media (min-width:900px) and (max-width:1199px){

  .std-references-hero{
    padding:124px 0 50px;
  }

  .std-references-hero-inner{
    max-width:920px;
  }

  .std-references-hero-points{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin-top:22px;
  }

  .std-references-hero-point{
    min-width:0;
    padding:14px 13px;
  }

  .std-references-intro{
    padding:20px 0 30px;
  }

  .std-references-intro-card{
    grid-template-columns:1fr;
    gap:12px;
    padding:26px;
  }

  .std-references-filter-shell{
    padding:24px;
  }

  .std-references-filter-head{
    margin-bottom:16px;
  }

  /* Homepage Portfolio */
  .std-home-project-grid{
    gap:18px;
  }

  .std-home-project-grid > .std-project-card{
    grid-column:span 6;
  }

  .std-home-project-grid > .std-project-card:first-child{
    grid-column:1 / -1;
  }

  .std-home-project-grid .std-ba-frame{
    height:auto !important;
  }

  .std-home-project-grid > .std-project-card:first-child .std-ba-frame{
    aspect-ratio:16 / 8.8;
  }

  .std-home-project-grid > .std-project-card:not(:first-child) .std-ba-frame{
    aspect-ratio:16 / 10;
  }

  /* Referenzen: 12-Spalten Editorial */
  .std-reference-story-grid{
    gap:18px;
  }

  .std-reference-story-grid > .std-project-card{
    grid-column:span 6;
  }

  .std-reference-story-grid >
  .std-project-card[data-project-type="before_after"],
  .std-reference-story-grid >
  .std-project-card[data-project-type="comparison"],
  .std-reference-story-grid >
  .std-project-card[data-project-type="story"]{
    grid-column:1 / -1;
  }

  .std-reference-story-grid >
  .std-project-card[data-project-type="single"]{
    grid-column:span 6;
  }

  .std-reference-story-grid >
  .std-project-card[data-project-type="before_after"]
  .std-ba-frame{
    height:auto;
    aspect-ratio:16 / 9.6;
  }

  .std-reference-story-grid >
  .std-project-card.std-project-card--portrait[data-project-type="before_after"]
  .std-ba-frame{
    aspect-ratio:4 / 3;
  }

  .std-project-card--wide .std-project-single .std-gallery-link{
    aspect-ratio:16 / 10;
  }

  .std-project-card--standard .std-project-single .std-gallery-link{
    aspect-ratio:4 / 3;
  }

  .std-project-card--portrait .std-project-single .std-gallery-link{
    aspect-ratio:4 / 5;
  }

  .std-project-single .std-project-image{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .std-reference-story-grid >
  .std-project-card:last-child
  .std-project-single .std-gallery-link{
    aspect-ratio:4 / 5;
  }

  .std-reference-story-grid >
  .std-project-card:last-child
  .std-project-single .std-project-image{
    object-fit:contain !important;
    object-position:center top !important;
    background:#ebe8e2;
  }

  .std-project-comparison{
    padding:16px;
  }

  .std-project-comparison-grid,
  .std-project-card--detail-story .std-project-comparison-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }

  .std-project-comparison-item .std-gallery-link{
    aspect-ratio:4 / 3;
  }

  .std-project-card--story .std-project-comparison-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .std-project-card--story .std-project-comparison-item:nth-child(3){
    grid-column:1 / -1;
  }

  .std-project-card--story .std-project-comparison-item:nth-child(3) .std-gallery-link{
    aspect-ratio:16 / 9;
  }

  /* Details 2x2 */
  .std-reference-detail-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
  }

  .std-reference-detail-card .std-gallery-link{
    aspect-ratio:4 / 3;
    overflow:hidden;
  }

  .std-reference-detail-card .std-project-image{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  /* Prozess 2x2 kompakt */
  .std-reference-process-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
    align-items:start;
  }

  .std-reference-process-card{
    align-self:start;
    height:auto;
  }

  .std-reference-process-card .std-gallery-link{
    aspect-ratio:4 / 3;
    min-height:0;
    overflow:hidden;
  }

  .std-reference-process-card:nth-child(3) .std-gallery-link{
    aspect-ratio:16 / 10;
  }

  .std-reference-process-card .std-project-image{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }

  .std-reference-process-card:nth-child(1) .std-project-image{
    object-position:center 58% !important;
  }

  .std-reference-process-card:nth-child(2) .std-project-image{
    object-position:center 56% !important;
  }

  .std-reference-process-card:nth-child(3) .std-project-image{
    object-position:center center !important;
  }

  .std-reference-process-card:nth-child(4) .std-project-image{
    object-position:center 24% !important;
  }

  /* Video kompakt, 3-spaltig */
  .std-references-video-block{
    padding:24px;
  }

  .std-references-video-placeholder-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
  }

  .std-references-video-placeholder-card{
    min-height:0;
    padding:14px;
  }

  .std-video-placeholder-thumb{
    aspect-ratio:16 / 9;
    margin-bottom:11px;
  }

}


/* ---------------------------------------------------------
   700–899px
--------------------------------------------------------- */

@media (min-width:700px) and (max-width:899px){

  .std-references-hero{
    padding:116px 0 44px;
  }

  .std-references-hero h1{
    margin-bottom:10px;
  }

  .std-references-hero-text{
    max-width:720px;
    font-size:.96rem;
    line-height:1.62;
  }

  .std-references-hero-points{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin-top:18px;
  }

  .std-references-hero-point{
    padding:12px 10px;
  }

  .std-references-hero-point strong{
    font-size:.9rem;
  }

  .std-references-hero-point span{
    font-size:.78rem;
    line-height:1.38;
  }

  .std-references-intro{
    padding:18px 0 26px;
  }

  .std-references-intro-card{
    grid-template-columns:minmax(0,1.15fr) minmax(215px,.85fr);
    gap:18px;
    padding:23px;
  }

  .std-references-intro-content h2{
    font-size:clamp(2rem,4.8vw,2.7rem);
  }

  .std-references-intro-content p,
  .std-references-side-card p{
    font-size:.9rem;
    line-height:1.56;
  }

  .std-references-filter-shell{
    padding:21px;
  }

  .std-references-filter-head{
    margin-bottom:14px;
  }

  .std-portfolio-filters{
    gap:8px;
  }

  .std-filter-btn{
    min-height:39px;
    padding:0 12px;
    font-size:.86rem;
  }

  /* Homepage */
  .std-home-project-grid{
    gap:15px;
  }

  .std-home-project-grid > .std-project-card{
    grid-column:span 6;
  }

  .std-home-project-grid > .std-project-card:first-child{
    grid-column:1 / -1;
  }

  .std-home-project-grid .std-ba-frame{
    height:auto !important;
    aspect-ratio:4 / 3;
  }

  .std-home-project-grid > .std-project-card:first-child .std-ba-frame{
    aspect-ratio:16 / 9;
  }

  /* Referenzen */
  .std-reference-story-grid{
    gap:15px;
  }

  .std-reference-story-grid > .std-project-card{
    grid-column:span 6;
  }

  .std-reference-story-grid >
  .std-project-card[data-project-type="before_after"],
  .std-reference-story-grid >
  .std-project-card[data-project-type="comparison"],
  .std-reference-story-grid >
  .std-project-card[data-project-type="story"]{
    grid-column:1 / -1;
  }

  .std-reference-story-grid >
  .std-project-card[data-project-type="single"]{
    grid-column:span 6;
  }

  .std-reference-story-grid >
  .std-project-card[data-project-type="before_after"]
  .std-ba-frame{
    height:auto;
    aspect-ratio:16 / 10;
  }

  .std-reference-story-grid >
  .std-project-card.std-project-card--portrait[data-project-type="before_after"]
  .std-ba-frame{
    aspect-ratio:4 / 3;
  }

  .std-project-card--wide .std-project-single .std-gallery-link{
    aspect-ratio:4 / 3;
  }

  .std-project-card--portrait .std-project-single .std-gallery-link{
    aspect-ratio:4 / 5;
  }

  .std-project-single .std-project-image{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .std-reference-story-grid >
  .std-project-card:last-child
  .std-project-single .std-project-image{
    object-fit:contain !important;
    object-position:center top !important;
    background:#ebe8e2;
  }

  .std-project-comparison{
    padding:14px;
  }

  .std-project-comparison-grid,
  .std-project-card--story .std-project-comparison-grid,
  .std-project-card--detail-story .std-project-comparison-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  .std-project-comparison-item .std-gallery-link{
    aspect-ratio:4 / 3;
  }

  .std-project-card--story .std-project-comparison-item:nth-child(3){
    grid-column:1 / -1;
  }

  .std-project-card--story .std-project-comparison-item:nth-child(3) .std-gallery-link{
    aspect-ratio:16 / 9;
  }

  /* Details + Prozess */
  .std-reference-detail-grid,
  .std-reference-process-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    align-items:start;
  }

  .std-reference-detail-card .std-gallery-link{
    aspect-ratio:4 / 3;
    overflow:hidden;
  }

  .std-reference-detail-card .std-project-image{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .std-reference-process-card{
    height:auto;
    align-self:start;
  }

  .std-reference-process-card .std-gallery-link{
    aspect-ratio:4 / 3;
    min-height:0;
    overflow:hidden;
  }

  .std-reference-process-card:nth-child(3) .std-gallery-link{
    aspect-ratio:16 / 10;
  }

  .std-reference-process-card .std-project-image{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }

  .std-reference-process-card:nth-child(1) .std-project-image{
    object-position:center 58% !important;
  }

  .std-reference-process-card:nth-child(2) .std-project-image{
    object-position:center 56% !important;
  }

  .std-reference-process-card:nth-child(3) .std-project-image{
    object-position:center !important;
  }

  .std-reference-process-card:nth-child(4) .std-project-image{
    object-position:center 24% !important;
  }

  /* Video 3 kompakte Cards */
  .std-references-video-block{
    padding:21px;
  }

  .std-references-video-placeholder-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
  }

  .std-references-video-placeholder-card{
    min-height:0;
    padding:12px;
  }

  .std-video-placeholder-thumb{
    aspect-ratio:16 / 9;
    margin-bottom:9px;
  }

  .std-references-video-placeholder-card strong{
    font-size:.9rem;
  }

  .std-references-video-placeholder-card > span{
    font-size:.78rem;
    line-height:1.42;
  }

}


/* ---------------------------------------------------------
   480–699px
   Large Phone / Small Tablet – stabiler Zwischenstand
--------------------------------------------------------- */

@media (min-width:480px) and (max-width:699px){

  .std-references-hero{
    padding:104px 0 38px;
  }

  .std-references-hero h1{
    margin-bottom:9px;
    font-size:clamp(2.7rem,11vw,3.8rem);
  }

  .std-references-hero-text{
    max-width:34rem;
    font-size:.88rem;
    line-height:1.5;
  }

  .std-references-hero-points{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
    margin-top:15px;
  }

  .std-references-hero-point{
    padding:9px 7px;
    border-radius:13px;
  }

  .std-references-hero-point strong{
    font-size:.76rem;
    line-height:1.15;
  }

  .std-references-hero-point span{
    margin-top:2px;
    font-size:.64rem;
    line-height:1.22;
  }

  .std-references-intro{
    padding:14px 0 20px;
  }

  .std-references-intro-card{
    grid-template-columns:1fr;
    gap:10px;
    padding:17px;
    border-radius:18px;
  }

  .std-references-intro-content h2{
    margin-bottom:8px;
    font-size:clamp(1.75rem,7.2vw,2.2rem);
    line-height:1.06;
  }

  .std-references-intro-content p{
    font-size:.82rem;
    line-height:1.46;
  }

  .std-references-side-card{
    padding:12px 13px;
    border-radius:14px;
  }

  .std-references-side-card strong{
    font-size:.84rem;
  }

  .std-references-side-card p{
    margin-top:3px;
    font-size:.76rem;
    line-height:1.4;
  }

  .std-references-filter-shell{
    padding:16px;
    border-radius:18px;
  }

  .std-references-filter-head{
    margin-bottom:11px;
  }

  .std-references-filter-head h2{
    font-size:clamp(1.55rem,6.8vw,2rem);
  }

  .std-references-filter-head p{
    font-size:.8rem;
    line-height:1.42;
  }

  .std-references-filter-groups{
    gap:10px;
  }

  .std-portfolio-filters{
    gap:6px;
  }

  .std-filter-btn{
    min-height:36px;
    padding:0 10px;
    font-size:.76rem;
  }

  /* Homepage:
     große Transformationen vollbreit,
     reine Einzelprojekte kompakt nebeneinander. */
  .std-home-project-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  .std-home-project-grid > .std-project-card{
    grid-column:1 / -1;
  }

  .std-home-project-grid >
  .std-project-card[data-project-type="single"]{
    grid-column:span 1;
  }

  .std-home-project-grid .std-ba-frame{
    height:auto !important;
    aspect-ratio:16 / 10;
  }

  .std-home-project-grid >
  .std-project-card[data-project-type="single"]
  .std-ba-frame{
    aspect-ratio:4 / 3;
  }

  /* Referenzportfolio:
     Singles teilen Reihen, echte Vergleiche bleiben groß. */
  .std-reference-story-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  .std-reference-story-grid > .std-project-card{
    grid-column:1 / -1;
  }

  .std-reference-story-grid >
  .std-project-card[data-project-type="single"]{
    grid-column:span 1;
  }

  .std-reference-story-grid >
  .std-project-card[data-project-type="before_after"]
  .std-ba-frame{
    height:auto;
    aspect-ratio:16 / 10;
    border-radius:17px;
  }

  .std-reference-story-grid >
  .std-project-card.std-project-card--portrait[data-project-type="before_after"]
  .std-ba-frame{
    aspect-ratio:4 / 3;
  }

  .std-reference-story-grid >
  .std-project-card.std-project-card--wide[data-project-type="single"]
  .std-project-single .std-gallery-link,
  .std-reference-story-grid >
  .std-project-card.std-project-card--standard[data-project-type="single"]
  .std-project-single .std-gallery-link{
    aspect-ratio:4 / 3;
  }

  .std-reference-story-grid >
  .std-project-card.std-project-card--portrait[data-project-type="single"]
  .std-project-single .std-gallery-link{
    aspect-ratio:4 / 5;
  }

  .std-project-single .std-project-image{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .std-reference-story-grid >
  .std-project-card:last-child
  .std-project-single .std-project-image{
    object-fit:contain !important;
    object-position:center top !important;
    background:#ebe8e2;
  }

  .std-project-single figcaption{
    padding:9px 10px 10px;
    font-size:.76rem;
    line-height:1.28;
  }

  /* Slider-UI kompakter */
  .std-ba-caption{
    left:9px;
    right:auto;
    bottom:9px;
    max-width:calc(100% - 18px);
    padding:6px 8px;
    font-size:.8rem;
    line-height:1.2;
  }

  .std-ba-badge{
    top:8px;
    padding:5px 7px;
    font-size:.64rem;
  }

  .std-ba-badge-left{ left:8px; }
  .std-ba-badge-right{ right:8px; }

  .std-ba-handle{
    width:40px;
    height:40px;
    font-size:.9rem;
  }

  .std-project-full-links{
    margin-top:6px;
    gap:5px;
  }

  .std-project-full-links a{
    min-height:31px;
    padding:0 8px;
    font-size:.68rem;
  }

  /* Vergleichs-/Storykarten bleiben horizontal lesbar. */
  .std-project-comparison{
    padding:10px;
    border-radius:16px;
  }

  .std-project-comparison-head{
    margin-bottom:8px;
  }

  .std-project-comparison-head h3{
    font-size:.96rem;
  }

  .std-project-comparison-grid,
  .std-project-card--detail-story .std-project-comparison-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
  }

  .std-project-comparison-item{
    border-radius:12px;
  }

  .std-project-comparison-item .std-gallery-link{
    aspect-ratio:4 / 3;
  }

  .std-project-comparison-item figcaption{
    padding:7px 8px 8px;
    font-size:.7rem;
  }

  .std-project-card--story .std-project-comparison-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .std-project-card--story .std-project-comparison-item:nth-child(3){
    grid-column:1 / -1;
  }

  .std-project-card--story .std-project-comparison-item:nth-child(3) .std-gallery-link{
    aspect-ratio:16 / 9;
  }

  /* Material = echtes 2x2 Editorial Grid */
  .std-reference-detail-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }

  .std-reference-detail-card{
    border-radius:14px;
  }

  .std-reference-detail-card .std-gallery-link{
    aspect-ratio:1 / 1;
    overflow:hidden;
  }

  .std-reference-detail-card .std-project-image{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .std-reference-detail-card figcaption{
    padding:7px 8px 9px;
    font-size:.68rem;
    line-height:1.22;
  }

  /* Prozess = 2x2, keine riesigen Hochformate */
  .std-reference-process-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    align-items:start;
  }

  .std-reference-process-card{
    height:auto;
    align-self:start;
    border-radius:14px;
  }

  .std-reference-process-card .std-gallery-link{
    aspect-ratio:4 / 3;
    min-height:0;
    overflow:hidden;
  }

  .std-reference-process-card .std-project-image{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }

  .std-reference-process-card:nth-child(1) .std-project-image{
    object-position:center 58% !important;
  }

  .std-reference-process-card:nth-child(2) .std-project-image{
    object-position:center 56% !important;
  }

  .std-reference-process-card:nth-child(3) .std-project-image{
    object-position:center !important;
  }

  .std-reference-process-card:nth-child(4) .std-project-image{
    object-position:center 24% !important;
  }

  .std-reference-process-card figcaption{
    margin-top:0;
    padding:7px 8px 9px;
    font-size:.7rem;
    line-height:1.22;
  }

  /* Video: kompakte Informationszeilen */
  .std-references-video-block{
    padding:16px;
    border-radius:18px;
  }

  .std-references-video-head{
    margin-bottom:12px;
  }

  .std-references-video-head h2{
    margin-bottom:5px;
    font-size:1.65rem;
  }

  .std-references-video-head p{
    font-size:.8rem;
    line-height:1.4;
  }

  .std-references-video-placeholder-grid{
    grid-template-columns:1fr;
    gap:7px;
  }

  .std-references-video-placeholder-card{
    display:grid;
    grid-template-columns:82px minmax(0,1fr);
    grid-template-rows:auto auto;
    column-gap:10px;
    row-gap:2px;
    min-height:0;
    padding:9px;
    border-radius:14px;
  }

  .std-video-placeholder-thumb{
    grid-column:1;
    grid-row:1 / span 2;
    width:82px;
    height:62px;
    aspect-ratio:auto;
    margin:0;
    border-radius:11px;
  }

  .std-video-placeholder-thumb span{
    min-height:28px;
    padding:0 7px;
    font-size:.62rem;
    white-space:nowrap;
  }

  .std-references-video-placeholder-card strong{
    grid-column:2;
    grid-row:1;
    align-self:end;
    margin:0;
    font-size:.82rem;
    line-height:1.2;
  }

  .std-references-video-placeholder-card > span{
    grid-column:2;
    grid-row:2;
    align-self:start;
    font-size:.7rem;
    line-height:1.3;
  }

  /* Mobile Motion kürzer */
  .std-motion-enabled .std-motion-pending.std-motion-card{
    transform:translate3d(0,10px,0) scale(.992);
  }

  .std-motion-enabled .std-motion-pending.std-motion-mask{
    transform:translate3d(0,6px,0) scale(.997);
  }

  .std-motion-enabled .std-motion-pending.std-motion-mask-soft{
    transform:translate3d(0,5px,0) scale(.995);
  }

  .std-motion-enabled .std-motion-pending.std-motion-from-left{
    transform:translate3d(-8px,0,0);
  }

  .std-motion-enabled .std-motion-pending.std-motion-from-right{
    transform:translate3d(8px,0,0);
  }

}


/* ---------------------------------------------------------
   <=429px
   Kleines Smartphone – höchste Informationsdichte
--------------------------------------------------------- */

@media (max-width:479px){

  .std-references-hero{
    padding:98px 0 34px;
  }

  .std-references-hero h1{
    margin-bottom:8px;
    font-size:clamp(2.5rem,12.5vw,3.25rem);
  }

  .std-references-hero-text{
    max-width:23rem;
    font-size:.82rem;
    line-height:1.44;
  }

  .std-references-hero-points{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:5px;
    margin-top:13px;
  }

  .std-references-hero-point{
    padding:8px 5px;
    border-radius:12px;
  }

  .std-references-hero-point strong{
    font-size:.68rem;
    line-height:1.12;
  }

  .std-references-hero-point span{
    margin-top:2px;
    font-size:.56rem;
    line-height:1.18;
  }

  .std-references-intro{
    padding:12px 0 17px;
  }

  .std-references-intro-card{
    grid-template-columns:1fr;
    gap:8px;
    padding:14px;
    border-radius:16px;
  }

  .std-references-intro-content h2{
    margin-bottom:7px;
    font-size:clamp(1.55rem,7.8vw,1.9rem);
    line-height:1.05;
  }

  .std-references-intro-content p{
    font-size:.76rem;
    line-height:1.4;
  }

  .std-references-side-card{
    padding:10px 11px;
    border-radius:13px;
  }

  .std-references-side-card strong{
    font-size:.77rem;
  }

  .std-references-side-card p{
    margin-top:3px;
    font-size:.7rem;
    line-height:1.34;
  }

  .std-references-filter-shell{
    padding:13px;
    border-radius:16px;
  }

  .std-references-filter-head{
    margin-bottom:9px;
  }

  .std-references-filter-head h2{
    font-size:clamp(1.38rem,7.3vw,1.7rem);
    line-height:1.05;
  }

  .std-references-filter-head p{
    font-size:.73rem;
    line-height:1.34;
  }

  .std-references-filter-groups{
    gap:8px;
  }

  .std-portfolio-filters{
    gap:5px;
  }

  .std-filter-btn{
    min-height:33px;
    padding:0 8px;
    font-size:.7rem;
  }

  /* Homepage */
  .std-home-project-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }

  .std-home-project-grid > .std-project-card{
    grid-column:1 / -1;
  }

  .std-home-project-grid >
  .std-project-card[data-project-type="single"]{
    grid-column:span 1;
  }

  .std-home-project-grid .std-ba-frame{
    height:auto !important;
    aspect-ratio:16 / 10;
  }

  .std-home-project-grid >
  .std-project-card[data-project-type="single"]
  .std-ba-frame{
    aspect-ratio:1 / 1;
  }

  /* Referenzen */
  .std-reference-story-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }

  .std-reference-story-grid > .std-project-card{
    grid-column:1 / -1;
  }

  .std-reference-story-grid >
  .std-project-card[data-project-type="single"]{
    grid-column:span 1;
  }

  .std-reference-story-grid >
  .std-project-card[data-project-type="before_after"]
  .std-ba-frame{
    height:auto;
    aspect-ratio:4 / 3;
    border-radius:16px;
  }

  .std-reference-story-grid >
  .std-project-card.std-project-card--portrait[data-project-type="before_after"]
  .std-ba-frame{
    aspect-ratio:4 / 3;
  }

  .std-reference-story-grid >
  .std-project-card[data-project-type="single"]
  .std-project-single .std-gallery-link{
    aspect-ratio:1 / 1;
  }

  .std-reference-story-grid >
  .std-project-card.std-project-card--portrait[data-project-type="single"]
  .std-project-single .std-gallery-link{
    aspect-ratio:4 / 5;
  }

  .std-project-single .std-project-image{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .std-reference-story-grid >
  .std-project-card:last-child
  .std-project-single .std-project-image{
    object-fit:contain !important;
    object-position:center top !important;
    background:#ebe8e2;
  }

  .std-project-single figcaption{
    padding:7px 7px 8px;
    font-size:.66rem;
    line-height:1.2;
  }

  /* BA UI */
  .std-ba-caption{
    left:7px;
    bottom:7px;
    max-width:calc(100% - 14px);
    padding:5px 7px;
    font-size:.72rem;
    line-height:1.16;
  }

  .std-ba-badge{
    top:7px;
    padding:4px 6px;
    font-size:.58rem;
  }

  .std-ba-badge-left{ left:7px; }
  .std-ba-badge-right{ right:7px; }

  .std-ba-handle{
    width:38px;
    height:38px;
    font-size:.84rem;
  }

  .std-project-full-links{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:4px;
    margin-top:5px;
  }

  .std-project-full-links a{
    min-width:0;
    min-height:29px;
    padding:0 5px;
    font-size:.62rem;
  }

  /* Vergleichsprojekte direkt horizontal statt endlos untereinander */
  .std-project-comparison{
    padding:8px;
    border-radius:15px;
  }

  .std-project-comparison-head{
    margin-bottom:7px;
  }

  .std-project-comparison-head h3{
    font-size:.88rem;
    line-height:1.18;
  }

  .std-project-comparison-grid,
  .std-project-card--detail-story .std-project-comparison-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:5px;
  }

  .std-project-comparison-item{
    border-radius:10px;
  }

  .std-project-comparison-item .std-gallery-link{
    aspect-ratio:4 / 3;
  }

  .std-project-comparison-item figcaption{
    padding:6px 6px 7px;
    font-size:.62rem;
    line-height:1.18;
  }

  /* Garage 2 + 1 */
  .std-project-card--story .std-project-comparison-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .std-project-card--story .std-project-comparison-item:nth-child(3){
    grid-column:1 / -1;
  }

  .std-project-card--story .std-project-comparison-item:nth-child(3) .std-gallery-link{
    aspect-ratio:16 / 9;
  }

  /* Material 2x2 */
  .std-reference-detail-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
  }

  .std-reference-detail-card{
    border-radius:12px;
  }

  .std-reference-detail-card .std-gallery-link{
    aspect-ratio:1 / 1;
    overflow:hidden;
  }

  .std-reference-detail-card .std-project-image{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .std-reference-detail-card figcaption{
    padding:6px 6px 7px;
    font-size:.61rem;
    line-height:1.18;
  }

  /* Prozess 2x2 */
  .std-reference-process-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
    align-items:start;
  }

  .std-reference-process-card{
    height:auto;
    align-self:start;
    border-radius:12px;
  }

  .std-reference-process-card .std-gallery-link{
    aspect-ratio:4 / 3;
    min-height:0;
    overflow:hidden;
  }

  .std-reference-process-card .std-project-image{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }

  .std-reference-process-card:nth-child(1) .std-project-image{
    object-position:center 58% !important;
  }

  .std-reference-process-card:nth-child(2) .std-project-image{
    object-position:center 56% !important;
  }

  .std-reference-process-card:nth-child(3) .std-project-image{
    object-position:center !important;
  }

  .std-reference-process-card:nth-child(4) .std-project-image{
    object-position:center 24% !important;
  }

  .std-reference-process-card figcaption{
    margin-top:0;
    padding:6px 6px 7px;
    font-size:.61rem;
    line-height:1.18;
  }

  /* Video extrem kompakt */
  .std-references-video-block{
    padding:13px;
    border-radius:16px;
  }

  .std-references-video-head{
    margin-bottom:10px;
  }

  .std-references-video-head h2{
    margin-bottom:4px;
    font-size:1.45rem;
  }

  .std-references-video-head p{
    font-size:.72rem;
    line-height:1.34;
  }

  .std-references-video-placeholder-grid{
    grid-template-columns:1fr;
    gap:6px;
  }

  .std-references-video-placeholder-card{
    display:grid;
    grid-template-columns:70px minmax(0,1fr);
    grid-template-rows:auto auto;
    column-gap:8px;
    row-gap:1px;
    min-height:0;
    padding:8px;
    border-radius:13px;
  }

  .std-video-placeholder-thumb{
    grid-column:1;
    grid-row:1 / span 2;
    width:70px;
    height:54px;
    aspect-ratio:auto;
    margin:0;
    border-radius:10px;
  }

  .std-video-placeholder-thumb span{
    min-height:25px;
    padding:0 6px;
    font-size:.56rem;
    white-space:nowrap;
  }

  .std-references-video-placeholder-card strong{
    grid-column:2;
    grid-row:1;
    align-self:end;
    margin:0;
    font-size:.75rem;
    line-height:1.16;
  }

  .std-references-video-placeholder-card > span{
    grid-column:2;
    grid-row:2;
    align-self:start;
    font-size:.63rem;
    line-height:1.25;
  }

  /* Kürzere Motionwege */
  .std-motion-enabled .std-motion-pending.std-motion-card{
    transform:translate3d(0,8px,0) scale(.994);
  }

  .std-motion-enabled .std-motion-pending.std-motion-mask{
    transform:translate3d(0,5px,0) scale(.998);
  }

  .std-motion-enabled .std-motion-pending.std-motion-mask-soft{
    transform:translate3d(0,4px,0) scale(.997);
  }

  .std-motion-enabled .std-motion-pending.std-motion-from-left{
    transform:translate3d(-6px,0,0);
  }

  .std-motion-enabled .std-motion-pending.std-motion-from-right{
    transform:translate3d(6px,0,0);
  }

}

/* =========================================================
   PHASE D – VERIFIZIERTER PORTFOLIO-/LIGHTBOX-FIX
   Echte Browsermessung:
   720px Preview = Tablet Portrait.

   Hauptziele:
   - keine impliziten 0px-/127px-Spalten mehr
   - kein grid-auto-flow:dense unter 1200px
   - keine 10px-Projektkarten
   - keine gemischten 4:5-/4:3-Reihen mit Restlöchern
   - normale Portfolio-Medien = cover
   - vollständiges Originalbild = Lightbox
========================================================= */


/* ---------------------------------------------------------
   GEMEINSAM UNTER 1200px
--------------------------------------------------------- */

@media (max-width:1199px){

  /*
   * Referenzgrid:
   * Dense Packing wird auf Mobile/Tablet vollständig beendet.
   * Die Reihenfolge bleibt exakt DOM-/Projekt-Reihenfolge.
   */
  .std-portfolio-grid-references,
  .std-reference-story-grid{
    grid-auto-flow:row !important;
    align-items:start;
  }

  /*
   * Homepage:
   * Die alten 12-Spalten-Nth-Child-Spans dürfen unter 1200px
   * keine impliziten Tracks mehr erzeugen.
   */
  .std-home-project-grid > .std-project-card{
    min-width:0;
  }

  /*
   * Normale Karten zeigen eine randlose Editorial-Vorschau.
   * Die vollständige Datei bleibt über die Lightbox zugänglich.
   */
  .std-home-project-grid .std-project-image--single,
  .std-reference-story-grid .std-project-single .std-project-image,
  .std-reference-detail-card .std-project-image,
  .std-reference-process-card .std-project-image{
    object-fit:cover !important;
  }

  /*
   * Der alte Sonderfall "Gewinkelte Treppenanlage = contain"
   * wird unter 1200px aufgehoben.
   */
  .std-reference-story-grid >
  .std-project-card:last-child
  .std-project-single .std-project-image{
    object-fit:cover !important;
    object-position:center 28% !important;
    background:#ebe8e2;
  }

}


/* ---------------------------------------------------------
   900–1199px
   TABLET LANDSCAPE / KLEINES NOTEBOOK
--------------------------------------------------------- */

@media (min-width:900px) and (max-width:1199px){

  /* Homepage = echte 2 Spalten nach dem Featured-Projekt */
  .std-home-project-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:18px;
  }

  .std-home-project-grid > .std-project-card{
    grid-column:span 1 !important;
    align-self:stretch;
  }

  .std-home-project-grid > .std-project-card:first-child{
    grid-column:1 / -1 !important;
  }

  .std-home-project-grid > .std-project-card:first-child .std-ba-frame{
    aspect-ratio:16 / 8.8;
  }

  .std-home-project-grid > .std-project-card:not(:first-child) .std-ba-frame,
  .std-home-project-grid > .std-project-card[data-project-type="single"]
  .std-project-single .std-gallery-link{
    aspect-ratio:4 / 3 !important;
  }

  .std-home-project-grid > .std-project-card:not(:first-child)
  .std-project-image{
    width:100%;
    height:100%;
    object-fit:cover !important;
  }


  /*
   * Referenzen:
   * zwei reale Tracks – kein verstecktes 12-Spalten-System mehr.
   */
  .std-reference-story-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:18px;
  }

  .std-reference-story-grid > .std-project-card{
    grid-column:span 1 !important;
    min-width:0;
  }

  /* Featured, Stories und echte Vergleichsmodule bleiben groß. */
  .std-reference-story-grid >
  .std-project-card--featured,
  .std-reference-story-grid >
  .std-project-card[data-project-type="comparison"],
  .std-reference-story-grid >
  .std-project-card[data-project-type="story"]{
    grid-column:1 / -1 !important;
  }

  /*
   * Editoriale Breitenkorrekturen:
   * Diese vier Einzelprojekte schließen bewusst Reihen,
   * damit ohne dense keine halben weißen Rasterlöcher entstehen.
   */
  .std-reference-story-grid > .std-project-card:nth-child(8),
  .std-reference-story-grid > .std-project-card:nth-child(14),
  .std-reference-story-grid > .std-project-card:nth-child(20),
  .std-reference-story-grid > .std-project-card:nth-child(21){
    grid-column:1 / -1 !important;
  }

  .std-reference-story-grid >
  .std-project-card[data-project-type="before_after"]
  .std-ba-frame,
  .std-reference-story-grid >
  .std-project-card[data-project-type="single"]
  .std-project-single .std-gallery-link{
    aspect-ratio:4 / 3 !important;
  }

  .std-reference-story-grid >
  .std-project-card:nth-child(8)
  .std-project-single .std-gallery-link,
  .std-reference-story-grid >
  .std-project-card:nth-child(14)
  .std-project-single .std-gallery-link,
  .std-reference-story-grid >
  .std-project-card:nth-child(20)
  .std-project-single .std-gallery-link,
  .std-reference-story-grid >
  .std-project-card:nth-child(21)
  .std-project-single .std-gallery-link{
    aspect-ratio:16 / 8.8 !important;
  }

  .std-reference-story-grid >
  .std-project-card.std-project-card--portrait[data-project-type="before_after"]
  .std-ba-frame{
    aspect-ratio:4 / 3 !important;
  }

  .std-reference-story-grid >
  .std-project-card.std-project-card--portrait[data-project-type="single"]
  .std-project-single .std-gallery-link{
    aspect-ratio:4 / 3 !important;
  }

  .std-project-single .std-project-image{
    width:100%;
    height:100%;
  }


  /* Material + Prozess = kontrolliertes 2x2-System */
  .std-reference-detail-grid,
  .std-reference-process-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
    align-items:start;
  }

  .std-reference-detail-card .std-gallery-link,
  .std-reference-process-card .std-gallery-link{
    display:block;
    width:100%;
    aspect-ratio:4 / 3 !important;
    min-height:0 !important;
    overflow:hidden;
  }

  .std-reference-detail-card .std-project-image,
  .std-reference-process-card .std-project-image{
    display:block;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    object-fit:cover !important;
  }


  /*
   * Tablet-Lightbox:
   * Inhalt bestimmt die Höhe statt eines pauschalen 92vh-Rahmens.
   */
  .std-gallery-dialog{
    width:min(92vw,1040px);
    max-width:1040px;
    height:auto;
    max-height:90dvh;
    overflow:auto;
    border-radius:18px;
  }

  .std-gallery-dialog-inner{
    grid-template-rows:auto auto;
    height:auto;
    min-height:0;
  }

  .std-gallery-dialog-media{
    min-height:0;
    padding:52px 18px 12px;
    overflow:hidden;
  }

  .std-gallery-dialog-image{
    width:auto;
    height:auto;
    max-width:100%;
    max-height:calc(90dvh - 112px);
    object-fit:contain;
  }

  .std-gallery-dialog-caption{
    min-height:0;
    padding:12px 66px 14px 16px;
    font-size:.88rem;
  }

}


/* ---------------------------------------------------------
   700–899px
   TABLET PORTRAIT – 720px real verifiziert
--------------------------------------------------------- */

@media (min-width:700px) and (max-width:899px){

  /*
   * Homepage:
   * Featured vollbreit, danach exakt zwei gleich breite Karten.
   * Alle vier kleineren Projekte benutzen dieselbe Medienhöhe.
   */
  .std-home-project-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:14px;
    align-items:start;
  }

  .std-home-project-grid > .std-project-card{
    grid-column:span 1 !important;
    min-width:0;
    align-self:stretch;
  }

  .std-home-project-grid > .std-project-card:first-child{
    grid-column:1 / -1 !important;
  }

  .std-home-project-grid > .std-project-card:first-child .std-ba-frame{
    aspect-ratio:16 / 9 !important;
  }

  .std-home-project-grid > .std-project-card:not(:first-child) .std-ba-frame,
  .std-home-project-grid > .std-project-card[data-project-type="single"]
  .std-project-single .std-gallery-link{
    height:auto !important;
    aspect-ratio:4 / 3 !important;
  }

  .std-home-project-grid > .std-project-card:not(:first-child)
  .std-project-image{
    width:100%;
    height:100%;
    object-fit:cover !important;
  }


  /*
   * Referenzportfolio:
   * Der Browser darf ausschließlich zwei explizite Spalten
   * erzeugen. Alle alten span-5/span-7-Regeln sind neutralisiert.
   */
  .std-reference-story-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-auto-columns:auto !important;
    grid-auto-flow:row !important;
    gap:14px;
    width:100%;
  }

  .std-reference-story-grid > .std-project-card{
    grid-column:1 / -1 !important;
    min-width:0;
    width:auto;
  }

  /*
   * Ab Projekt 16 beginnt bewusst der kompakte 2-Spalten-
   * Einzelbildblock. Vorher bleiben Transformationen und
   * komplexere Geschichten groß und ruhig.
   */
  .std-reference-story-grid >
  .std-project-card[data-project-type="single"]:nth-child(n+16){
    grid-column:span 1 !important;
  }

  /*
   * Beschichtete Außenfläche + Gewinkelte Treppenanlage
   * werden als breite Abschlussbilder geführt. Damit entsteht
   * am Seitenende keine lange Portraitkarte neben einer kurzen.
   */
  .std-reference-story-grid > .std-project-card:nth-child(20),
  .std-reference-story-grid > .std-project-card:nth-child(21){
    grid-column:1 / -1 !important;
  }

  .std-reference-story-grid >
  .std-project-card[data-project-type="before_after"]
  .std-ba-frame{
    width:100%;
    height:auto !important;
    aspect-ratio:16 / 10 !important;
    border-radius:19px;
  }

  .std-reference-story-grid >
  .std-project-card.std-project-card--portrait[data-project-type="before_after"]
  .std-ba-frame{
    aspect-ratio:4 / 3 !important;
  }

  .std-reference-story-grid >
  .std-project-card[data-project-type="single"]
  .std-project-single .std-gallery-link{
    display:block;
    width:100%;
    aspect-ratio:4 / 3 !important;
    overflow:hidden;
  }

  .std-reference-story-grid >
  .std-project-card:nth-child(20)
  .std-project-single .std-gallery-link,
  .std-reference-story-grid >
  .std-project-card:nth-child(21)
  .std-project-single .std-gallery-link{
    aspect-ratio:16 / 9 !important;
  }

  .std-reference-story-grid >
  .std-project-card.std-project-card--portrait[data-project-type="single"]
  .std-project-single .std-gallery-link{
    aspect-ratio:4 / 3 !important;
  }

  .std-reference-story-grid .std-project-single .std-project-image{
    width:100%;
    height:100%;
    max-width:none;
    object-fit:cover !important;
  }

  .std-reference-story-grid >
  .std-project-card:last-child
  .std-project-single .std-project-image{
    object-position:center 28% !important;
  }

  .std-project-single figcaption{
    min-height:0;
    padding:11px 12px 12px;
    font-size:.82rem;
    line-height:1.32;
  }


  /* Vergleich / Story bleibt intern kompakt zweispaltig. */
  .std-project-comparison{
    padding:13px;
    border-radius:19px;
  }

  .std-project-comparison-grid,
  .std-project-card--story .std-project-comparison-grid,
  .std-project-card--detail-story .std-project-comparison-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
  }

  .std-project-comparison-item .std-gallery-link{
    display:block;
    aspect-ratio:4 / 3;
    overflow:hidden;
  }

  .std-project-comparison-item img{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .std-project-card--story .std-project-comparison-item:nth-child(3){
    grid-column:1 / -1;
  }

  .std-project-card--story .std-project-comparison-item:nth-child(3)
  .std-gallery-link{
    aspect-ratio:16 / 9;
  }


  /*
   * Material + Prozess:
   * identische 4:3-Medienflächen, 2x2.
   */
  .std-reference-detail-grid,
  .std-reference-process-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:11px;
    align-items:start;
  }

  .std-reference-detail-card,
  .std-reference-process-card{
    height:auto;
    align-self:start;
  }

  .std-reference-detail-card .std-gallery-link,
  .std-reference-process-card .std-gallery-link{
    display:block;
    width:100%;
    aspect-ratio:4 / 3 !important;
    min-height:0 !important;
    overflow:hidden;
  }

  .std-reference-detail-card .std-project-image,
  .std-reference-process-card .std-project-image{
    display:block;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    object-fit:cover !important;
  }

  .std-reference-detail-card figcaption,
  .std-reference-process-card figcaption{
    min-height:0;
    padding:10px 11px 11px;
    font-size:.78rem;
    line-height:1.3;
  }


  /*
   * Lightbox:
   * Überschreibt auch die ältere <=767px Fullscreen-Regel,
   * wenn die echte Preview z.B. 720px breit ist.
   */
  .std-gallery-dialog{
    width:min(94vw,880px);
    max-width:880px;
    height:auto;
    max-height:90dvh;
    overflow:auto;
    border-radius:17px;
  }

  .std-gallery-dialog-inner{
    grid-template-rows:auto auto;
    height:auto;
    min-height:0;
  }

  .std-gallery-dialog-media{
    min-height:0;
    padding:50px 14px 10px;
    overflow:hidden;
  }

  .std-gallery-dialog-image{
    display:block;
    width:auto;
    height:auto;
    max-width:100%;
    max-height:calc(90dvh - 106px);
    object-fit:contain;
  }

  .std-gallery-dialog-caption{
    min-height:0;
    padding:11px 60px 13px 14px;
    font-size:.84rem;
    line-height:1.4;
  }

  .std-gallery-dialog-close{
    top:10px;
    right:10px;
    width:38px;
    height:38px;
  }

}


/* ---------------------------------------------------------
   480–699px
   Nur Stabilisierung für Phase D.
   Der eigentliche Phone-/Small-Tablet-Finalpass folgt separat.
--------------------------------------------------------- */

@media (min-width:480px) and (max-width:699px){

  .std-reference-story-grid{
    grid-auto-flow:row !important;
  }

  .std-home-project-grid > .std-project-card,
  .std-reference-story-grid > .std-project-card{
    min-width:0;
  }

  .std-home-project-grid .std-project-image--single,
  .std-reference-story-grid .std-project-single .std-project-image{
    object-fit:cover !important;
  }

}


/* ---------------------------------------------------------
   <=479px
   Nur Stabilisierung für Phase D.
   Finales Smartphone-Design folgt im eigenen Phone-Pass.
--------------------------------------------------------- */

@media (max-width:479px){

  .std-reference-story-grid{
    grid-auto-flow:row !important;
  }

  .std-home-project-grid > .std-project-card,
  .std-reference-story-grid > .std-project-card{
    min-width:0;
  }

  .std-home-project-grid .std-project-image--single,
  .std-reference-story-grid .std-project-single .std-project-image{
    object-fit:cover !important;
  }

}

/* =========================================================
   SMARTPHONE FINAL PASS – REFERENZEN
   Gilt ausschließlich bis 699px.
   Tablet ab 700px bleibt vollständig unverändert.

   Ziel:
   - keine Mini-Projektkarten im Hauptportfolio
   - keine impliziten Grid-Spalten
   - keine halben/weißen Rasterlöcher
   - klare volle Projektbreite auf Phone
   - Vergleichsmodule bleiben intern kompakt
========================================================= */

@media (max-width:699px){

  /*
   * HAUPTPORTFOLIO:
   * Auf Smartphone nur EIN expliziter Track.
   * Sämtliche alten span-/nth-child-Regeln werden neutralisiert.
   */
  .std-portfolio-grid-references,
  .std-reference-story-grid{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    grid-auto-columns:minmax(0,1fr) !important;
    grid-auto-flow:row !important;
    gap:12px !important;
    width:100% !important;
    max-width:100% !important;
    align-items:start !important;
  }

  .std-reference-story-grid > .std-project-card,
  .std-reference-story-grid > .std-project-card:nth-child(n),
  .std-reference-story-grid > .std-project-card[data-project-type],
  .std-reference-story-grid > .std-project-card--featured,
  .std-reference-story-grid > .std-project-card--wide,
  .std-reference-story-grid > .std-project-card--standard,
  .std-reference-story-grid > .std-project-card--portrait,
  .std-reference-story-grid > .std-project-card--story,
  .std-reference-story-grid > .std-project-card--detail-story,
  .std-reference-story-grid > .std-project-card--comparison-wide{
    grid-column:1 / -1 !important;
    grid-row:auto !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    align-self:start !important;
  }

  .std-reference-story-grid > .std-project-card[hidden]{
    display:none !important;
  }


  /*
   * BEFORE / AFTER:
   * Volle Breite, kompakte 4:3-Bühne.
   */
  .std-reference-story-grid
  .std-project-card[data-project-type="before_after"]
  .std-ba-frame,
  .std-reference-story-grid
  .std-project-card.std-project-card--portrait[data-project-type="before_after"]
  .std-ba-frame{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;

    aspect-ratio:4 / 3 !important;

    border-radius:16px;
    overflow:hidden;
  }


  /*
   * SINGLE-PROJEKTE:
   * Alle Varianten bekommen dieselbe visuelle Medienhöhe.
   * Kein 4:5-Portrait mehr mitten im Smartphone-Flow.
   */
  .std-reference-story-grid
  .std-project-card[data-project-type="single"]
  .std-project-single{
    width:100% !important;
    min-width:0 !important;
  }

  .std-reference-story-grid
  .std-project-card[data-project-type="single"]
  .std-project-single .std-gallery-link,
  .std-reference-story-grid
  .std-project-card.std-project-card--wide[data-project-type="single"]
  .std-project-single .std-gallery-link,
  .std-reference-story-grid
  .std-project-card.std-project-card--standard[data-project-type="single"]
  .std-project-single .std-gallery-link,
  .std-reference-story-grid
  .std-project-card.std-project-card--portrait[data-project-type="single"]
  .std-project-single .std-gallery-link{
    display:block !important;

    width:100% !important;
    height:auto !important;
    min-height:0 !important;

    aspect-ratio:4 / 3 !important;

    overflow:hidden;
  }

  .std-reference-story-grid
  .std-project-card[data-project-type="single"]
  .std-project-single .std-project-image,
  .std-reference-story-grid
  .std-project-card:last-child
  .std-project-single .std-project-image{
    display:block;

    width:100% !important;
    height:100% !important;
    max-width:none !important;

    object-fit:cover !important;
  }

  /*
   * Gewinkelte Treppenanlage:
   * auf Phone kein contain-/Letterbox-Sonderfall.
   */
  .std-reference-story-grid >
  .std-project-card:last-child
  .std-project-single .std-project-image{
    object-position:center 28% !important;
    background:#ebe8e2;
  }

  .std-reference-story-grid .std-project-single figcaption{
    min-height:0 !important;

    padding:9px 10px 10px;

    font-size:.72rem;
    line-height:1.28;
  }


  /*
   * VERGLEICHE / STORYS:
   * Hauptkarte bleibt volle Breite.
   * Innerhalb der Karte dürfen zwei Motive nebeneinander stehen.
   */
  .std-reference-story-grid .std-project-comparison{
    width:100%;
    min-width:0;

    padding:9px;

    border-radius:15px;
  }

  .std-reference-story-grid .std-project-comparison-grid,
  .std-reference-story-grid
  .std-project-card--detail-story .std-project-comparison-grid,
  .std-reference-story-grid
  .std-project-card--story .std-project-comparison-grid{
    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr)) !important;

    gap:6px;
  }

  .std-reference-story-grid
  .std-project-comparison-item{
    min-width:0;

    border-radius:11px;

    overflow:hidden;
  }

  .std-reference-story-grid
  .std-project-comparison-item .std-gallery-link{
    display:block;

    width:100%;
    min-height:0;

    aspect-ratio:4 / 3 !important;

    overflow:hidden;
  }

  .std-reference-story-grid
  .std-project-comparison-item img{
    display:block;

    width:100% !important;
    height:100% !important;

    object-fit:cover;
  }

  .std-reference-story-grid
  .std-project-comparison-item figcaption{
    padding:6px 7px 7px;

    font-size:.64rem;
    line-height:1.2;
  }

  /*
   * 3-Bild-Story: 2 oben + 1 breit unten.
   */
  .std-reference-story-grid
  .std-project-card--story
  .std-project-comparison-item:nth-child(3){
    grid-column:1 / -1 !important;
  }

  .std-reference-story-grid
  .std-project-card--story
  .std-project-comparison-item:nth-child(3)
  .std-gallery-link{
    aspect-ratio:16 / 9 !important;
  }


  /*
   * FILTER:
   * horizontal scrollbar verhindern; Buttons dürfen umbrechen.
   */
  .std-references-filter-shell,
  .std-references-filter-groups,
  .std-portfolio-filters{
    max-width:100%;
    min-width:0;
  }

  .std-portfolio-filters{
    display:flex;
    flex-wrap:wrap;
  }

}


/* ---------------------------------------------------------
   360–479px
   Enger Phone-Feinschliff
--------------------------------------------------------- */

@media (max-width:479px){

  .std-reference-story-grid{
    gap:10px !important;
  }

  .std-reference-story-grid
  .std-project-card[data-project-type="before_after"]
  .std-ba-frame{
    aspect-ratio:4 / 3 !important;
  }

  .std-reference-story-grid
  .std-project-card[data-project-type="single"]
  .std-project-single .std-gallery-link{
    aspect-ratio:4 / 3 !important;
  }

  .std-reference-story-grid
  .std-project-single figcaption{
    padding:8px 9px 9px;

    font-size:.69rem;
  }

  .std-reference-story-grid .std-project-comparison{
    padding:7px;
  }

  .std-reference-story-grid .std-project-comparison-grid,
  .std-reference-story-grid
  .std-project-card--detail-story .std-project-comparison-grid,
  .std-reference-story-grid
  .std-project-card--story .std-project-comparison-grid{
    gap:5px;
  }

  .std-reference-story-grid
  .std-project-comparison-item figcaption{
    padding:5px 6px 6px;

    font-size:.61rem;
  }

}


/* ---------------------------------------------------------
   480–699px
   Large Phone / Small Tablet:
   Hauptportfolio ebenfalls vollbreit, etwas großzügiger.
--------------------------------------------------------- */

@media (min-width:480px) and (max-width:699px){

  .std-reference-story-grid{
    gap:14px !important;
  }

  .std-reference-story-grid
  .std-project-card[data-project-type="before_after"]
  .std-ba-frame{
    aspect-ratio:16 / 10 !important;
  }

  .std-reference-story-grid
  .std-project-card[data-project-type="single"]
  .std-project-single .std-gallery-link{
    aspect-ratio:16 / 10 !important;
  }

  .std-reference-story-grid
  .std-project-single figcaption{
    padding:10px 11px 11px;

    font-size:.76rem;
  }

}

/* =========================================================
   PHONE-B1 – HOMEPAGE / PROJEKTE / SLIDER
   Gilt ausschließlich <=699px.
   Tablet ab 700px und Desktop bleiben unangetastet.

   Browser-verifizierte Ursachen:
   1) Homepage-Grid erzeugte implizite 0px-Tracks aus
      alten Desktop-Spans.
   2) Slider-/Single-Bilder wurden trotz kleiner Frames
      weiterhin mit 420px Höhe berechnet.
========================================================= */

@media (max-width:699px){

  /* -------------------------------------------------------
     PORTFOLIO-RHYTHMUS
     ------------------------------------------------------- */

  #portfolio .std-section-head{
    margin-bottom:20px !important;
  }

  #portfolio .std-portfolio-filters{
    margin-bottom:14px !important;
  }


  /* -------------------------------------------------------
     HOMEPAGE-GRID
     Eine echte Smartphone-Struktur – keine 12 Desktop-Tracks.
     ------------------------------------------------------- */

  .std-home-project-grid{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    grid-auto-columns:minmax(0,1fr) !important;
    grid-auto-flow:row !important;

    width:100% !important;
    max-width:100% !important;

    gap:14px !important;

    align-items:start !important;
  }

  .std-home-project-grid > .std-project-card,
  .std-home-project-grid > .std-project-card:nth-child(n),
  .std-home-project-grid >
  .std-project-card[data-project-type]{
    grid-column:1 / -1 !important;
    grid-row:auto !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    margin:0 !important;

    align-self:start !important;
  }

  .std-home-project-grid > .std-project-card[hidden]{
    display:none !important;
  }


  /* -------------------------------------------------------
     BEFORE / AFTER
     Der Frame bestimmt die echte Bildhöhe.
     ------------------------------------------------------- */

  .std-home-project-grid
  .std-project-card[data-project-type="before_after"]
  .std-ba-frame,
  .std-home-project-grid
  .std-project-card--featured
  .std-ba-frame,
  .std-home-project-grid
  .std-project-card--wide
  .std-ba-frame{
    display:block;

    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    aspect-ratio:16 / 10 !important;

    border-radius:17px;

    overflow:hidden !important;
  }

  /*
   * Kritischer Root-Cause-Fix:
   * überschreibt die gemessene 420px-Bildhöhe.
   */
  .std-home-project-grid .std-ba-frame > .std-ba-after,
  .std-home-project-grid .std-ba-frame .std-ba-before-wrap > .std-ba-before{
    position:absolute !important;
    inset:0 !important;

    display:block !important;

    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;

    object-fit:cover !important;
    object-position:center !important;
  }

  .std-home-project-grid .std-ba-before-wrap{
    top:0 !important;
    bottom:0 !important;

    height:100% !important;
    min-height:0 !important;
    max-height:none !important;

    overflow:hidden !important;
  }

  /*
   * Safari range input:
   * keine UA-Margins außerhalb des sichtbaren Frames.
   */
  .std-home-project-grid .std-ba-range{
    position:absolute !important;
    inset:0 !important;

    width:100% !important;
    height:100% !important;

    margin:0 !important;
    padding:0 !important;

    -webkit-appearance:none;
    appearance:none;
  }

  .std-home-project-grid .std-ba-badge{
    top:8px;

    padding:5px 8px;

    border-radius:8px;

    font-size:.67rem;
  }

  .std-home-project-grid .std-ba-badge-left{
    left:8px;
  }

  .std-home-project-grid .std-ba-badge-right{
    right:8px;
  }

  .std-home-project-grid .std-ba-handle{
    width:40px;
    height:40px;

    font-size:1rem;
  }

  .std-home-project-grid .std-ba-caption{
    left:10px;
    right:10px;
    bottom:10px;

    font-size:.82rem;
    line-height:1.16;
  }

  .std-home-project-grid .std-ba-frame::after{
    height:40%;
  }


  /* -------------------------------------------------------
     SINGLE-PROJEKTE
     ------------------------------------------------------- */

  .std-home-project-grid
  .std-project-card[data-project-type="single"]
  .std-project-single{
    width:100% !important;
    min-width:0 !important;

    margin:0 !important;

    border-radius:17px;

    overflow:hidden !important;
  }

  .std-home-project-grid
  .std-project-card[data-project-type="single"]
  .std-project-single .std-gallery-link{
    display:block !important;

    width:100% !important;
    height:auto !important;
    min-height:0 !important;

    aspect-ratio:4 / 3 !important;

    overflow:hidden !important;
  }

  /*
   * Zweiter Root-Cause-Fix:
   * auch Single-Bilder dürfen die globale 420px-Höhe
   * auf Phone nicht übernehmen.
   */
  .std-home-project-grid
  .std-project-card[data-project-type="single"]
  .std-project-single .std-project-image,
  .std-home-project-grid
  .std-project-card[data-project-type="single"]
  .std-project-single .std-project-image--single{
    display:block !important;

    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    max-width:none !important;

    object-fit:cover !important;
    object-position:center !important;
  }

  .std-home-project-grid
  .std-project-card[data-project-type="single"]
  .std-project-single figcaption{
    min-height:0 !important;

    padding:9px 10px 10px;

    font-size:.73rem;
    line-height:1.28;
  }

}


/* ---------------------------------------------------------
   EXTRA-SMALL PHONE
   0–389px:
   alles bewusst vollbreit.
--------------------------------------------------------- */

@media (max-width:389px){

  .std-home-project-grid{
    grid-template-columns:minmax(0,1fr) !important;
    gap:12px !important;
  }

  .std-home-project-grid > .std-project-card,
  .std-home-project-grid >
  .std-project-card[data-project-type="single"]{
    grid-column:1 / -1 !important;
  }

  .std-home-project-grid
  .std-project-card[data-project-type="before_after"]
  .std-ba-frame{
    aspect-ratio:16 / 10 !important;
  }

  .std-home-project-grid
  .std-project-card[data-project-type="single"]
  .std-project-single .std-gallery-link{
    aspect-ratio:4 / 3 !important;
  }

}


/* ---------------------------------------------------------
   PHONE
   390–479px:
   große Transformationen vollbreit,
   Außenbereich + Garage als kuratiertes Duo.
--------------------------------------------------------- */

@media (min-width:390px) and (max-width:479px){

  .std-home-project-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
  }

  .std-home-project-grid >
  .std-project-card[data-project-type="before_after"]{
    grid-column:1 / -1 !important;
  }

  .std-home-project-grid >
  .std-project-card[data-project-type="single"]{
    grid-column:span 1 !important;
  }

  .std-home-project-grid
  .std-project-card[data-project-type="single"]
  .std-project-single .std-gallery-link{
    aspect-ratio:1 / 1 !important;
  }

  .std-home-project-grid
  .std-project-card[data-project-type="single"]
  .std-project-single figcaption{
    padding:8px 9px 9px;

    font-size:.69rem;
  }

}


/* ---------------------------------------------------------
   LARGE PHONE / SMALL TABLET
   480–699px:
   gleiche Informationshierarchie, etwas großzügiger.
--------------------------------------------------------- */

@media (min-width:480px) and (max-width:699px){

  .std-home-project-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:14px !important;
  }

  .std-home-project-grid >
  .std-project-card[data-project-type="before_after"]{
    grid-column:1 / -1 !important;
  }

  .std-home-project-grid >
  .std-project-card[data-project-type="single"]{
    grid-column:span 1 !important;
  }

  .std-home-project-grid
  .std-project-card[data-project-type="before_after"]
  .std-ba-frame{
    aspect-ratio:16 / 9 !important;
  }

  .std-home-project-grid
  .std-project-card[data-project-type="single"]
  .std-project-single .std-gallery-link{
    aspect-ratio:4 / 3 !important;
  }

}

/* =========================================================
   PHONE FINAL – REFERENZ BEFORE/AFTER SLIDER
   Gilt ausschließlich <=699px.

   Browser-verifizierter Root Cause:
   main.css:
     .std-project-card img { height:420px; }

   gewinnt durch höhere Spezifität gegen die allgemeine
   Sliderregel. Die Homepage wurde in PHONE-B1 bereits
   korrigiert; hier wird ausschließlich das Referenzportfolio
   auf dieselbe saubere Frame-Geometrie gebracht.

   Tablet >=700px, Singles, Storys, Vergleiche und Lightbox
   bleiben vollständig unverändert.
========================================================= */

@media (max-width:699px){

  /*
   * Der sichtbare Sliderframe bleibt die alleinige
   * Größenquelle für beide Bilder.
   */
  .std-reference-story-grid
  .std-project-card[data-project-type="before_after"]
  .std-ba-frame > img.std-ba-after,
  .std-reference-story-grid
  .std-project-card[data-project-type="before_after"]
  .std-ba-frame
  .std-ba-before-wrap > img.std-ba-before{
    position:absolute !important;
    inset:0 !important;

    display:block !important;

    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    max-width:none !important;

    object-fit:cover !important;

    margin:0 !important;
    padding:0 !important;

    pointer-events:none;
  }


  /*
   * Vorher-Clipping exakt auf Framehöhe.
   * Die horizontale Sliderbreite darf das bestehende JS
   * weiterhin dynamisch verändern.
   */
  .std-reference-story-grid
  .std-project-card[data-project-type="before_after"]
  .std-ba-before-wrap{
    top:0 !important;
    bottom:0 !important;

    height:100% !important;
    min-height:0 !important;
    max-height:none !important;

    overflow:hidden !important;
  }


  /*
   * Safari Range-Input exakt über dem sichtbaren Frame.
   * Keine Browser-UA-Margins außerhalb der Komponente.
   */
  .std-reference-story-grid
  .std-project-card[data-project-type="before_after"]
  .std-ba-range{
    position:absolute !important;
    inset:0 !important;

    width:100% !important;
    height:100% !important;

    margin:0 !important;
    padding:0 !important;
  }

}

/* =========================================================
   FINAL RESPONSIVE DESIGN BUILD
   SMARTPHONE ART DIRECTION / CONVERSION REFINEMENT
   ---------------------------------------------------------
   Scope: ausschließlich <=699px.

   DESIGNENTSCHEIDUNG:
   - Desktop >=1200px: KEEP
   - Tablet 700–1199px: KEEP
   - Phone: nur nachweisbar sinnvolle visuelle Veredelung

   Keine neue Grid-Logik.
   Keine Filter-Logik geändert.
   Keine JS-/Slider-/Lightbox-Logik geändert.
========================================================= */

@media (max-width:699px){

  /* -------------------------------------------------------
     TYPOGRAFISCHE RUHE
     Unterstützende Browser balancieren Überschriften besser.
     Fallback bleibt automatisch die bestehende Darstellung.
     ------------------------------------------------------- */

  .std-references-page h1,
  .std-references-page h2,
  .std-references-page h3,
  .std-homepage #portfolio h2{
    text-wrap:balance;
  }

  .std-references-hero-text,
  .std-references-intro-content p,
  .std-references-side-card p,
  .std-references-filter-head p{
    text-wrap:pretty;
  }


  /* -------------------------------------------------------
     TOUCH / FILTER
     Die Filter bleiben kompakt, erhalten aber ein deutlich
     besseres reales Touch-Ziel.
     ------------------------------------------------------- */

  .std-references-page .std-filter-btn,
  .std-homepage #portfolio .std-filter-btn{
    min-height:42px;
  }


  /* -------------------------------------------------------
     REFERENZEN – ART DIRECTION STATT EINHEITLICHEM 4:3
     Starke breite Motive dürfen breiter/cineastischer wirken.
     Portrait-Motive behalten mehr vertikale Information.
     Dadurch sinkt die Scrollstrecke ohne Mini-Karten.
     ------------------------------------------------------- */

  /* Featured Transformation */
  .std-reference-story-grid >
  .std-project-card.std-project-card--featured[data-project-type="before_after"]
  .std-ba-frame{
    aspect-ratio:16 / 10 !important;
  }

  /* Breite Before/After-Projekte */
  .std-reference-story-grid >
  .std-project-card.std-project-card--wide[data-project-type="before_after"]
  .std-ba-frame{
    aspect-ratio:16 / 10 !important;
  }

  /* Portrait Before/After bewusst größer */
  .std-reference-story-grid >
  .std-project-card.std-project-card--portrait[data-project-type="before_after"]
  .std-ba-frame{
    aspect-ratio:4 / 3 !important;
  }


  /* Breite Single-Projekte kompakter präsentieren */
  .std-reference-story-grid >
  .std-project-card.std-project-card--wide[data-project-type="single"]
  .std-project-single .std-gallery-link{
    aspect-ratio:16 / 10 !important;
  }

  /* Standard bleibt ausgewogen */
  .std-reference-story-grid >
  .std-project-card.std-project-card--standard[data-project-type="single"]
  .std-project-single .std-gallery-link{
    aspect-ratio:4 / 3 !important;
  }

  /* Portraits: kuratierter Crop, aber nicht zu flach */
  .std-reference-story-grid >
  .std-project-card.std-project-card--portrait[data-project-type="single"]
  .std-project-single .std-gallery-link{
    aspect-ratio:4 / 3 !important;
  }


  /* -------------------------------------------------------
     VISUELLE HIERARCHIE DER PROJEKTKARTEN
     Transformationen minimal stärker, ergänzende Singles ruhig.
     ------------------------------------------------------- */

  .std-reference-story-grid >
  .std-project-card[data-project-type="before_after"]{
    border-radius:17px;
  }

  .std-reference-story-grid >
  .std-project-card[data-project-type="single"]{
    border-radius:15px;
  }

  .std-reference-story-grid
  .std-project-card[data-project-type="before_after"]
  .std-ba-caption{
    font-weight:650;
  }


  /* -------------------------------------------------------
     HERO-PUNKTE
     Auf kleinen Phones bislang sehr kleine Unterzeilen.
     Nur Lesbarkeit veredeln, keine neue Komposition.
     ------------------------------------------------------- */

  .std-references-hero-point strong{
    font-size:max(.7rem,11px);
  }

  .std-references-hero-point span{
    font-size:max(.6rem,9.5px);
  }

}


/* ---------------------------------------------------------
   390–699px
   Featured-Projekt darf auf größeren Phones noch etwas
   cineastischer werden. Die restliche Hierarchie bleibt.
--------------------------------------------------------- */

@media (min-width:390px) and (max-width:699px){

  .std-reference-story-grid >
  .std-project-card.std-project-card--featured[data-project-type="before_after"]
  .std-ba-frame{
    aspect-ratio:16 / 9 !important;
  }

  .std-references-page .std-filter-btn,
  .std-homepage #portfolio .std-filter-btn{
    min-height:44px;
  }

}


/* ---------------------------------------------------------
   <=389px
   Sehr kleine Phones:
   keine extreme Verflachung des wichtigsten Projekts.
--------------------------------------------------------- */

@media (max-width:389px){

  .std-reference-story-grid >
  .std-project-card.std-project-card--featured[data-project-type="before_after"]
  .std-ba-frame{
    aspect-ratio:16 / 10 !important;
  }

}