/* JAACON — Inhaltsseiten (Leistungen).
   Ergänzt main.css. Dieselbe Sprache wie die Startseite — dünne Versalien,
   Haarlinien, viel Schwarz —, aber ohne Scroll-Inszenierung: hier wird
   gelesen, nicht erlebt. */

.page {
  padding: calc(var(--header-h) + clamp(4.5rem, 13vh, 8rem)) 0
    clamp(4rem, 10vh, 7rem);
}

.page .container {
  max-width: 78ch;
}

/* --------------------------------------------------------------- Auftakt */

.page__eyebrow {
  margin: 0 0 1.4rem;
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}

.page h1 {
  margin: 0 0 clamp(1.6rem, 4vh, 2.4rem);
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: clamp(2rem, 5.2vw, 3.4rem);
  line-height: 1.12;
}

.page__lead {
  margin: 0;
  max-width: 62ch;
  color: var(--ink);
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  font-weight: 300;
  line-height: 1.62;
}

/* Das Leitmotiv der Startseite, hier als ruhiger Schlussstrich unter dem
   Auftakt: eine Linie, die aus dem Nichts kommt und wieder verschwindet. */
.page__rule {
  height: 1px;
  margin: clamp(3rem, 8vh, 5rem) 0 0;
  border: 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--line-strong) 22%,
    var(--line-strong) 78%,
    transparent
  );
}

/* -------------------------------------------------------------- Struktur */

.page section {
  margin-top: clamp(3.4rem, 9vh, 5.5rem);
}

.page h2 {
  margin: 0 0 1.6rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--line);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: clamp(0.95rem, 1.7vw, 1.12rem);
  color: var(--ink);
}

/* Direkt nach dem Auftakt steht schon die Verlaufslinie — die Haarlinie der
   ersten Ueberschrift ergaebe dort einen doppelten Strich. */
.page__rule + section h2 {
  border-top: 0;
  padding-top: 0;
}

.page h3 {
  margin: 2.2rem 0 0.55rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  font-size: 1rem;
  color: var(--ink);
}

.page p,
.page li {
  color: var(--ink-dim);
  font-size: 0.99rem;
  line-height: 1.78;
}

.page p {
  margin: 0 0 1.1rem;
  max-width: 68ch;
}

.page ul {
  margin: 0 0 1.1rem;
  padding-left: 1.15rem;
}

.page li {
  margin-bottom: 0.45rem;
}

.page a {
  color: var(--ink);
  text-underline-offset: 4px;
}

.page strong {
  color: var(--ink);
  font-weight: 400;
}

/* ------------------------------------------------------ Leistungsblöcke */

/* Zwei Spalten, getrennt nur durch Haarlinien — kein Kastenraster, das
   würde gegen die Ruhe der Startseite arbeiten. */
.offer {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  margin-top: 0.5rem;
}

.offer__item {
  padding: 1.7rem 0;
  border-top: 1px solid var(--line);
}

.offer__item:first-child {
  border-top: 0;
  padding-top: 0.4rem;
}

.offer__item h3 {
  margin: 0 0 0.5rem;
}

.offer__item p {
  margin: 0;
}

@media (min-width: 800px) {
  .offer {
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(2rem, 4vw, 3.4rem);
  }

  .offer__item:nth-child(2) {
    border-top: 0;
    padding-top: 0.4rem;
  }
}

/* ------------------------------------------------------------- Ablauf */

.steps {
  margin-top: 0.6rem;
  list-style: none;
  padding: 0;
}

.steps li {
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  gap: 0 1.2rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

.steps li:first-child {
  border-top: 0;
  padding-top: 0.3rem;
}

.steps b {
  font-weight: 200;
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.steps span {
  display: block;
}

.steps strong {
  display: block;
  margin-bottom: 0.35rem;
  letter-spacing: 0.05em;
}

/* ---------------------------------------------------------------- Fragen */

.faq h3 {
  margin-top: 2rem;
}

.faq h3:first-of-type {
  margin-top: 0.6rem;
}

/* ------------------------------------------------------------- Abschluss */

.page-cta {
  margin-top: clamp(4rem, 10vh, 6.5rem);
  padding-top: clamp(2.6rem, 6vh, 3.6rem);
  border-top: 1px solid var(--line);
  text-align: center;
}

.page-cta h2 {
  border-top: 0;
  padding-top: 0;
  margin-bottom: 1rem;
  font-size: clamp(1.3rem, 3.2vw, 2rem);
  font-weight: 200;
  letter-spacing: 0.06em;
}

.page-cta p {
  margin: 0 auto 2.2rem;
  max-width: 46ch;
}

/* Der Button leuchtet hier dauerhaft — es gibt keinen Scroll-Fortschritt,
   aus dem sich ein Aufblenden ableiten liesse. */
.page-cta .btn {
  box-shadow: 0 0 34px -6px var(--glow-soft);
}

.page__back {
  display: inline-block;
  margin-top: clamp(3rem, 7vh, 4rem);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}

.page__back:hover,
.page__back:focus-visible {
  color: var(--ink);
}

/* --------------------------------------------------------- Feste Kopfzeile */

/* Auf der Startseite schwebt die Kopfzeile ueber einem Video — dort genuegt
   der weiche Verlauf. Auf einer Textseite laeuft dagegen Fliesstext darunter
   hindurch, und die Wortmarke steht dann mitten in der Zeile. Deshalb bekommt
   die Kopfzeile hier einen eigenen, deckenden Grund. */
body:has(.page) .site-header {
  background: rgba(0, 0, 0, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

/* Ohne :has() — aeltere Browser — bleibt der Verlauf; dann sorgt wenigstens
   ein kraeftigerer Farbverlauf fuer Abstand. */
@supports not selector(:has(*)) {
  .site-header {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.96) 0,
      rgba(0, 0, 0, 0.88) 70%,
      rgba(0, 0, 0, 0) 100%
    );
  }
}