/* ==========================================================================
   Service Producer – Signature Look (by Grok)
   Premium, clean, industry-grade for Film / Service Production
   Loads last. Gold + deep black + warm off-white.
   ========================================================================== */

:root {
  --black: #0a0a0a;
  --ink: #121212;
  --bone: #f7f4ef;
  --paper: #ffffff;
  --soft: #f3f0ea;
  --dust: #d4cdc0;
  --grey: #7a746c;
  --gold: #c9a45c;
  --gold-soft: rgba(201, 164, 92, 0.18);
  --line: rgba(10, 10, 10, 0.09);
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;
  --shadow: 0 20px 48px -28px rgba(0, 0, 0, 0.32);
  --shadow-hover: 0 28px 56px -24px rgba(0, 0, 0, 0.38);
}

/* Base */
html { background: var(--black); }
body {
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body:before { display: none !important; }

/* Header */
.header {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
}
.logo-mark {
  border-radius: var(--r-sm);
  background: var(--black);
  color: var(--bone);
  font-weight: 900;
}
.lang button {
  border-radius: 999px;
  border: 1px solid rgba(10, 10, 10, 0.18);
  min-height: 34px;
  min-width: 40px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.lang button.active,
.lang button:hover {
  background: var(--black);
  color: var(--bone);
  border-color: var(--black);
}
.menu-toggle { border-radius: var(--r-sm); }

/* Buttons */
.btn {
  border-radius: 999px;
  padding: 0 28px;
  font-weight: 800;
  letter-spacing: 0.04em;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s;
}
.btn.primary {
  background: var(--black);
  color: var(--bone);
}
.btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px -12px rgba(0, 0, 0, 0.45);
}
.btn.secondary {
  border: 1.5px solid rgba(10, 10, 10, 0.22);
  background: transparent;
}
.btn.secondary:hover {
  border-color: var(--black);
  background: var(--soft);
}

/* Hero */
.hero {
  background: var(--paper);
  border-bottom: none;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}
.hero-title {
  letter-spacing: -0.06em;
  font-weight: 1000;
  line-height: 0.92;
}
.hero-visual.hero-mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1.5fr 1fr;
  gap: 14px;
  padding: 18px 18px 18px 0;
  background: transparent;
  border: none;
}
.hero-mosaic .hm {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: #e8e4dc;
  box-shadow: var(--shadow);
}
.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 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-mosaic .hm:hover img { transform: scale(1.04); }
.hero-pill {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(10, 10, 10, 0.68);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 16px;
  border-radius: 999px;
}
.hero-pill:before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}

/* Metric strip */
.metric-strip .container { gap: 12px; }
.mini {
  border-left: none;
  background: var(--soft);
  border-radius: var(--r-md);
  padding: 18px 22px;
  border: 1px solid var(--line);
}
.mini strong { color: var(--gold); }

/* Leistungen cards */
#leistungen { background: var(--soft); }
#leistungen .grid-3 {
  gap: 20px;
  background: transparent;
  border: none;
}
.grid-3 .svc-card {
  padding: 0 !important;
  min-height: 0;
  border-radius: var(--r-lg);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.grid-3 .svc-card:before { display: none; }
.grid-3 .svc-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}
.svc-card .card-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.svc-card .card-body {
  padding: 24px 24px 28px;
  flex: 1;
}
.svc-card h3 {
  font-size: 18px;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.svc-card p {
  text-align: left;
  font-size: 15px;
  line-height: 1.55;
  color: #4a453c;
}

/* Dark service list */
.service-list {
  gap: 12px;
  background: transparent;
  border: none;
}
.service {
  border-radius: var(--r-md);
  background: #121212;
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: border-color 0.2s;
}
.service:hover { border-color: rgba(201, 164, 92, 0.35); }
.service h3 { color: var(--gold); }
.service:after { color: var(--gold); }

/* Split sections */
.split {
  border: none;
  padding-top: 28px;
  padding-bottom: 28px;
  gap: 28px;
}
.split > div:not(.photo) {
  background: transparent;
  padding: 40px 36px;
}
.photo {
  filter: none !important;
  border-radius: var(--r-lg);
  min-height: 580px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.photo:before { display: none !important; }
#automotive,
#transport,
#locations { background: var(--soft); }

/* Referenzfelder */
#referenzfelder .grid-2 {
  gap: 20px;
  background: transparent;
  border: none;
}
.image-card {
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow: hidden;
  background: var(--paper);
}
.image-card img {
  filter: none !important;
  transition: transform 0.6s ease;
}
.image-card:hover img {
  filter: none !important;
  transform: scale(1.03);
}
.image-card .content p { text-align: left; }

/* Behind the Scenes mosaic */
#behind-the-scenes { background: var(--soft); }
.reference-mosaic {
  gap: 12px;
  background: transparent;
  border: none;
}
.mosaic-item {
  filter: none !important;
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform 0.35s ease;
  box-shadow: var(--shadow);
}
.mosaic-item:hover { transform: scale(1.015); }
.mosaic-item:after {
  border-left: none;
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 9px 15px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

/* NDA + Contact */
.nda-box {
  border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.contact { background: var(--paper); }
.contact-box {
  gap: 20px;
  background: transparent;
  border: none;
  padding: 0 20px;
}
.contact-box > div,
.address {
  border-radius: var(--r-lg);
  background: var(--soft);
  border: 1px solid var(--line);
}

/* Footer */
.footer {
  background: var(--black);
  color: rgba(247, 244, 239, 0.55);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Dark sections */
.dark-section {
  background: var(--black);
  color: var(--bone);
}
.dark-section h2,
.dark-section h3 { color: var(--bone); }
.dark-section p { color: rgba(247, 244, 239, 0.68); }

/* Manifesto */
.manifesto {
  background: var(--black);
  color: var(--bone);
}

/* Responsive refinements */
@media (max-width: 1100px) {
  .hero-visual.hero-mosaic {
    height: auto;
    min-height: 0;
    padding: 0 16px 16px;
    grid-template-rows: 320px 200px;
  }
  #leistungen .grid-3 {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .split {
    padding: 16px 0;
    gap: 20px;
  }
  .photo { min-height: 420px; }
}

@media (max-width: 720px) {
  .hero-visual.hero-mosaic {
    grid-template-columns: 1fr;
    grid-template-rows: 280px 180px 180px;
    gap: 10px;
    padding: 0 12px 12px;
  }
  .hero-mosaic .hm-main { grid-column: 1; }
  #leistungen .grid-3 {
    grid-template-columns: 1fr;
  }
  .svc-card .card-img { aspect-ratio: 16 / 10; }
  .split {
    grid-template-columns: 1fr;
  }
  .photo {
    min-height: 320px;
    order: -1;
  }
  .split > div:not(.photo) {
    padding: 28px 18px;
  }
}

/* Smooth image rendering */
img {
  image-rendering: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Fix (Okt 2026): Kennzahlen-Kacheln sind hell – Untertext muss dunkel sein,
   sonst ist er auf dem hellen Grund unsichtbar. Gold etwas kräftiger für Kontrast. */
.metric-strip .mini span { color: #5f594f; }
.metric-strip .mini strong { color: #9a7a3c; }

/* ---------- Positionierung Okt 2026: Ablauf, Zielgruppen, Richtpreise ---------- */
.lead strong{color:var(--ink,#121212)}
.how{background:#fff}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;counter-reset:none}
.steps li{background:var(--soft,#f3f0ea);border:1px solid var(--line);border-radius:20px;padding:26px 24px}
.steps .step-n{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--black);color:var(--gold);font-weight:900;font-size:13px;letter-spacing:.06em;margin-bottom:16px}
.steps h3{font-size:18px;letter-spacing:-.02em;margin:0 0 8px;text-transform:none}
.steps p{font-size:15px;line-height:1.55}
.audience{background:#fff}
.audience-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start}
.chips{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.chips li{border:1px solid rgba(10,10,10,.15);border-radius:999px;padding:9px 16px;font-size:14px;font-weight:700;background:#fff}
html[lang="en"] .chips li[data-lang="en"]{display:list-item!important}
.why{background:var(--black);color:var(--bone);border-radius:20px;padding:34px 32px}
.why h3{color:var(--gold);font-size:20px;text-transform:none;letter-spacing:-.02em}
.why ul{margin:0;padding:0;list-style:none}
.why li{padding:12px 0;border-top:1px solid rgba(255,255,255,.12);font-size:15.5px;line-height:1.55;color:rgba(247,244,239,.82)}
.why li strong{color:#fff}
html[lang="en"] .why li[data-lang="en"]{display:list-item!important}
.prices{background:var(--soft,#f3f0ea)}
.price-models{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:28px}
.pm{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px}
.pm h3{font-size:17px;text-transform:none;letter-spacing:-.01em;margin-bottom:8px}
.pm p{font-size:14.5px;line-height:1.55}
.price-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.price-cat{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.price-cat summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;padding:16px 20px;font-weight:850;font-size:15px}
.price-cat summary::-webkit-details-marker{display:none}
.price-cat summary:after{content:"+";color:var(--gold);font-weight:900;font-size:20px;margin-left:12px}
.price-cat[open] summary:after{content:"–"}
.price-count{margin-left:auto;font-size:11px;color:var(--grey);font-weight:800;background:var(--soft,#f3f0ea);border-radius:999px;padding:3px 9px}
.price-cat ul{list-style:none;margin:0;padding:0 20px 14px}
.price-cat li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:9px 0;border-top:1px solid var(--line);font-size:14px}
.price-cat .pn{min-width:0}
.price-cat .pp{font-weight:800;white-space:nowrap}
.price-cat sup{color:var(--gold);font-weight:900}
.pbook{font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;border:1px solid rgba(10,10,10,.2);border-radius:999px;padding:6px 10px;white-space:nowrap}
.pbook:hover{background:var(--black);color:#fff;border-color:var(--black)}
.price-foot{font-size:13px;color:var(--grey);margin-top:16px}
.price-foot a{text-decoration:underline}
@media(max-width:1100px){.steps{grid-template-columns:1fr 1fr}.audience-grid{grid-template-columns:1fr}.price-models{grid-template-columns:1fr}.price-list{grid-template-columns:1fr}}
@media(max-width:700px){.steps{grid-template-columns:1fr}.price-cat li{grid-template-columns:minmax(0,1fr) auto}.pbook{grid-column:1 / -1;justify-self:start}.why{padding:26px 22px}}

/* ---------- Hero: großes Set-Foto mit handschriftlichem Schriftzug (Okt 2026) ---------- */
@font-face{font-family:"SP Hand";src:url("fonts/caveat-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
.hero-visual.hero-mosaic{grid-template-columns:1.15fr 1fr;grid-template-rows:1fr 1fr}
.hero-mosaic .hm-main{grid-column:1;grid-row:1 / 3}
.hero-mosaic .hm-main img{object-position:center 45%}
.hero-mosaic .hero-note{position:absolute;left:28px;bottom:30px;z-index:2;color:#fff;font-family:"SP Hand","Bradley Hand",cursive;font-weight:600;font-size:clamp(32px,2.8vw,46px);line-height:.98;letter-spacing:0;text-transform:none;transform:rotate(-4deg);transform-origin:left bottom;text-shadow:0 2px 18px rgba(0,0,0,.6)}
/* Corporate Events: Collage vollständig zeigen (enthält Schriftzug) */
#events .photo.events-photo{min-height:0!important;aspect-ratio:852/568;align-self:start;background-size:cover;background-position:center}
@media (max-width:1100px){
  .hero-visual.hero-mosaic{grid-template-columns:1.1fr 1fr;grid-template-rows:280px 280px}
}
@media (max-width:720px){
  .hero-visual.hero-mosaic{grid-template-columns:1fr 1fr;grid-template-rows:400px 170px}
  .hero-mosaic .hm-main{grid-column:1 / 3;grid-row:1}
  .hero-mosaic .hero-note{font-size:32px;left:18px;bottom:22px}
}
@media (max-width:1100px){.split>.photo{width:auto!important;justify-self:stretch}}
/* Logistik-Bild: Querformat komplett zeigen, nicht beschneiden */
#transport .split{align-items:center}
@media (min-width:1101px){#transport .container.split{grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr)}}
#transport .photo.logistics-photo{min-height:0!important;height:auto!important;aspect-ratio:1800/843;align-self:center;background-size:cover!important;background-position:center!important}
#transport .own-gear-title{font-size:clamp(20px,1.8vw,26px);line-height:1.15;margin:30px 0 12px;letter-spacing:-.02em}
/* Positionierung + München (neu) */
.intro-pos{padding:96px 0}
.intro-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:64px;align-items:start}
.intro-grid p{color:#5f594f;font-size:17px;line-height:1.7;margin-bottom:16px;max-width:62ch}
.intro-grid .intro-claim{color:#111;font-weight:700;font-size:19px;margin-top:8px}
.intro-side{border-left:2px solid #c9a86a;padding-left:32px;margin-top:6px}
.intro-side h3{font-size:clamp(20px,1.8vw,26px);line-height:1.2;margin:10px 0 16px;letter-spacing:-.02em}
.nda-box .trust-sub{font-size:clamp(20px,1.8vw,26px);line-height:1.2;margin:34px 0 14px;letter-spacing:-.02em}
.nda-box p+p{margin-top:12px}
#ablauf .section-head p{max-width:60ch}
@media (max-width:900px){.intro-pos{padding:64px 0}.intro-grid{grid-template-columns:1fr;gap:40px}.intro-side{padding-left:20px}}
.contact-box p+p{margin-top:12px}
.svc-card .card-img-events{object-position:center 55%}
/* ===== Event-Relaunch ===== */
.hero-title.hero-title-ev{font-size:clamp(54px,6.4vw,104px);line-height:.92}
.hero-title.hero-title-ev .gold{display:block}
.hero-mosaic .hm-events{object-position:center 40%}
.svc-card .card-link{display:inline-block;margin-top:14px;font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#9a7a3c;text-decoration:none}
.svc-card .card-link:hover{text-decoration:underline}
.svc-card-film{background:#111;color:#f4f1ea}
.svc-card-film h3{color:#fff}.svc-card-film p{color:#cfc8bb}
.dark-section .service h3{color:inherit}
.production-intro{padding:96px 0 40px;border-top:1px solid rgba(0,0,0,.08)}
.production-intro .section-head p{max-width:72ch}
.production-intro .intro-claim{color:#111;font-weight:700;margin-top:10px}
.contact-box .contact-claim{color:#111;font-weight:700;margin-top:14px}
.contact-box .contact-alt{margin-top:22px;font-size:15px}
.contact-box .contact-alt a{color:#9a7a3c;font-weight:700;text-decoration:none}
@media (max-width:720px){.hero-title.hero-title-ev{font-size:clamp(44px,12vw,64px)}.production-intro{padding:64px 0 24px}}
.svc-card.svc-card-film,.svc-card.svc-card-film .card-body{background:#111!important}
.svc-card.svc-card-film h3{color:#fff!important}.svc-card.svc-card-film p{color:#d8d1c4!important}
.svc-card.svc-card-film .card-link{color:#c9a86a}
.hero-title.hero-title-ev{font-size:clamp(48px,5.3vw,86px)}
.hero-title.hero-title-ev .gold{white-space:nowrap}
@media (max-width:720px){.hero-title.hero-title-ev{font-size:clamp(40px,11.5vw,60px)}}
/* Kennzahlen-Leiste mit Fließtext */
.metric-strip.metric-strip-lg .container{gap:28px;padding-top:44px;padding-bottom:48px;align-items:start}
.metric-strip-lg .mini.mini-lg{padding:4px 0 4px 20px}
.metric-strip-lg .mini strong{font-size:18px;margin-bottom:12px}
.metric-strip-lg .mini-lead{color:#f4efe5;font-weight:700;font-size:15px;line-height:1.4;margin:0 0 8px}
.metric-strip-lg .mini-text{color:rgba(244,239,229,.72);font-size:14px;line-height:1.6;margin:0}
@media (max-width:1100px){.metric-strip.metric-strip-lg .container{grid-template-columns:1fr 1fr;gap:32px 28px}}
@media (max-width:640px){.metric-strip.metric-strip-lg .container{grid-template-columns:1fr;gap:28px}}
.metric-strip.metric-strip-lg .container{align-items:stretch;gap:16px}
.metric-strip-lg .mini.mini-lg{padding:22px 22px 24px}
.metric-strip-lg .mini-lead{color:#111!important}
.metric-strip-lg .mini-text{color:#5f594f!important}
#events h2{font-size:clamp(30px,3.5vw,48px)!important;overflow-wrap:anywhere;hyphens:auto}
#anlaesse .anl-intro{color:#5f594f;font-size:17px;line-height:1.65;margin:0 0 24px;max-width:58ch}
#anlaesse .why li strong{display:inline-block;margin-bottom:4px}
.svc-card .card-lead{color:#111;font-weight:700;margin-bottom:10px}
.svc-card .card-body p+p{margin-top:10px}
.section-head p+p{margin-top:12px}
#ablauf .steps .step-lead{color:#111;font-weight:700;margin-bottom:8px}
#ablauf .steps li p+p{margin-top:8px}
.dark-section .service .svc-lead{color:#f4efe5!important;font-weight:700;margin-bottom:8px}
.dark-section .service h3{font-size:clamp(17px,1.35vw,20px);hyphens:manual;overflow-wrap:break-word}
/* Referenzen / Referenzfelder / Production-Seite */
#referenzen .section-head .lead-line{color:#111;font-weight:700}
#referenzfelder .ref-grid{gap:18px}
#referenzfelder .ref-field{padding:28px 26px;background:#fff;border-radius:var(--r-lg,18px)}
#referenzfelder .ref-field h3{font-size:19px;margin-bottom:10px}
#referenzfelder .ref-field p{color:#5f594f;line-height:1.6}
#locations .loc-claim{color:#111;font-weight:700}
.production-page-head{padding-top:140px}
@media (max-width:720px){.production-page-head{padding-top:110px}}
#referenzfelder .ref-grid{background:none!important;border:0!important;box-shadow:none!important}
/* Blocksatz für Fließtexte (Startseite + Production) */
main p,main .why li,main .legal p{text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:8 4 3}
main .chips li,main .actions,main .quote,main .hero-cities,main .eyebrow{text-align:left}
@media (max-width:600px){main p,main .why li,main .legal p{text-align:left}}
#warum .service-list{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){#warum .service-list{grid-template-columns:1fr}}
.nda-box .btn{border-color:rgba(244,239,229,.5);color:#f4efe5}
main .svc-lead,main .card-lead,main .mini-lead,main .step-lead,main .intro-claim,main .contact-claim,main .lead-line,main .loc-claim{text-align:left}
main .hero p.lead{text-align:left}
/* Blocksatz auch gegen ältere Regel in sp-fresh.css durchsetzen */
main .history-text,main .card p{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
main .card p.card-lead,main p.loc-claim,main .history-text.quote,main p.quote{text-align:left}
@media (max-width:600px){main .history-text,main .card p{text-align:left}}
#service-line-production{padding:80px 0}
#service-line-production .ref-field{padding:28px 26px;background:#fff;border-radius:var(--r-lg,18px)}
#service-line-production .ref-field h3{font-size:19px;margin-bottom:10px}
#service-line-production .ref-field p{color:#5f594f;line-height:1.6}
#service-line-production .ref-grid{gap:18px;background:none!important;border:0!important}