/* ============================================================================
   KARIM EL HAMDAOUI · HOMEPAGE V2 ADDITIONS
   Loaded by index.html only, after style.css. Reuses the existing tokens
   (colours, Fraunces / Geist / JetBrains Mono, spacing). No new palette —
   the one light section takes its colours 1:1 from css/brands.css (.brands-cp).
   Subpages are not affected by anything in this file.
   HOMEPAGE V2 FINAL (03.11.2026): wordmark second line, benefit section,
   display-type alignment, difference, four-phase process, budget, idea
   section, contact dialog. Creative Engine block removed (owner decision).
   ========================================================================== */


/* ---------------------------------------------------------------------------
   00 · HEADER — two-line wordmark moved to css/style.css (03.11.2026) so
   every page shares one definition.
   ------------------------------------------------------------------------ */


/* ---------------------------------------------------------------------------
   01 · HERO — copy hierarchy (video, veil and layout unchanged)
   ------------------------------------------------------------------------ */
.hero-headline--v2 {
  font-size: clamp(2.8rem, 7.4vw, 8.75rem);
  line-height: 0.9;
  margin-bottom: clamp(16px, 1.8vw, 28px);
}

.hero-subline {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.3rem, 2.5vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--off-white);
  margin-bottom: clamp(16px, 1.8vw, 28px);
}

.hero-subline em {
  font-style: italic;
  font-weight: 400;
  color: var(--red);
}

/* Longer approved description: keep a comfortable measure */
.hero-content .hero-sub { max-width: 60ch; }


/* ---------------------------------------------------------------------------
   DISPLAY TYPE — reference: homepage hero headline
   Hero: Fraunces 800 · uppercase · letter-spacing -0.03em · line-height 0.9
   · font-optical-sizing none + "opsz" 144 (token --hero-display-opsz).
   Applied to the six film titles and the closing headline; sizes stay
   per element (no hero size transfer).
   ------------------------------------------------------------------------ */
.film-strip .strip-title,
.contact-section .contact-headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.9;
  font-optical-sizing: none;
  font-variation-settings: "opsz" var(--hero-display-opsz);
}


/* ---------------------------------------------------------------------------
   SHARED — section titles, lead, red kicker, text links
   ------------------------------------------------------------------------ */
.kicker--red { color: var(--red); }

.home-section-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--red);
}

.home-section-lead {
  margin-top: clamp(18px, 2vw, 28px);
  max-width: 58ch;
  font-size: clamp(0.95rem, 1.15vw, 1.0625rem);
  line-height: 1.7;
  color: var(--text-2);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--off-white);
  border-bottom: 1px solid rgba(232, 40, 46, 0.6);
  padding-top: 6px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.text-link::after {
  content: "→";
  color: var(--red);
  transition: transform var(--dur) var(--ease);
}
.text-link:hover { border-color: var(--red); }
.text-link:hover::after { transform: translateX(4px); }

.text-link--lg { font-size: 0.8125rem; }


/* ---------------------------------------------------------------------------
   PLACEHOLDERS — pending graphics, clearly labelled, fixed aspect ratios
   Replace each .ph with an <img> of the same ratio once delivered.
   ------------------------------------------------------------------------ */
.ph {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  text-align: center;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(244, 241, 235, 0.025) 0 1px,
      transparent 1px 14px
    ),
    var(--black);
  border: 1px dashed rgba(244, 241, 235, 0.16);
  overflow: hidden;
}

.ph--4x3  { aspect-ratio: 4 / 3; }

.ph-label,
.ph-meta {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.5;
}
.ph-label { color: rgba(244, 241, 235, 0.42); }
.ph-meta  { color: rgba(244, 241, 235, 0.24); }


/* ---------------------------------------------------------------------------
   02 · DEIN VORTEIL — three compact benefit points
   ------------------------------------------------------------------------ */
.benefit-section { background: var(--dark-gray); }

.benefit-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 56px);
}

.benefit-item {
  border-top: 1px solid rgba(244, 241, 235, 0.14);
  padding-top: clamp(20px, 2vw, 28px);
  transition: border-top-color var(--dur) var(--ease);
}
.benefit-item:hover { border-top-color: var(--red); }

.benefit-n,
.diff-n,
.process-n {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1rem, 2vw, 2rem);
  font-weight: 100;
  color: var(--red);
  line-height: 1;
  margin-bottom: 14px;
}

.benefit-name,
.diff-name,
.process-name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.5vw, 1.4rem);
  color: var(--off-white);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.benefit-desc,
.diff-desc,
.process-desc {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-2);
  margin-top: 10px;
  max-width: 44ch;
}


/* ---------------------------------------------------------------------------
   03 · WORK — intro line under the section title (strips unchanged)
   ------------------------------------------------------------------------ */
.work-lead {
  margin-top: clamp(18px, 2vw, 28px);
  max-width: 56ch;
  font-size: clamp(0.95rem, 1.15vw, 1.0625rem);
  line-height: 1.7;
  color: var(--text-2);
}


/* ---------------------------------------------------------------------------
   04 · ZIELGRUPPEN — existing partner cards + graphic slot
   ------------------------------------------------------------------------ */
.audience-card .ph,
.audience-card .audience-media {
  margin-bottom: clamp(24px, 2.5vw, 36px);
}

/* Audience images (owner-approved 03.11.2026) — 4:3 slot, same as placeholder */
.audience-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface);
}
.audience-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.audience-card .partner-num { margin-bottom: 16px; }

/* "PRODUKTIONSFIRMEN" must fit a third-width card down to 1025px */
.audience-card .partner-name {
  font-size: clamp(1.3rem, 1.8vw, 2.2rem);
  overflow-wrap: break-word;
}

/* One clear link per audience — visible without hover */
.audience-card .partner-link {
  opacity: 1;
  transform: none;
  border-bottom: 1px solid rgba(232, 40, 46, 0.6);
  padding-bottom: 4px;
}


/* ---------------------------------------------------------------------------
   05 · DIFFERENZIERUNG — three arguments with existing process images
   ------------------------------------------------------------------------ */
.diff-section { background: var(--black); }

.diff-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 40px);
}

.diff-media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--surface);
  margin-bottom: clamp(20px, 2vw, 28px);
}
.diff-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 4:3 source in the 4:5 frame — keep viewer and colour wheels in view */
.diff-media img.diff-img--finishing { object-position: 70% 50%; }


/* ---------------------------------------------------------------------------
   06 · ARBEITSWEISE — four phases
   ------------------------------------------------------------------------ */
.process-section { background: var(--dark-gray); }

.process-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 2.5vw, 40px);
}

.process-card {
  border-top: 1px solid rgba(244, 241, 235, 0.14);
  padding-top: clamp(20px, 2vw, 28px);
  transition: border-top-color var(--dur) var(--ease);
}
.process-card:hover { border-top-color: var(--red); }

.process-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
  margin-top: clamp(40px, 4.5vw, 64px);
}


/* ---------------------------------------------------------------------------
   07 · BUDGET — the homepage's only light section.
   Colours copied 1:1 from css/brands.css (.brands-cp, Creative Preview):
   section #D8D3CC · ink #1F1D1B / #45413D / #5F5A55 · accent #C31D32
   (white on accent and accent on #D8D3CC both pass WCAG AA).
   ------------------------------------------------------------------------ */
.budget-section {
  --cp-bg:     #D8D3CC;
  --cp-ink:    #1F1D1B;
  --cp-ink-2:  #45413D;
  --cp-muted:  #5F5A55;
  --cp-accent: #C31D32;
  --cp-accent-hover: #A8182B;
  background: var(--cp-bg);
  color: var(--cp-ink);
}

.budget-inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 6vw, 112px);
  align-items: end;
}

.budget-kicker { color: var(--cp-muted); }

.section-head h2.budget-title,
.budget-title {
  margin-top: 16px;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.8rem, 3.2vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--cp-ink);
}
.budget-title em { color: var(--cp-accent); }

.budget-desc {
  font-size: clamp(0.95rem, 1.15vw, 1.0625rem);
  line-height: 1.7;
  color: var(--cp-ink-2);
  max-width: 48ch;
  margin-bottom: clamp(24px, 2.5vw, 36px);
}

.budget-btn {
  background: var(--cp-accent);
  color: #FFFFFF;
  border: 1px solid var(--cp-accent);
  min-height: 48px;
  justify-content: center;
}
.budget-btn:hover {
  background: var(--cp-accent-hover);
  border-color: var(--cp-accent-hover);
}
.budget-btn:focus-visible {
  outline: 2px solid var(--cp-ink);
  outline-offset: 3px;
}


/* ---------------------------------------------------------------------------
   08 · SO KÖNNTE SICH AUCH DEINE MARKE ANFÜHLEN
   ------------------------------------------------------------------------ */
.feel-section { background: var(--dark-gray); }

.feel-inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: center;
}

.feel-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface);
}
.feel-media img,
.feel-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.feel-text .home-section-title {
  margin-top: 16px;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.8rem, 3.2vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--off-white);
}

.feel-text .text-link { margin-top: clamp(24px, 2.5vw, 36px); }


/* ---------------------------------------------------------------------------
   09 · ÜBER MICH — browser default dd indent removed (homepage only)
   ------------------------------------------------------------------------ */
.about-meta dd { margin: 0; }


/* ---------------------------------------------------------------------------
   10 · FAQ — one display style for all eight questions (reference: the
   former key questions); accordion logic unchanged. home.css is loaded by
   index.html only, so other pages keep the global .faq-question rule.
   ------------------------------------------------------------------------ */
.faq-list .faq-question {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.15rem, 1.9vw, 1.65rem);
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* Red divider follows the real accordion state (native <details open>):
   only open items are marked, closed ones keep the grey divider. */
.faq-list .faq-item:has(> details[open]) {
  border-bottom-color: rgba(232, 40, 46, 0.45);
}


/* ---------------------------------------------------------------------------
   11 · CLOSING CTA — red section kept; primary button inverted
   ------------------------------------------------------------------------ */
.btn--contact-solid {
  background: white;
  color: var(--red);
  border-color: white;
}
.btn--contact-solid:hover {
  background: var(--off-white);
  color: var(--red);
  border-color: var(--off-white);
}

.contact-social { align-items: center; }
.contact-link--plain { text-transform: none; }


/* ---------------------------------------------------------------------------
   12 · CONTACT DIALOG — lean first contact (js/home-contact.js)
   Sits above header (900) and nav overlay, below the film lightbox (9999).
   ------------------------------------------------------------------------ */
.cdlg {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.cdlg[hidden] { display: none; }

.cdlg-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 9, 9, 0.84);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.cdlg-panel {
  position: relative;
  width: min(100%, 580px);
  max-height: calc(100svh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  border: 1px solid rgba(244, 241, 235, 0.12);
  border-top: 2px solid var(--red);
  padding: clamp(28px, 4vw, 48px);
  box-shadow: var(--shadow-card);
}

.cdlg-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  transition: color var(--dur);
}
.cdlg-close:hover { color: var(--off-white); }

.cdlg-title {
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--off-white);
}

.cdlg-desc {
  margin-top: 14px;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-2);
}

.cdlg-form { margin-top: clamp(24px, 3vw, 32px); }

.cdlg-field + .cdlg-field { margin-top: 22px; }

.cdlg-label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--off-white);
}

.cdlg-optional {
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0.04em;
}

.cdlg-input {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 1rem;           /* 16px: no iOS zoom on focus */
  line-height: 1.5;
  color: var(--off-white);
  background: var(--black);
  border: 1px solid rgba(244, 241, 235, 0.2);
  border-radius: 0;
  padding: 12px 14px;
  min-height: 48px;
  transition: border-color var(--dur);
}
.cdlg-input:focus {
  outline: none;
  border-color: var(--red);
}
.cdlg-input[aria-invalid="true"] { border-color: var(--red); }

.cdlg-textarea {
  resize: vertical;
  min-height: 132px;
}

.cdlg-hint,
.cdlg-error {
  margin-top: 8px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted);
}
.cdlg-error { color: #FF6B6F; }

.cdlg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.cdlg-btn {
  min-height: 48px;
  justify-content: center;
  cursor: pointer;
}

.cdlg-status {
  min-height: 1.5em;
  margin-top: 14px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--off-white);
}

.cdlg-note {
  margin-top: 8px;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--muted);
}
.cdlg-mail-link {
  color: var(--text-2);
  border-bottom: 1px solid rgba(170, 166, 163, 0.4);
  overflow-wrap: anywhere;
}


/* ---------------------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------------------ */
@media (max-width: 1024px) {
  /* style.css stacks partner cards; keep them compact on tablet */
  .audience-card {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    column-gap: clamp(24px, 4vw, 40px);
    align-content: start;
  }
  .audience-card .ph,
  .audience-card .audience-media {
    grid-row: 1 / span 4;
    margin-bottom: 0;
    align-self: start;
  }

  .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .budget-inner { grid-template-columns: 1fr; align-items: start; }

  .feel-inner { grid-template-columns: 1fr; }
  .feel-media { max-width: 760px; }
}

@media (max-width: 860px) {
  .benefit-grid { grid-template-columns: 1fr; max-width: 640px; }
  .diff-grid { grid-template-columns: 1fr; max-width: 460px; }
}

@media (max-width: 600px) {
  .audience-card { display: block; }
  .audience-card .ph,
  .audience-card .audience-media { margin-bottom: 24px; }

  .process-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .hero-headline--v2 {
    font-size: clamp(2.1rem, 10.4vw, 3.2rem);
  }
  .hero-subline { font-size: clamp(1.2rem, 5.6vw, 1.5rem); }

  .contact-actions .btn,
  .budget-btn,
  .cdlg-btn {
    width: 100%;
    justify-content: center;
  }

  .cdlg { padding: 0; align-items: flex-end; }
  .cdlg-panel {
    width: 100%;
    max-height: 100svh;
    border-left: 0;
    border-right: 0;
    padding: 28px 20px calc(24px + env(safe-area-inset-bottom));
  }
}