/* ==========================================================================
   PicsPerfect – Unterseiten: Seitenkopf, Rechtstexte, Anfrageformular
   Nutzt die Tokens aus main.css. Quelle: v2/css/pages.css (wird ins Theme kopiert).
   ========================================================================== */

/* Seitenkopf --------------------------------------------------------------- */
.page-hero {
  position: relative;
}

/* Blaues Licht wie im Startbereich, läuft innerhalb des Seitenkopfs weich aus */
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 90% at 85% 15%, rgba(37, 119, 168, 0.3), transparent 70%);
  pointer-events: none;
}

.page-hero__inner {
  position: relative;
  max-width: var(--max);
  margin-inline: auto;
  padding: clamp(2rem, 6vw, 4.5rem) var(--gutter) clamp(2rem, 5vw, 3.5rem);
}

.page-hero__title {
  /* lange Wörter wie „Geschäftsbedingungen“ am Handy deutsch trennen statt überlaufen */
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
  max-width: 18ch;
  font-size: clamp(2.4rem, 1.4rem + 4vw, 4.4rem);
  font-weight: 750;
  letter-spacing: -0.03em;
}

.page-hero__lead {
  max-width: 40rem;
  margin-top: 1.25rem;
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
  color: var(--c-muted);
}

.page-hero__lead p + p {
  margin-top: 0.75em;
}

.page-hero .button {
  margin-top: 2rem;
}

/* Inhaltsseiten: Titel bündig mit der Textspalte */
.page-hero--narrow .page-hero__inner {
  max-width: calc(46rem + 2 * var(--gutter));
}

.page-hero--narrow .page-hero__title {
  max-width: none;
  font-size: clamp(2.2rem, 1.4rem + 3vw, 3.6rem);
}

/* Rechtstexte und andere Inhaltsseiten ------------------------------------- */
.prose {
  max-width: calc(46rem + 2 * var(--gutter));
  margin-inline: auto;
  padding: 0 var(--gutter) var(--section-y);
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.prose > * + * {
  margin-top: 1em;
}

.prose h2 {
  margin-top: 2.5rem;
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem);
}

.prose h3 {
  margin-top: 2rem;
  font-size: 1.25rem;
}

.prose h2 + *,
.prose h3 + * {
  margin-top: 0.6rem;
}

.prose ul,
.prose ol {
  padding-left: 1.4rem;
}

.prose ul {
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

.prose li + li {
  margin-top: 0.4em;
}

.prose a {
  color: var(--c-accent-light);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
}

.prose a:hover {
  color: var(--c-head);
}

/* Lightbox der Bild- und Galerie-Blöcke („Bei Klick vergrößern“): WordPress setzt bei klassischen Themes Weiß als Inline-Style */
.wp-lightbox-overlay .scrim {
  background-color: #000 !important;
}

.wp-lightbox-overlay button {
  fill: #fff !important;
}