/* anton-tuning.css — globale Lesbarkeits-Optimierungen für Anton
 *
 * Problem: Anton liefert NUR Weight 400. Webflow-CSS verlangt aber 700 →
 * Browser synthesiert fake-bold = zu dick + schlechtere Lesbarkeit.
 * Plus die Original-line-heights waren für Mangogrotesque getuned (etwas
 * weitere Letterforms) — Anton ist schmaler → braucht mehr Luft.
 *
 * Fix:
 *   • font-synthesis: none  → kein künstliches Bold mehr
 *   • font-weight: 400      → Anton's echtes Single-Weight nutzen
 *   • line-height anheben   → bessere Lesbarkeit, atmungsaktiv
 *   • letter-spacing minimal lockern bei kleineren Sizes
 *
 * Dieses File wird ZULETZT geladen damit Webflow + legal-page.css übersteuert.
 */

/* === SEO-only H1 visually-hidden ===
 * Detroit hat ein verstecktes h1.h1-home für SEO/Accessibility ("Detroit - AI
 * Production House in Paris…"). Mein globaler h1-Selector hat das sichtbar
 * gemacht → riesiger Textblock über dem Hero. Visually-hidden Pattern zurück.
 */
.h1-home,
h1.h1-home,
.sr-only, .visually-hidden, [aria-hidden="true"].h1-home {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  font-size: 1px !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

/* === Anti fake-bold global === */
h1, h2, h3, h4, h5, h6,
.dlf-name, .dlf-cta, .dlf-word, .dlf-cta-row a,
.legal-title, .legal-brand, .legal-main h2 {
  font-synthesis-weight: none;
  font-synthesis: none;
}

/* === Anton-spezifische Tunings ===
 *
 * Wichtig: die ORIGINALEN Webflow-Sizes (H1 6.75rem = 108px, .h1-style bis
 * 207px) wurden für Mangogrotesque ausgelegt. Anton ist deutlich SCHMALER —
 * dadurch wirkt das gleiche Pixel-Maß noch wuchtiger UND einzelne Wörter
 * passen weniger gut in eine Zeile. Wir cappen die Display-Sizes via clamp().
 */

/* H1 — globale Cap. Original 6.75rem (108px) blieb passend, aber .h1-style
   ging bis 207px. Mit Anton zu groß → Cap auf max 140px */
h1 {
  font-weight: 400 !important;
  line-height: 1.04 !important;
  letter-spacing: -0.015em;
  font-size: clamp(2.4rem, 7vw, 6.4rem) !important;  /* 38–102px range */
  word-spacing: 0.02em;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* H2 — Original 4.5rem (72px). Anton ok bei dem Maß. */
h2 {
  font-weight: 400 !important;
  line-height: 1.14 !important;
  letter-spacing: -0.005em;
  font-size: clamp(1.9rem, 5vw, 4.5rem) !important;  /* 30–72px range */
  overflow-wrap: break-word;
}

/* H3 + H4 */
h3, h4 {
  font-weight: 400 !important;
  line-height: 1.22 !important;
}
h3 { font-size: clamp(1.4rem, 2.4vw, 2.2rem) !important; }
h4 { font-size: clamp(1.1rem, 1.8vw, 1.8rem) !important; }

/* === Detroit-spezifische große Display-Klassen — direkt überstimmen === */

/* .h1-style + .heading-h1 (Webflow Standard) — war 207px = Hero-Killer */
.h1-style, .heading-h1, .heading-style-h1,
[class*='heading-style-h1'] {
  font-size: clamp(3rem, 9vw, 8.4rem) !important;  /* 48–134px */
  line-height: 1.02 !important;
  font-weight: 400 !important;
  letter-spacing: -0.015em !important;
  overflow-wrap: break-word;
  word-spacing: 0.02em;
}

/* Heading-style-2 Webflow class — war 144px (Projects Page) */
.h2-style, .heading-h2, .heading-style-h2,
[class*='heading-style-h2'] {
  font-size: clamp(2.4rem, 7vw, 6rem) !important;  /* 38–96px */
  line-height: 1.06 !important;
  font-weight: 400 !important;
  letter-spacing: -0.008em !important;
  overflow-wrap: break-word;
}

/* Artist-name + project-name = die "Dior Addict", "Louis Vuitton Asnieres"
   Headlines die abgeschnitten waren */
.artist-name, .project-name,
.h1-style.artist-name, .h1-style.project-name {
  font-size: clamp(2.2rem, 6.5vw, 5.4rem) !important;  /* 35–86px */
  line-height: 1.04 !important;
  white-space: normal !important;
  word-spacing: 0.05em;
  overflow-wrap: break-word;
}

/* === Detroit Home-Hero ".fat" + ".fat.snd" ("CRAFTING" / "CULTURE") ===
 * Original 207px Mango passte zur 0.8-line-height. Anton-Letter sind etwas
 * höher → bei -28.8px margin-top der zweiten Zeile überlappte CULTURE auf
 * CRAFTING. Plus 207px ist zu wuchtig in Anton.
 */
.fat {
  font-size: clamp(3rem, 11vw, 8.2rem) !important;     /* 48–131px statt 207px */
  line-height: 0.92 !important;                         /* Anton braucht etwas mehr Luft */
  letter-spacing: -0.018em !important;
}
.fat.snd {
  margin-top: 0 !important;                             /* kein negativer Overlap mehr */
}

/* === Footer (eigene Klassen, separat tunen) === */
#detroit-luxury-footer .dlf-name {
  font-weight: 400 !important;
  line-height: 0.94 !important;
  letter-spacing: -0.018em;
  font-size: clamp(3.5rem, 11vw, 10rem) !important;  /* 56–160px statt 201px */
}
#detroit-luxury-footer .dlf-cta {
  font-weight: 400 !important;
  line-height: 1.1 !important;
  font-size: clamp(1.8rem, 4.2vw, 3.6rem) !important;  /* sanfter */
}
#detroit-luxury-footer .dlf-word {
  font-weight: 400 !important;
  line-height: 1.05 !important;
}

/* === Legal-Pages — H2 bei 25px ist Anton schwer lesbar bei langen DE-Wörtern
   wie "Verbraucherstreitbeilegung". Auf Barlow Bold swappen — gleiche Hierarchie,
   deutlich angenehmer zu lesen. */
.legal-main h2 {
  font-family: Barlow, -apple-system, sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.4rem !important;
  letter-spacing: -0.005em !important;
  line-height: 1.25 !important;
  margin: 2.8rem 0 1rem !important;
  text-transform: none !important;
}

.legal-title {
  font-weight: 400 !important;
  line-height: 0.98 !important;
  font-size: clamp(2.5rem, 5.5vw, 5rem) !important;  /* "AGB" passt jetzt einzeilig */
  overflow-wrap: break-word;
  hyphens: auto;
}

/* === Body-Copy auf Legal-Pages: angenehmerer Lese-Rhythmus === */
.legal-main p,
.legal-main li {
  line-height: 1.72;
}
.legal-main p + p { margin-top: 1.1rem; }

/* === Body-Type generell === */
body { line-height: 1.55; }
p { line-height: 1.6; }

/* ──────────────────────────────────────────────────────────────────
 * Layout-Fix: Webflow .mw clipping bug
 * ──────────────────────────────────────────────────────────────────
 * Original-Detroit-CSS: `.mw { min-height: 100vh; overflow: clip }`
 *
 * Im Klon ohne GSAP-ScrollSmoother schneidet `overflow: clip` jeden
 * Content über die 100vh-Marke ab — Seite fühlt sich wie 1 Viewport
 * lang an, danach kommt direkt der Footer.
 *
 * Fix: erlaube normalen Document-Flow.
 */
.mw {
  overflow: visible !important;
  min-height: 0 !important;
}
.pw {
  min-height: 0 !important;
}
/* Sicherheits-Override falls Detroit-JS Inline-Styles setzt */
main[data-taxi] {
  overflow: visible !important;
}

/* ──────────────────────────────────────────────────────────────────
 * Layout-Fix: .pv.home position-fixed bug (Index/Projects/Contact)
 * ──────────────────────────────────────────────────────────────────
 * Original-Detroit-CSS: `.pv.home { position: fixed; height: 100vh; inset: 0 }`
 *
 * Ohne Detroit's Custom-Scroll-Engine fällt der ganze Content damit
 * aus dem Document-Flow → Body collapsed auf 0 → Footer klebt direkt
 * unter dem Header. Services hat die Klasse nicht und war unauffällig.
 *
 * Fix: zurück zum normalen Flow.
 */
.pv.home,
[data-taxi-view] {
  position: relative !important;
  height: auto !important;
  min-height: 100vh !important;
  inset: auto !important;
  width: 100% !important;
}
.transition-overlay {
  pointer-events: none !important;
}