/* Bakin Immobilien – Typografie */

h1, h2, h3, h4,
.font-display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  color: var(--color-ink);
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}

h1, .h1 { font-size: var(--text-hero); font-weight: 500; }
h2, .h2 { font-size: var(--text-3xl); }
h3, .h3 { font-size: var(--text-2xl); }
h4, .h4 { font-size: var(--text-xl); font-weight: 600; }

p, li, .font-body {
  font-family: var(--font-body);
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-ink-soft);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-terracotta-dark);
}

.eyebrow::before {
  content: '';
  width: 1.5rem;
  height: 2px;
  background: currentColor;
  border-radius: var(--radius-full);
}

.lede {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-soft);
  max-width: 62ch;
}

a {
  color: var(--color-forest);
  text-decoration: none;
}

.text-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-weight: 600;
  color: var(--color-forest);
}

.text-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0.3);
  transform-origin: left;
  opacity: 0.4;
  transition: transform var(--duration-normal) var(--ease-out-expo), opacity var(--duration-normal) var(--ease-out-expo);
}

.text-link:hover::after,
.text-link:focus-visible::after {
  transform: scaleX(1);
  opacity: 1;
}

.text-stone { color: var(--color-stone); }
.text-forest { color: var(--color-forest); }
.text-terracotta { color: var(--color-terracotta-dark); }