/* ==========================================================================
   Service Producer – Fresh Look (Oktober 2026)
   Lädt nach service-producer-mobile-upgrade.css und überschreibt gezielt:
   Farbbilder statt Schwarzweiß, helle Flächen, runde Bildkanten,
   luftigere Karten, Hero-Bildmosaik. Gold + Schwarz bleiben die Markenfarben.
   ========================================================================== */
:root{
  --bone:#f6f3ee;
  --paper:#ffffff;
  --soft:#f6f3ee;
  --r-lg:22px;
  --r-md:16px;
  --shadow-soft:0 18px 40px -22px rgba(5,5,5,.28);
}

body{background:#fff}
body:before{display:none!important}           /* Körnung raus – klarer, frischer */

/* Header */
.header{background:rgba(255,255,255,.86);border-bottom-color:rgba(5,5,5,.08)}
.logo-mark{border-radius:10px}
.lang button{border-radius:999px;padding:7px 11px;min-height:36px;min-width:42px}
.menu-toggle{border-radius:12px}

/* Buttons */
.btn{border-radius:999px;padding:0 26px}
.btn.secondary{border-color:rgba(5,5,5,.25)}

/* ---------- Hero ---------- */
.hero{background:#fff;border-bottom:none}
.hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.hero-copy{min-width:0}
.hero-title{letter-spacing:-.07em;font-size:clamp(52px,5.9vw,116px)}
.hero-visual.hero-mosaic{
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1.45fr 1fr;
  gap:12px;padding:14px 14px 14px 0;background:#fff;border-left:none;
}
.hero-mosaic .hm{margin:0;position:relative;overflow:hidden;border-radius:var(--r-lg);background:#eee}
.hero-mosaic .hm-main{grid-column:1 / 3}
.hero-mosaic .hm img{width:100%;height:100%;object-fit:cover;filter:none;opacity:1;transition:transform .6s ease}
.hero-mosaic .hm:hover img{transform:scale(1.03)}
.hero-pill{
  position:absolute;left:18px;bottom:18px;display:inline-flex;align-items:center;gap:10px;
  background:rgba(5,5,5,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:#fff;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:10px 16px;border-radius:999px;
}
.hero-pill:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold);flex:none}

/* Kennzahlen-Leiste */
.metric-strip .container{gap:14px}
.mini{border-left:none;background:rgba(255,255,255,.05);border-radius:var(--r-md);padding:16px 20px}

/* ---------- Leistungen: Karten mit Bild ---------- */
#leistungen{background:var(--soft)}
#leistungen .grid-3{gap:22px;background:transparent;border:none}
.grid-3 .svc-card{
  padding:0!important;min-height:0;border-radius:var(--r-lg);background:#fff;
  border:1px solid rgba(5,5,5,.07);box-shadow:var(--shadow-soft);
  display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease;
}
.grid-3 .svc-card:before{display:none}
.grid-3 .svc-card:hover{transform:translateY(-4px);box-shadow:0 26px 50px -24px rgba(5,5,5,.35)}
.svc-card .card-img{width:100%;aspect-ratio:4 / 3;object-fit:cover}
.svc-card .card-body{padding:26px 26px 30px}
.svc-card h3{font-size:19px;letter-spacing:-.02em}
.svc-card p{text-align:left;font-size:15.5px}

/* Weitere Leistungen (dunkel) */
.service-list{gap:14px;background:transparent;border:none}
.service{border-radius:var(--r-md);background:#141414;border:1px solid rgba(255,255,255,.08)}

/* ---------- Split-Sektionen: Bild als abgerundete Fläche in Farbe ---------- */
.split{border:none;padding-top:24px;padding-bottom:24px}
.split>div:not(.photo){background:transparent}
.photo{filter:none;border-radius:var(--r-lg);min-height:620px}
.photo:before{display:none}
#automotive,#transport{background:var(--soft)}

/* ---------- Referenzfelder ---------- */
#referenzfelder .grid-2{gap:22px;background:transparent;border:none}
.image-card{border-radius:var(--r-lg);border:1px solid rgba(5,5,5,.07);box-shadow:var(--shadow-soft)}
.image-card img{filter:none}
.image-card .content p{text-align:left}
.image-card:hover img{filter:none;transform:scale(1.03)}

/* ---------- Behind the Scenes ---------- */
#behind-the-scenes{background:var(--soft)}
.reference-mosaic{gap:12px;background:transparent;border:none}
.mosaic-item{filter:none;border-radius:var(--r-lg);overflow:hidden;transition:transform .3s ease}
.mosaic-item:hover{transform:scale(1.01)}
.mosaic-item:after{border-left:none;border-radius:999px;background:rgba(5,5,5,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:9px 15px}

/* ---------- Dunkle Boxen & Kontakt ---------- */
.nda-box{border-radius:var(--r-lg)}
.nda-box:before{border-radius:14px}
.contact{background:#fff}
.contact-box{gap:22px;background:transparent;border:none;padding:0 26px}
.contact-box>div,.address{border-radius:var(--r-lg);background:var(--soft)}

/* ---------- Tablet ---------- */
@media(max-width:1100px){
  .hero-visual.hero-mosaic{height:auto;min-height:0;padding:0 14px 14px;grid-template-rows:340px 220px}
  .grid-3 .svc-card{min-height:0}
  #leistungen .grid-3{grid-template-columns:1fr 1fr}
  .split{padding:16px 0}
  .photo{margin:0 20px;min-height:420px}
}

/* ---------- Phone ---------- */
@media(max-width:700px){
  .hero-visual.hero-mosaic{grid-template-rows:260px 150px;gap:10px;padding:0 12px 12px}
  .hero-pill{left:12px;bottom:12px;font-size:10.5px;padding:8px 12px}
  #leistungen .grid-3{grid-template-columns:1fr;gap:18px}
  .svc-card .card-body{padding:22px}
  .photo{margin:0 16px;min-height:300px}
  .reference-mosaic{gap:10px}
  .contact-box{padding:0 16px;gap:16px}
  .metric-strip .container{gap:10px}
}

/* Fließtext linksbündig statt Blocksatz – ruhigeres Schriftbild */
.history-text,.card p{text-align:left}