/* COLIGHT&SOUND · Großzügiges Layout
   Wird NACH dem Seiten-CSS geladen und hebt nur Maße an: Breite, Ränder, Schrift, Abstände.
   Farben, Schriften und Aufbau bleiben. Auf dem Handy ändert sich fast nichts. */

:root {
  --maxw: 1440px;                                   /* vorher 1240px */
  --gutter: clamp(20px, 3.6vw, 64px);               /* Seitenrand, wächst mit dem Bildschirm */
  --section-y: clamp(80px, 7.5vw, 140px);           /* Abstand zwischen Sektionen */
  --fs-body: clamp(16px, 0.15vw + 14.4px, 17.5px);  /* Fließtext 16 → 17,5 px */
  --fs-lead: clamp(17px, 0.3vw + 14.4px, 20px);    /* Einleitungen */
}

/* ---------- ein Raster für alles: Navigation, Inhalt, Footer ---------- */
.wrap,
header nav,
.hero-inner,
footer .wrap,
.prep-nav-inner,
.cc-inner {
  max-width: var(--maxw) !important;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)) !important;
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)) !important;
  box-sizing: border-box;
}
/* Absätze, die direkt in einer Sektion stehen, rutschten aus dem Raster (z. B. .mat-note) */
.section > p, .section > .mat-note {
  max-width: var(--maxw); box-sizing: border-box;
  margin-left: auto !important; margin-right: auto !important;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* ---------- Kopfzeile ---------- */
header nav a, header nav button, .nav-trigger { font-size: 13px !important; letter-spacing: .09em !important; }
@media (min-width: 1400px) {
  header nav { min-height: 96px; }
}

/* ---------- Startseiten-Hero: volle Höhe, große Zeile ---------- */
.hero { min-height: min(1040px, 100svh) !important; }
.home-page .hero h1, .hero h1 {
  font-size: clamp(52px, 5.6vw, 108px) !important;
  line-height: .88 !important; letter-spacing: .004em;
  max-width: none !important;
}
.hero p, .hero-sub { font-size: var(--fs-lead) !important; line-height: 1.6 !important; max-width: 40ch !important; }
.hero-actions { margin-top: clamp(28px, 2.6vw, 48px) !important; gap: 14px !important; }
.home-topics, .hero-meta { margin-top: clamp(40px, 4vw, 72px) !important; }

/* ---------- Typografie ---------- */
main p { font-size: var(--fs-body); line-height: 1.72; max-width: 68ch; }
.section-h1 { font-size: clamp(42px, 4.6vw, 88px) !important; line-height: .9 !important; }
main h2 { font-size: clamp(36px, 3.8vw, 72px); line-height: .92; margin-bottom: clamp(20px, 1.8vw, 32px); }
main h3 { font-size: clamp(22px, 1.25vw, 27px); }
.mieten-lead, .mat-lead-text, .req-intro { font-size: var(--fs-lead) !important; line-height: 1.6 !important; max-width: 52ch; }
.eyebrow { font-size: 12.5px !important; margin-bottom: clamp(18px, 1.6vw, 28px) !important; }

/* ---------- Abstände ---------- */
.section { padding-top: var(--section-y) !important; padding-bottom: var(--section-y) !important; }
.mat-cell { padding-top: clamp(32px, 2.8vw, 56px) !important; padding-bottom: clamp(32px, 2.8vw, 56px) !important; }
.mat-lead { margin-bottom: clamp(48px, 5vw, 96px) !important; }
.service-card, .cat-card { padding: clamp(28px, 2.6vw, 52px) !important; }

/* ---------- Knöpfe ---------- */
.btn { font-size: 13.5px !important; padding: 18px 30px !important; }
@media (min-width: 1400px) { .btn { font-size: 14px !important; padding: 20px 34px !important; } }

/* ---------- Laufschrift ---------- */
.marquee { padding-top: clamp(16px, 1.8vw, 30px) !important; padding-bottom: clamp(16px, 1.8vw, 30px) !important; }
.marquee-track span { font-size: clamp(12px, .95vw, 17px) !important; }

/* ---------- Footer ---------- */
footer { padding-top: clamp(64px, 6vw, 120px) !important; }
footer h3, footer h4 { font-size: clamp(22px, 1.5vw, 30px) !important; margin-bottom: 14px; }
footer a, footer p, footer li { font-size: clamp(15px, .2vw + 13px, 17px); }

/* ---------- Katalog, Kategorie- und Artikelseiten ---------- */
.hero-inner { width: 100%; }
.mieten-grid { gap: clamp(10px, .9vw, 18px) !important; }
.mieten-card { padding: clamp(22px, 2vw, 40px) !important; }
.mieten-card h2, .mieten-card h3 { font-size: clamp(20px, 1.35vw, 30px) !important; }
.mieten-card p { font-size: clamp(14px, .2vw + 12.4px, 16.5px) !important; }
.mieten-links { display: flex !important; flex-wrap: wrap !important; overflow: visible !important; gap: 6px !important; max-width: 100%; }
.mieten-links a { font-size: 11.5px !important; padding: 7px 11px !important; white-space: nowrap; flex: 0 0 auto; }
.facts-grid .fact { padding: clamp(20px, 1.8vw, 34px) !important; }
.fact-k { font-size: 12px !important; }
.facts-grid .fact p, .facts-grid .fact span:not(.fact-k) { font-size: clamp(14px, .2vw + 12.4px, 16.5px) !important; }
main table td, main table th { padding-top: clamp(14px, 1.1vw, 22px) !important; padding-bottom: clamp(14px, 1.1vw, 22px) !important; }
.pl-link { font-size: clamp(15px, .28vw + 12.2px, 19px) !important; }
.add-btn { min-width: 40px; min-height: 40px; font-size: 18px !important; }

/* ---------- Projekte / Referenzen (Startseite und /referenzen) ---------- */
/* Einheitlich 4:3 – passt für Quer- und Hochformate; je Bild ein eigener Ausschnitt aufs Motiv */
.proj-grid { align-items: stretch !important; }
.proj-grid figure { display: flex !important; flex-direction: column !important; height: 100%; }
.proj-grid figure img {
  aspect-ratio: 4 / 3 !important; width: 100% !important; height: auto !important; object-fit: cover !important;
  filter: saturate(.9) contrast(1.05) brightness(.97); transition: filter .4s ease;
}
.proj-grid figure:hover img { filter: saturate(1) contrast(1.05) brightness(1.04); }
img[src*="leat-con-2026-open-busk-jam"]      { object-position: 52% 50% !important; }
img[src*="leat-con-2026-technik"]            { object-position: 78% 50% !important; } /* Rack sitzt rechts */
img[src*="ref-parkbuehne-wuhlheide"]         { object-position: 50% 50% !important; }
img[src*="ref-splash-festival"]              { object-position: 50% 50% !important; }
img[src*="ref-tempodrom-marc-uwe-kling"]     { object-position: 50% 50% !important; }
img[src*="ref-kongress-atlantic-hotel"]      { object-position: 62% 50% !important; }
img[src*="ref-columbia-theater"]             { object-position: 56% 50% !important; }
img[src*="ref-pult-ausstellung"]             { object-position: 92% 50% !important; } /* Pult sitzt rechts */
img[src*="about-regiepult"]                  { object-position: 50% 27% !important; } /* Hochformat: Pult */
img[src*="ref-polizei-tag-der-offenen-tuer"] { object-position: 50% 4% !important; }  /* Hochformat: Bühne + Gelände */
img[src*="ref-westfalenpark-dortmund"]       { object-position: 50% 10% !important; } /* Hochformat: Bühne */
img[src*="ref-carl-experience-day"]          { object-position: 50% 90% !important; } /* Hochformat: Cases */

/* Bildunterschrift: Titel lesbar, Metazeile und Link klein; Link immer unten bündig */
.proj-grid figure figcaption {
  flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 24px !important;
  font-family: Barlow, system-ui, sans-serif !important; font-size: clamp(16px, .2vw + 13.8px, 18px) !important;
  line-height: 1.45 !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--text, #f2f2f2) !important;
}
.proj-grid figure figcaption .proj-meta {
  font-family: "JetBrains Mono", ui-monospace, monospace !important; font-size: 10.5px !important; line-height: 1.6 !important;
  letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--text-dim, #969696) !important;
}
.proj-grid figure figcaption .proj-case {
  margin-top: auto; align-self: flex-start;
  font-family: "JetBrains Mono", ui-monospace, monospace !important; font-size: 11px !important;
  letter-spacing: .1em !important; text-transform: uppercase !important;
}

/* ---------- Handy: Ränder wie bisher ---------- */
@media (max-width: 720px) {
  :root { --gutter: 20px; }
  .hero { min-height: auto !important; }
  .home-page .hero h1, .hero h1 { font-size: clamp(40px, 11.5vw, 56px) !important; }
}