/* ============================================================================
   Referenzen Portfolio — Welle 5.25 "Premium Portfolio Showcase"
   ----------------------------------------------------------------------------
   Tier-Showcase Bento für die #referenzen-Section auf der Startseite.

   Tier-Strategy:
   - 4 FEATURED Cards    → Multi-Device Lottie + 3 Result-Numbers + Visit-CTA
   - 6 MORE-WORK Cards   → Static Thumbnails (kleiner, klare Liste)

   Background-System: Tier-2 "Premium Content" (analog services-atelier)
   - 4-Layer Aurora (Blue+Coral, 22s Loop)
   - Blueprint Dot-Grid mit radial fade-mask
   - Paper-Grain Noise overlay
   - prefers-reduced-motion-aware

   Mobile-First strict:
   - Base = Mobile (390px) — Featured single-column, More 2-Spalten
   - 768px → Featured 2-Spalten, More 3-Spalten
   - 1024px → Featured 2x2 Grid (gleiches Layout, mehr Atem)

   Phase 1: Code-Grundgerüst (Lottie + Counter folgen in Phase 2 + 3)
   Doku: docs/PLAN-REFERENZEN-SECTION-2026.md
   ============================================================================ */

/* ════════════════════════════════════════════════════════════════════════
   1. SECTION CONTAINER + DESIGN TOKENS + TIER-2 BACKGROUND
   ════════════════════════════════════════════════════════════════════════ */
#referenzen.ref-portfolio {
  /* — miraTEQ Digital 2026 Palette (local mirror, BRAND-COLORS.md) — */
  /* Continuous Background-Color: identisch zu Services für seamless flow.
     Section-Trennung kommt durch Animation-Drop (Services peak → still),
     nicht durch Color-Shift. Apple/BRAND-COLORS.md Pattern 2026. */
  --rp-bg-page:        #FAFBFD;
  --rp-tile-bg:        rgba(255, 255, 255, 0.82);
  --rp-tile-border:    1px solid rgba(20, 152, 213, 0.12);
  --rp-tile-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 1px 2px rgba(10, 27, 51, 0.05),
    0 12px 32px rgba(10, 27, 51, 0.07);

  --rp-ink:            #0A1B33;
  --rp-ink-soft:       rgba(10, 27, 51, 0.65);
  --rp-ink-mute:       rgba(10, 27, 51, 0.42);

  --rp-blue:           #1498D5;
  --rp-blue-bright:    #3EB6F0;
  --rp-blue-deep:      #0F7BB2;

  --rp-coral:          #FF7A4D;
  --rp-coral-bright:   #FF9466;
  --rp-coral-deep:     #E55F32;

  --rp-frost:          #E8EFF7;

  /* — Layout-Tokens — */
  --rp-pad-y:          clamp(2.5rem, 5vw, 4rem);
  --rp-tile-gap:       clamp(0.75rem, 1.4vw, 1.25rem);
  --rp-radius:         24px;
  --rp-radius-sm:      14px;

  /* — Easings (Stripe / Linear-style) — */
  --rp-ease:           cubic-bezier(0.16, 1, 0.3, 1);
  --rp-ease-snap:      cubic-bezier(0.85, 0, 0.15, 1);

  /* — Typography — */
  --rp-font-mono:      'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* — Atelier-Token-Aliases (damit atelier-eyebrow/-title Klassen aus
     services-atelier.css auch hier greifen — Tokens sind dort lokal
     im .atelier-Scope definiert und wären sonst undefined) — */
  --at-mocha:          var(--rp-blue);
  --at-ink:            var(--rp-ink);
  --at-ink-soft:       var(--rp-ink-soft);
  --at-font-body:      var(--font-main, 'Inter', system-ui, sans-serif);
  --at-font-display:   var(--font-main, 'Inter', system-ui, sans-serif);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--rp-pad-y);

  /* Tier-3 "Trust/Data" Background (BRAND-COLORS.md, Welle 5.25 v3 final)
     ────────────────────────────────────────────────────────────────
     Continuous Background-Color (identisch zu Services).
     Section-Trennung durch Animation-Drop: Services hat 4-Layer animated
     Aurora + Grid + Noise (peak), Referenzen hat NUR 2-Layer still Glow
     (breath). User spürt Energie-Wechsel beim Scrollen — Apple-Pattern.
     ──────────────────────────────────────────────────────────────── */
  /* Welle 5.25 v8: TRANSPARENT — page-mesh schimmert durch */
  background-color: transparent;
  position: relative;
}

/* ════════════════════════════════════════════════════════════════════════
   STEP 2 v2 — Referenzen Premium-Coral-Aurora (warm Showcase-Aesthetic)
   ────────────────────────────────────────────────────────────────────────
   Differentiation zu Services:
   - Coral-dominant (statt balanced Blue+Coral wie Services) — warmer "Portfolio"-Feel
   - Stronger intensity (0.22 statt 0.10) für sichtbare Differenz
   - Slow drift animation (40s, deutlich langsamer als Services 22s — calm)
   - Größere ellipses für expansive Glow
   ════════════════════════════════════════════════════════════════════════ */
.ref-portfolio__aurora {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 80% 60% at 25% 50%, rgba(255, 122, 77, 0.22), transparent 65%),
    radial-gradient(ellipse 70% 55% at 80% 50%, rgba(20, 152, 213, 0.16), transparent 65%);
  background-size: 200% 200%, 200% 200%;
  background-position: 0% 50%, 100% 50%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 120px, black calc(100% - 120px), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, black 120px, black calc(100% - 120px), transparent 100%);
  animation: ref-aurora-drift 40s ease-in-out infinite;
}
@keyframes ref-aurora-drift {
  0%, 100% { background-position: 0% 50%, 100% 50%; }
  50%      { background-position: 100% 50%, 0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .ref-portfolio__aurora { animation: none; }
}
body.is-dark-bg .ref-portfolio__aurora {
  background-image:
    radial-gradient(ellipse 80% 60% at 25% 50%, rgba(255, 148, 102, 0.26), transparent 65%),
    radial-gradient(ellipse 70% 55% at 80% 50%, rgba(62, 182, 240, 0.18), transparent 65%);
}

/* ════════════════════════════════════════════════════════════════════════
   2. FEATURED TIER — 4 gleichberechtigte Cards (Welle 5.25 v3)
   ────────────────────────────────────────────────────────────────────────
   Layout-Plan (Web-Design-Agency-Standard 2026, Pattern IBEX/Highly Persuasive/
   Pentagram/Huge — equal weighting, kein Hero-Bento):
   - Mobile (base):   1-Spalte stack
   - Tablet (768+):   2x2 Grid
   - Desktop (1024+): 2x2 Grid (größere Cards mit mehr Atem)
   ════════════════════════════════════════════════════════════════════════ */
.ref-portfolio__featured {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rp-tile-gap);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

@media (min-width: 768px) {
  .ref-portfolio__featured {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1rem, 1.8vw, 1.5rem);
  }
}

@media (min-width: 1024px) {
  .ref-portfolio__featured {
    gap: clamp(1.25rem, 2vw, 1.75rem);
  }
}

.ref-portfolio__card-featured {
  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--rp-tile-bg);
  border: var(--rp-tile-border);
  border-radius: var(--rp-radius);
  box-shadow: var(--rp-tile-shadow);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  transition:
    transform 0.4s var(--rp-ease),
    box-shadow 0.4s var(--rp-ease),
    border-color 0.4s var(--rp-ease);
}

.ref-portfolio__card-featured:hover,
.ref-portfolio__card-featured:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(20, 152, 213, 0.28);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 4px 8px rgba(10, 27, 51, 0.06),
    0 22px 50px rgba(20, 152, 213, 0.14);
}

.ref-portfolio__card-featured:focus-visible {
  outline: 2px solid var(--rp-blue);
  outline-offset: 3px;
}

/* ════════════════════════════════════════════════════════════════════════
   EDITORIAL CARD CONTENT — Welle 5.25 v9 "Webflow + AKQA + Highly Persuasive"
   ────────────────────────────────────────────────────────────────────────
   3-Section Card-Layout:
   1. <header> — Editorial: Branche (small caps) + Project-Name (big display)
   2. <div browser-frame> — CSS browser-frame mit Real Site-Screenshot
   3. <footer> — Metrics-Row (3 Numbers) + Visit-CTA
   ════════════════════════════════════════════════════════════════════════ */

/* — Card Header (Editorial Top) — */
.ref-portfolio__card-header {
  padding: clamp(1.2rem, 2vw, 1.6rem) clamp(1.2rem, 2vw, 1.6rem) clamp(0.85rem, 1.4vw, 1.1rem);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.ref-portfolio__card-branche {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--rp-blue-deep);
}

.ref-portfolio__card-name {
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
  font-weight: 700;
  color: var(--rp-ink);
  line-height: 1.18;
  letter-spacing: -0.01em;
}

/* — Browser-Frame (Pure CSS Macbook-Style) — */
.ref-portfolio__browser-frame {
  position: relative;
  margin: 0 clamp(1rem, 1.6vw, 1.4rem);
  border-radius: 10px 10px 0 0;
  background: #F0F0F2;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 12px 32px rgba(10, 27, 51, 0.10),
    0 2px 4px rgba(10, 27, 51, 0.05);
  overflow: hidden;
}

/* Browser-Top-Bar mit 3 Traffic-Light-Dots */
.ref-portfolio__browser-dots {
  display: block;
  height: 28px;
  background: linear-gradient(180deg, #F4F5F7 0%, #EAEBEE 100%);
  border-bottom: 1px solid rgba(10, 27, 51, 0.06);
  position: relative;
}

.ref-portfolio__browser-dots::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #FF5F57;
  box-shadow:
    18px 0 0 #FFBD2E,
    36px 0 0 #28C840;
}

/* Screenshot-Wrapper mit aspect-ratio + auto-scroll-Animation on Hover */
.ref-portfolio__screenshot-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(20, 152, 213, 0.06), transparent 70%),
    linear-gradient(180deg, var(--rp-frost) 0%, var(--rp-bg-page) 100%);
  overflow: hidden;
}

.ref-portfolio__screenshot {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: top center;
  transition: transform 1.2s var(--rp-ease);
}

/* On Hover (Desktop): Screenshot scrollt langsam → zeigt mehr von der Site */
@media (hover: hover) and (min-width: 768px) {
  .ref-portfolio__card-featured:hover .ref-portfolio__screenshot {
    transform: translateY(-50%);
    transition-duration: 8s;
  }
}

/* — Live-Badge (oben rechts auf Browser-Frame) — */
.ref-portfolio__live-badge {
  position: absolute;
  top: 38px;
  right: 0.85rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.32rem 0.7rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rp-blue-deep);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(20, 152, 213, 0.25);
  border-radius: 999px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.ref-portfolio__live-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00a86b;
  box-shadow: 0 0 0 2px rgba(0, 168, 107, 0.18);
}

/* — Card Footer (Metrics + CTA) — explicit reset gegen globale footer rule — */
.ref-portfolio__card-footer {
  background: transparent !important;
  color: inherit !important;
  border-top: 0 !important;
  padding: clamp(1rem, 1.8vw, 1.5rem) clamp(1.2rem, 2vw, 1.6rem) clamp(1.2rem, 2vw, 1.6rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
  justify-content: space-between;
}

/* — Result-Numbers (3-Spalten-Grid) — */
.ref-portfolio__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.ref-portfolio__metric {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.ref-portfolio__metric-value {
  font-family: var(--rp-font-mono);
  font-feature-settings: 'tnum' 1;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  font-weight: 700;
  color: var(--rp-coral);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.ref-portfolio__metric-label {
  font-size: 0.7rem;
  color: var(--rp-ink-mute);
  line-height: 1.3;
}

/* — Card-CTA (Visit-Link mit Hover-Arrow-Shift) — */
.ref-portfolio__card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(20, 152, 213, 0.14);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--rp-blue);
  transition: gap 0.3s var(--rp-ease), color 0.3s var(--rp-ease);
}

.ref-portfolio__card-featured:hover .ref-portfolio__card-cta,
.ref-portfolio__card-featured:focus-visible .ref-portfolio__card-cta {
  gap: 0.6rem;
  color: var(--rp-blue-deep);
}

/* ════════════════════════════════════════════════════════════════════════
   HORIZONTAL SCROLL-LINKED STREAM — Welle 5.25 v11
   ────────────────────────────────────────────────────────────────────────
   2 Rows horizontal (Websites top, Logos bottom).
   Cards NICHT klickbar — pure visual display (aria-hidden).
   SCROLL-LINKED: JS in HTML translatet die Tracks horizontal basierend
   auf Page-Scroll-Position. Apple Vision Pro / Linear Pattern 2026.
   Websites: left→right, Logos: right→left (gegensätzlich).
   ════════════════════════════════════════════════════════════════════════ */
.ref-portfolio__streams {
  display: flex;
  flex-direction: column;
  gap: clamp(0.8rem, 1.5vw, 1.2rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.ref-portfolio__stream {
  position: relative;
  overflow: hidden;
  /* Left + Right fade-mask für sanfte Edges */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
}

.ref-portfolio__stream-track {
  display: flex;
  flex-direction: row;
  /* KEIN gap — Spacing via margin-right auf jeder Card.
     Begründung: gap fügt sich zwischen ALLEN Children (auch zwischen
     Original-Set-Ende und Duplicate-Set-Start), wodurch translate(-50%)
     nicht exakt auf Card-Position landet → "Zucken" beim Loop-Reset.
     Mit margin-right auf jeder Card ist Original-Set-Breite =
     Duplicate-Set-Breite, und -50% landet exakt auf Duplicate-Start. */
  will-change: transform;
}
/* Card-Spacing: margin-right pro Card (siehe Track-Comment) */
.ref-portfolio__stream-card,
.ref-portfolio__stream-logo {
  margin-right: clamp(0.6rem, 1.2vw, 1rem);
}

/* Auto-Scroll: in JavaScript implementiert (Inline-Script in index-com.html).
   Begründung: CSS-Animation mit translate(-50%) hat Math-Probleme bei
   gemischten Card-Widths (Desktop+Mobile) und gap → kein nahtloser Loop.
   JS misst Original-Set-Width via offsetLeft und resetet exakt darauf. */

/* — Website-Stream Card (horizontal) —
   Frame definiert fixe HÖHE; Width folgt aus aspect-ratio.
   So haben Desktop- und Mobile-Cards exakt gleiche Höhe im Stream —
   Desktop breit (16:10), Mobile schmal (9:16) → wirkt aufgeräumt. */
.ref-portfolio__stream-card {
  display: flex;
  flex-direction: column;
  background: var(--rp-tile-bg);
  border: var(--rp-tile-border);
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 1px 2px rgba(10, 27, 51, 0.04);
}

.ref-portfolio__stream-card-frame {
  position: relative;
  /* FIXE HÖHE — gleich für Desktop + Mobile.
     Welle 5.26 v13: hochgesetzt damit Previews visuell gleichwertig
     zu den Atelier-Cards in der Section drüber wirken (~+50%). */
  height: clamp(240px, 32vw, 340px);
  aspect-ratio: 16 / 10;
  /* width auto aus height × aspect-ratio */
  background:
    radial-gradient(ellipse at 50% 35%, rgba(20, 152, 213, 0.06), transparent 70%),
    var(--rp-frost);
  overflow: hidden;
  flex-shrink: 0;
  /* Border-radius minimal (2px) — fast eckig, damit Bild-Ecken nicht abgeschnitten werden */
  border-radius: 2px;
}

/* Mac-Browser-Top-Bar entfernt (User-Wunsch: Desktop = Mobile, kein Browser-Chrome) */

.ref-portfolio__stream-card-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* — Mobile-Card-Variante (Phone-Frame statt Mac-Browser) —
   Gleiche HÖHE wie Desktop, aber schmaler (Aspect 9:16 = echtes Phone).
   Border-radius identisch zu Desktop (6px) für Konsistenz, damit
   Bild-Ecken nicht abgeschnitten wirken. */
.ref-portfolio__stream-card--mobile .ref-portfolio__stream-card-frame {
  aspect-ratio: 9 / 16;
}
/* Mobile-Card hat keine Mac-Traffic-Light-Top-Bar */
.ref-portfolio__stream-card--mobile .ref-portfolio__stream-card-frame::before,
.ref-portfolio__stream-card--mobile .ref-portfolio__stream-card-frame::after {
  content: none;
}
.ref-portfolio__stream-card--mobile .ref-portfolio__stream-card-frame img {
  padding-top: 0;
}

/* — Logo-Stream Card (horizontal) — */
.ref-portfolio__stream-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rp-tile-bg);
  border: var(--rp-tile-border);
  border-radius: var(--rp-radius-sm);
  padding: 0.75rem 1rem;
  flex-shrink: 0;
  color: var(--rp-ink-soft);
  /* Card-Breite Mobile-First */
  width: clamp(130px, 32vw, 200px);
  height: clamp(70px, 12vw, 110px);
}

.ref-portfolio__stream-logo img {
  max-width: 75%;
  max-height: 65%;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.72);
}

.ref-portfolio__stream-logo-initials {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: center;
}

/* Dark-Mode für Streams */
body.is-dark-bg .ref-portfolio__stream-card {
  background: rgba(26, 41, 64, 0.7);
  border-color: rgba(62, 182, 240, 0.18);
}
body.is-dark-bg .ref-portfolio__stream-card-label {
  color: rgba(240, 244, 250, 0.7);
}
/* Dark-Mode: Tile dezent (verschmilzt mit Section-BG), Logos invertiert weiß.
   Alle Customer-Logos jetzt mit transparentem BG (PIL-bearbeitet),
   daher kann brightness(0) invert(1) verwendet werden ohne weiße Blöcke. */
body.is-dark-bg .ref-portfolio__stream-logo {
  background: rgba(26, 41, 64, 0.4);
  border-color: rgba(62, 182, 240, 0.15);
  color: rgba(240, 244, 250, 0.75);
}
body.is-dark-bg .ref-portfolio__stream-logo img {
  filter: brightness(0) invert(1) opacity(0.85);
}

/* prefers-reduced-motion: JS-Loop skipped, transform bleibt initial 0 */
@media (prefers-reduced-motion: reduce) {
  .ref-portfolio__stream-track {
    transform: translate3d(0, 0, 0) !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   3. LOGO STRIP — Trust through Volume (Welle 5.25 v2: ersetzt 6 Static-Cards)
   ────────────────────────────────────────────────────────────────────────
   Pattern: Basic/Dept + Instrument + Stripe Homepage 2026 — Logo-Wall
   für "viele Kunden" Signal ohne überladene Mid-Tier-Cards.

   Mobile-First strict:
   - Base (390px):    3 Spalten (10 Logos → 4 Reihen, max ~340px)
   - Tablet (768+):   5 Spalten (10 Logos → 2 Reihen)
   - Desktop (1024+): 10 Spalten (alle in 1 Reihe)
   ════════════════════════════════════════════════════════════════════════ */
.ref-portfolio__logos-label {
  display: block;
  margin-top: clamp(2.5rem, 4vw, 4rem);
  margin-bottom: clamp(1rem, 1.8vw, 1.5rem);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--rp-ink-mute);
  text-align: center;
}

.ref-portfolio__logos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.5rem, 1vw, 0.9rem);
  align-items: stretch;
}

@media (min-width: 768px) {
  .ref-portfolio__logos {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (min-width: 1024px) {
  .ref-portfolio__logos {
    grid-template-columns: repeat(10, 1fr);
    gap: clamp(0.6rem, 0.9vw, 1rem);
  }
}

.ref-portfolio__logo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  padding: 0.6rem;
  background: var(--rp-tile-bg);
  border: var(--rp-tile-border);
  border-radius: var(--rp-radius-sm);
  text-decoration: none;
  color: var(--rp-ink-soft);
  transition:
    transform 0.3s var(--rp-ease),
    border-color 0.3s var(--rp-ease),
    color 0.3s var(--rp-ease),
    background 0.3s var(--rp-ease);
  overflow: hidden;
}

.ref-portfolio__logo:hover,
.ref-portfolio__logo:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(20, 152, 213, 0.32);
  color: var(--rp-blue-deep);
  background: rgba(255, 255, 255, 0.95);
}

.ref-portfolio__logo:focus-visible {
  outline: 2px solid var(--rp-blue);
  outline-offset: 2px;
}

/* Placeholder-Initials (bis echte Logos eingehängt werden) */
.ref-portfolio__logo-initials {
  font-size: clamp(0.78rem, 1vw, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: center;
  line-height: 1.15;
}

/* Echte Logo-Images (Premium-Look: Greyscale → Color on Hover) */
.ref-portfolio__logo img {
  width: 100%;
  height: auto;
  max-width: 75%;
  max-height: 70%;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.72);
  transition: filter 0.3s var(--rp-ease);
}

.ref-portfolio__logo:hover img,
.ref-portfolio__logo:focus-visible img {
  filter: grayscale(0%) opacity(1);
}

/* ════════════════════════════════════════════════════════════════════════
   4. SECTION-CLOSE CTA — Primary (Buche) + Sekundär (Alle Projekte)
   ════════════════════════════════════════════════════════════════════════ */
.ref-portfolio__close {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  text-align: center;
}

.ref-portfolio__close-text {
  font-size: 0.95rem;
  color: var(--rp-ink-soft);
  max-width: 42ch;
  line-height: 1.55;
}

.ref-portfolio__close-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.25rem;
}

@media (min-width: 600px) {
  .ref-portfolio__close-actions {
    flex-direction: row;
    gap: 1.25rem;
  }
}

/* Ghost-Button: transparent BG + Blue-Outline, matched zum Primary-Button daneben */
.ref-portfolio__close-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  min-height: 48px;
  border-radius: var(--radius, 8px);
  font-family: var(--font-main);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--rp-blue);
  background: transparent;
  border: 2px solid var(--rp-blue);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.3s var(--rp-ease), color 0.3s var(--rp-ease), gap 0.3s var(--rp-ease);
}

.ref-portfolio__close-secondary:hover,
.ref-portfolio__close-secondary:focus-visible {
  gap: 0.7rem;
  background: var(--rp-blue);
  color: #fff;
}

/* ════════════════════════════════════════════════════════════════════════
   5. DARK-MODE (body.is-dark-bg Toggle — bestehender Site-Pattern)
   ════════════════════════════════════════════════════════════════════════ */
body.is-dark-bg #referenzen.ref-portfolio {
  /* Dark Tier-3: continuous, identisch zu Services-Dark */
  --rp-bg-page:        #0A1B33;
  --rp-tile-bg:        rgba(26, 41, 64, 0.7);
  --rp-tile-border:    1px solid rgba(62, 182, 240, 0.18);
  --rp-tile-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 12px 32px rgba(0, 0, 0, 0.35);

  --rp-ink:            #F0F4FA;
  --rp-ink-soft:       rgba(240, 244, 250, 0.75);
  --rp-ink-mute:       rgba(240, 244, 250, 0.5);

  --rp-blue:           #3EB6F0;
  --rp-blue-bright:    #5DC4F4;
  --rp-blue-deep:      #1498D5;

  --rp-coral:          #FF9466;
  --rp-coral-bright:   #FFAE8C;
  --rp-coral-deep:     #FF7A4D;

  --rp-frost:          #1A2940;

  /* Welle 5.25 v7: STEP 1 — Continuous Dark Base only */
  background-color: var(--rp-bg-page);
}

body.is-dark-bg .ref-portfolio__live-badge {
  background: rgba(10, 27, 51, 0.7);
  color: var(--rp-blue-bright, #5DC4F4);
  border-color: rgba(62, 182, 240, 0.3);
}

body.is-dark-bg .ref-portfolio__device-mount {
  background:
    radial-gradient(ellipse at 50% 35%, rgba(62, 182, 240, 0.10), transparent 65%),
    linear-gradient(180deg, #1A2940 0%, #0A1B33 100%);
}

body.is-dark-bg .ref-portfolio__logo {
  background: rgba(26, 41, 64, 0.65);
  color: rgba(240, 244, 250, 0.75);
}

body.is-dark-bg .ref-portfolio__logo:hover,
body.is-dark-bg .ref-portfolio__logo:focus-visible {
  background: rgba(26, 41, 64, 0.92);
  color: var(--rp-blue-bright, #5DC4F4);
}

body.is-dark-bg .ref-portfolio__logo img {
  filter: grayscale(100%) opacity(0.55) brightness(2);
}

body.is-dark-bg .ref-portfolio__logo:hover img,
body.is-dark-bg .ref-portfolio__logo:focus-visible img {
  filter: grayscale(0%) opacity(1) brightness(1);
}