/* ══ LEISTUNGSKARTEN (Bildkarten) ══ */
    .leistungen-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }
    .lk-card {
      position: relative;
      aspect-ratio: 3 / 4;
      border-radius: 18px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.1);
      cursor: pointer;
      background: #11151f;
      transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
    }
    .lk-card:hover {
      transform: translateY(-5px);
      border-color: rgba(192,138,87,.6);
      box-shadow: 0 18px 40px rgba(0,0,0,.45);
    }
    .lk-card-bg {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      transition: transform .5s ease;
    }
    .lk-card:hover .lk-card-bg { transform: scale(1.06); }
    .lk-card--texture .lk-card-bg { opacity: .8; }
    .lk-card-cutout-wrap {
      position: absolute;
      inset: 8% 10% 32%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .lk-card-cutout-wrap img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      filter: drop-shadow(0 14px 18px rgba(0,0,0,.55));
    }
    .lk-card-scrim {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(9,11,16,0) 32%, rgba(8,10,15,.55) 66%, rgba(6,8,12,.93) 100%);
    }
    .lk-card-badge {
      position: absolute;
      top: 12px;
      left: 12px;
      z-index: 2;
      display: inline-block;
      padding: 3px 10px;
      border-radius: 999px;
      background: rgba(192,138,87,.22);
      border: 1px solid rgba(192,138,87,.4);
      font-size: .66rem;
      font-weight: 800;
      color: #d3b07a;
      letter-spacing: .06em;
      text-transform: uppercase;
      backdrop-filter: blur(4px);
    }
    .lk-card-foot {
      position: absolute;
      left: 0; right: 0; bottom: 0;
      z-index: 2;
      padding: 16px 12px 18px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 7px;
    }
    .lk-card-icon { width: 25px; height: 25px; color: #f3f6fb; opacity: .95; }
    .lk-card-icon svg { width: 100%; height: 100%; display: block; }
    .lk-card-foot h3 {
      margin: 0;
      font-size: .82rem;
      font-weight: 800;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: #f3f6fb;
    }
    .lk-card-soon {
      font-family: 'Playfair Display', serif;
      font-style: italic;
      font-weight: 400;
      color: #d3b07a;
      font-size: 1.05rem;
      margin-top: 1px;
    }
    /* Preisangabe in der Leistungskarte – gleiche Farben, Rundungen
       und Schriftgewichte wie das Karten-Badge */
    .lk-card-price {
      display: inline-block;
      padding: 3px 11px;
      border-radius: 999px;
      background: rgba(192,138,87,.22);
      border: 1px solid rgba(192,138,87,.4);
      font-size: .72rem;
      font-weight: 800;
      color: #d3b07a;
      letter-spacing: .04em;
      white-space: nowrap;
      backdrop-filter: blur(4px);
    }
    @media (max-width: 900px) { .leistungen-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 560px) { .leistungen-grid { grid-template-columns: 1fr; } .lk-card { aspect-ratio: 4/3; } }
    /* Kennzahlen: nur noch „Versand deutschlandweit“ – ein Kasten, mittig */
    .stats-grid.container { grid-template-columns: minmax(0, 380px) !important; justify-content: center; }
    .stats-section { background: transparent; border-top: 0; border-bottom: 0; padding: 28px 0; }

    /* ══ HERO: Portfolio-Collage (hx-) ══ */
    .hx-hero.hero { position: relative; isolation: isolate; overflow: hidden; display: block; padding: 0; min-height: 540px; background: #0b0d12; }
    /* Hero liegt über den globalen Farbklecksen (.page-spray, fixed, z-index 0) – nur hier, sonst bleiben sie */
    .hx-hero.hero { z-index: 1; }
    .hx-hero.hero::after { display: none; }
    .hx-inner { position: relative; z-index: 3; padding-top: 48px; padding-bottom: 64px; }
    .hx-text { max-width: 600px; }
    .hx-hero .hero-title { font-size: clamp(2.5rem, 11.5vw, 3.2rem) !important; line-height: 1.04 !important; margin: 0 0 14px !important; text-shadow: 0 2px 26px rgba(0,0,0,.65); }
    .hx-hero .hero-subline { font-size: 1.05rem; line-height: 1.45; margin-bottom: 14px; text-shadow: 0 1px 14px rgba(0,0,0,.7); }
    .hx-hero .hx-ort { white-space: nowrap; }
    /* Handy: fester Umbruch aus, Zeilen ausgleichen – sonst bricht „Custom Wear –“ allein in eine eigene Zeile */
    @media (max-width: 599px) { .hx-hero .hero-subline { font-size: 1rem; text-wrap: balance; } .hx-hero .hx-umbruch { display: none; } }
    .hx-hero .hero-description { margin: 0; max-width: 44ch; font-size: .95rem; line-height: 1.6; color: rgba(243,246,251,.78); text-shadow: 0 1px 12px rgba(0,0,0,.8); }
    .hx-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
    /* Hero-Knöpfe: Aussehen kommt aus dem zentralen Knopf-System (style.css); hier nur Breite */
    .hx-actions .btn { width: auto; }

    /* Bildteppich: über den ganzen Hero verteilt, dezent; Handy 3 Spalten, Tablet 5, Desktop 7 */
    .hx-mosaik { position: absolute; inset: 0; z-index: 0; pointer-events: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 6px; }
    /* Kacheln als Hintergrundbild: füllen die Zelle in jedem Browser (auch Safari/iPhone) exakt aus */
    .hx-mosaik > span { display: block; min-width: 0; min-height: 0; overflow: hidden; background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 8px; opacity: .62; filter: saturate(.85) brightness(.85); }
    /* Handy: 8 große, gut erkennbare Kacheln */
    .hx-mosaik > span:nth-child(n+9) { display: none; }
    @media (min-width: 600px) { .hx-mosaik { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 8px; } .hx-mosaik > span:nth-child(n+9) { display: block; } .hx-mosaik > span { opacity: .45; } }
    @media (min-width: 960px) { .hx-mosaik > span { border-radius: 10px; } }
    .lk-card-hinweis { display: block; margin-top: 6px; font-size: .7rem; font-weight: 600; color: rgba(243,246,251,.7); }
    /* KI-Gestaltungsbeispiel (Sneaker) sichtbar kennzeichnen: Kachel fest platziert, Hinweis liegt ohne Abdunklung darüber */
    .hx-mosaik > span.hx-beispiel, .hx-mosaik > em.hx-hinweis { grid-area: 1 / 2; }
    .hx-mosaik > em.hx-hinweis { align-self: start; justify-self: end; margin: 6px; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .02em; line-height: 1; color: #fff; background: rgba(0,0,0,.8); padding: 4px 6px; border-radius: 5px; }
    @media (min-width: 600px) { .hx-mosaik > span.hx-beispiel, .hx-mosaik > em.hx-hinweis { grid-area: 3 / 5; } .hx-mosaik > em.hx-hinweis { font-size: 11px; margin: 8px; } }
    /* 14 Fotos auf 15 Plätzen: das UV-Druck-Bild ist doppelt breit, so bleibt nichts leer und nichts doppelt */
    @media (min-width: 600px) { .hx-mosaik > span:nth-child(7) { grid-column: span 2; } }
    .hx-schleier { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

    .hx-hero .hx-schleier { background:
      linear-gradient(180deg, rgba(8,10,14,.3) 0%, rgba(8,10,14,.55) 20%, rgba(8,10,14,.5) 68%, rgba(8,10,14,.3) 86%, #0b0d12 100%),
      radial-gradient(ellipse 90% 45% at 35% 40%, rgba(8,10,14,.6), transparent 80%); }

    @media (min-width: 600px) and (max-width: 959px) {
      .hx-hero.hero { min-height: 600px; }
      .hx-inner { padding-top: 72px; padding-bottom: 80px; }
      .hx-hero .hero-title { font-size: 3.6rem !important; }
      .hx-hero .hero-subline { font-size: 1.2rem; }
      .hx-hero .hero-description { font-size: 1rem; }
    }

    /* Desktop: Collage über die volle Breite, rechts dichter */
    @media (min-width: 960px) {
      .hx-hero.hero { min-height: clamp(560px, calc(100vh - 86px), 760px); display: flex; align-items: center; }
      .hx-inner { width: min(calc(100% - 32px), var(--container, 1240px)); padding-top: 56px; padding-bottom: 56px; }
      .hx-hero .hero-title { font-size: clamp(3rem, 4.6vw, 4.6rem) !important; line-height: 1.03 !important; margin: 0 0 18px !important; }
      .hx-hero .hero-subline { font-size: clamp(1.1rem, 1.5vw, 1.35rem); margin-bottom: 16px; }
      .hx-hero .hero-description { font-size: 1rem; line-height: 1.65; }
      .hx-actions { gap: 12px; margin-top: 28px; }
      .hx-text { max-width: 540px; }
      .hx-inner { padding-bottom: 56px; }
      .hx-hero .hx-schleier { background:
        linear-gradient(90deg, rgba(8,10,14,.74) 0%, rgba(8,10,14,.68) 30%, rgba(8,10,14,.5) 46%, rgba(8,10,14,.32) 64%, rgba(8,10,14,.3) 100%),
        linear-gradient(180deg, rgba(8,10,14,.45) 0%, transparent 16%, transparent 80%, rgba(11,13,18,.8) 95%, #0b0d12 100%); }
    }