/* Schrift im Bold-Stil (Axel, 26.10.2026). Farben, Formen und Inhalte bleiben wie in Route D,
   nur die Typografie wird schwerer, enger und größer. Liegt als letzte Stilschicht über allen Seiten. */

:root {
  --hero-title-size: clamp(4.1rem, 9vw, 7.6rem);
}

/* Überschriften: schwer und eng */
h1, h2 { font-weight: 900; letter-spacing: -0.045em; }
h2 { font-size: clamp(2.4rem, 5.8vw, 5rem); line-height: 0.96; }
h3, h4 { font-weight: 800; letter-spacing: -0.025em; }
.section-head h2 { max-width: 18ch; }
.lead { font-weight: 500; }

/* Startseiten-Hero: Versalien, sehr groß, maximale Stärke */
.hero h1, .hx h1 {
  font-size: var(--hero-title-size);
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: -0.055em;
  line-height: 0.84;
  font-variation-settings: "opsz" 40;
}
.hx h1 .accent { display: block; margin-top: 0.04em; }
.hx .hero-sub { font-size: clamp(1.2rem, 1.8vw, 1.5rem); font-weight: 500; margin-top: 2rem; }
.hx-pick-q { font-weight: 800; }
.hx-tabs button, .hx-link { font-weight: 800; }
.hx-chip b { font-weight: 900; }

/* Einstiege der Unterseiten: gleiche Wucht */
main > section:first-child:not(.hx) h1 {
  text-transform: uppercase;
  font-size: clamp(2.5rem, 6.2vw, 5.6rem);
  hyphens: manual;
  font-weight: 1000;
  letter-spacing: -0.05em;
  line-height: 0.93;
}
.legal h1 { font-weight: 900; letter-spacing: -0.045em; font-size: clamp(2rem, 8.6vw, 3.6rem); overflow-wrap: break-word; hyphens: auto; }

/* Kleinere Texte mit mehr Gewicht */
.btn { font-weight: 800; }
.mobile-nav li a { font-weight: 700; }
.nav a { font-weight: 600; }
.logo-word { font-weight: 900; letter-spacing: -0.035em; }
.facts strong { font-weight: 900; }
.core-line { font-weight: 900 !important; letter-spacing: -0.045em; }
.service-group > h3 { font-weight: 900; }
.faq summary, .news-title { font-weight: 800; }
.footer-claim { font-weight: 900; letter-spacing: -0.04em; }
.contact-ways a, .contact-ways .value { font-weight: 800; }

@media (max-width: 899px) {
  .hero h1, .hx h1 { letter-spacing: -0.045em; }
}
@media (max-width: 719px) {
  :root { --hero-title-size: clamp(3.2rem, 18.6vw, 5.4rem); }
}

/* Kopfzeile: schwerere Schrift braucht etwas weniger Abstand, damit alles in die Zeile passt */
@media (min-width: 1100px) { .nav ul { gap: 1rem; } .nav a { font-size: 0.95rem; } }
.header-actions .btn { font-weight: 700; }

/* Schmale Handys: Spalten dürfen schrumpfen, Reiter etwas kleiner */
.hx-grid > * { min-width: 0; }
@media (max-width: 380px) { .hx-tabs button { font-size: 0.8rem; } }

/* Claim im Einstieg animiert (assets/js/hero-claim.js): Einlauf Buchstabe für Buchstabe,
   danach heben sich Buchstaben nahe der Maus, wachsen leicht, leuchten und tauschen Weiß ↔ Mint. */
.hx h1.hc-ready { transform: perspective(1000px) rotateX(calc(var(--ty, 0) * -5deg)) rotateY(calc(var(--tx, 0) * 7deg)); transform-origin: 30% 50%; }
.hc-w { display: inline-block; white-space: nowrap; }
.hx h1.hc-ready { letter-spacing: -0.035em; } /* einzeln gesetzte Buchstaben dürfen sich nicht überlappen, sonst entstehen feine Nähte */
.hc-c { display: inline-block; transform-origin: 50% 85%;
  transform: translateY(calc(var(--f, 0) * -0.1em)) scale(calc(1 + var(--f, 0) * 0.12));
  text-shadow: 0 0 calc(var(--f, 0) * 30px) rgba(46, 230, 176, calc(var(--f, 0) * 0.6)); }
.hx h1 .hc-c { color: color-mix(in srgb, var(--accent) calc(var(--f, 0) * 100%), var(--white)); }
.hx h1 .accent .hc-c { color: color-mix(in srgb, var(--white) calc(var(--f, 0) * 100%), var(--accent));
  text-shadow: 0 0 calc(var(--f, 0) * 30px) rgba(255, 255, 255, calc(var(--f, 0) * 0.55)); }
.hc-in .hc-c { animation: hc-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--i) * 32ms + 120ms); }
@keyframes hc-up {
  from { translate: 0 0.6em; opacity: 0; filter: blur(8px); }
  60% { filter: blur(0); }
  to { translate: 0 0; opacity: 1; filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hx h1.hc-ready { transform: none; }
  .hc-c { transform: none; text-shadow: none; animation: none !important; }
}