/* ============================================================================
   hoeperundkleiboldt.de · Impressum und Datenschutzerklärung, 29.09.2026
   Laedt nach schriften.css und seite.css und nimmt von dort Bahn, Raster,
   Grundsatz und Fuss. Eigen sind nur der Kopf in Umschlagblau, kuerzer als
   der Startschirm, und der Textsatz: Abschnitte mit Haarlinie wie die
   Dossierzeilen, Ueberschrift in Space Grotesk, Text in Source Serif 4.
   ========================================================================== */

.r-kopf {
  background: #14248A;
  color: #FFFFFF;
  padding: clamp(32px, 5vh, 52px) 0 clamp(56px, 8vh, 88px);
}

.r-kopf-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  margin-bottom: clamp(48px, 8vh, 96px);
}

.r-kopf-top img {
  height: 28px;
  width: auto;
  opacity: 0.95;
}

.r-zurueck {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #BAC7FB;
  transition: color 0.15s ease;
}

.r-zurueck:hover {
  color: #FFFFFF;
}

.r-kopf h1 {
  font-size: clamp(40px, 6.4vw, 84px);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.045em;
  hyphens: manual;
}

.r-kopf h1 b {
  font-weight: 700;
}

.r-kopf .r-unter {
  font-size: clamp(17px, 1.8vw, 21px) !important;
  line-height: 1.4 !important;
  color: #B5C4F8;
  margin-top: 16px !important;
}

.r-text {
  padding: clamp(56px, 8vh, 96px) 0 clamp(72px, 10vh, 120px);
}

.r-text section {
  max-width: 68ch;
  padding: 32px 0;
  border-top: 1px solid #EAEAEE;
}

.r-text section:first-child {
  border-top: 0;
  padding-top: 0;
}

.r-text section:last-child {
  border-bottom: 1px solid #EAEAEE;
}

.r-text h2 {
  font-size: clamp(20px, 1.8vw, 23px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: #12162A;
  margin-bottom: 14px;
}

.r-text p,
.r-text li {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 17.5px;
  line-height: 1.58;
  color: #2D3039;
  hyphens: auto;
  overflow-wrap: break-word;
}

.r-text p + p,
.r-text p + ul,
.r-text ul + p {
  margin-top: 12px !important;
}

.r-text ul {
  list-style: disc;
  padding-left: 1.2em;
}

.r-text li + li {
  margin-top: 4px;
}

.r-text a {
  color: #1B2FA8;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.r-text a:hover {
  color: #0B1647;
}

@media (max-width: 860px) {
  .r-text section {
    padding: 24px 0;
  }
}