/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 05 2026 | 07:23:55 */
/* =========================================================
   HEIMATFORSCHERNETZ BURGENLANDKREIS – ZUSATZ-CSS
   Aufbau:
    1. Grundwerte (Farben, Grafiken aus dem Signet)
    2. Allgemein
    3. Unterseiten: Kopfbereich und Einleitung
    4. Einzelseiten
    5. Bildergruppen-Seiten
    6. Kacheln (Fotoportal, Aktuelles, Termine)
    7. Blöcke: Bild + Text, Text, Kontakt, Team
    8. CI-Elemente: Dachlinie über Zwischenüberschriften
    9. Startseite
   10. Fotoportal
   11. Hamburgermenü
   12. Footer
   13. Inhaltsspalte auf großen Bildschirmen (13a: Ausnahme Bildansicht)
   14. Lesemodus („Was wir machen“, „Wer wir sind“)
   15. Kontaktseite und Absenden-Knopf
   ========================================================= */


/* =========================================
   1. GRUNDWERTE
   Die Grafiken stehen nur hier; überall sonst wird auf sie verwiesen.
   ========================================= */

:root {
  /* Bögen, zart in Terrakotta – für rosa Flächen (Kopfbereiche, Hover) */
  --hfn-boegen-zart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400' preserveAspectRatio='xMaxYMax slice'%3E%3Cg fill='none' stroke='%23CB553C' stroke-opacity='0.12' stroke-width='56'%3E%3Ccircle cx='820' cy='760' r='560'/%3E%3Ccircle cx='1260' cy='820' r='470'/%3E%3C/g%3E%3C/svg%3E");

  /* Bögen, halbtransparent weiß – für das rote Mitmachen-Band */
  --hfn-boegen-band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400' preserveAspectRatio='xMaxYMax slice'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='0.22' stroke-width='56'%3E%3Ccircle cx='820' cy='760' r='560'/%3E%3Ccircle cx='1260' cy='820' r='470'/%3E%3C/g%3E%3C/svg%3E");

  /* Bögen, kräftig – für die Aussage-Felder */
  --hfn-boegen-rot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 400'%3E%3Cg fill='none' stroke='%23CB553C' stroke-width='44'%3E%3Ccircle cx='200' cy='600' r='420'/%3E%3Ccircle cx='520' cy='560' r='300'/%3E%3C/g%3E%3C/svg%3E");
  --hfn-boegen-weiss: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 400'%3E%3Cg fill='none' stroke='%23fff' stroke-width='44'%3E%3Ccircle cx='200' cy='600' r='420'/%3E%3Ccircle cx='520' cy='560' r='300'/%3E%3C/g%3E%3C/svg%3E");

  /* Dachlinie aus dem Signet */
  --hfn-dach-rot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -8 432 76'%3E%3Cpath d='M0 58L145 5V58L290 5V58L432 5' fill='none' stroke='%23CB553C' stroke-width='22'/%3E%3C/svg%3E");
  --hfn-dach-weiss: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -8 432 76'%3E%3Cpath d='M0 58L145 5V58L290 5V58L432 5' fill='none' stroke='%23fff' stroke-width='22'/%3E%3C/svg%3E");

  /* Kreuzungspunkt der Bögen – Hover in den Bildboxen der Startseite */
  --hfn-boegen-kreuzung: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='120 100 312 220'%3E%3Cg fill='none' stroke='%23CB553C' stroke-opacity='0.14' stroke-width='26'%3E%3Ccircle cx='85' cy='364' r='239'/%3E%3Ccircle cx='360' cy='417' r='227'/%3E%3C/g%3E%3C/svg%3E");

  /* Dachlinie als fortlaufende Reihe – Link im Mitmachen-Band */
  --hfn-dach-reihe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -8 145 76'%3E%3Cpath d='M0 31.5L72.5 5V58L145 31.5' fill='none' stroke='%23fff' stroke-width='12'/%3E%3C/svg%3E");
  --hfn-dach-reihe-rot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -8 145 76'%3E%3Cpath d='M0 31.5L72.5 5V58L145 31.5' fill='none' stroke='%23CB553C' stroke-width='12'/%3E%3C/svg%3E");
}


/* =========================================
   2. ALLGEMEIN
   ========================================= */

.page__content__introtext p:empty { display: none; }
.page { margin-top: 0 !important; padding-top: 0 !important; }
.page__headline { margin-top: 0 !important; }
.page__headline h1 { margin-left: -0.04em !important; }

/* Seitentitel einheitlich */
.page__headline h1,
.page-single__header__headline h1,
.csp-image-group-archive__headline h1 {
  font-size: clamp(34px, 4vw, 40px) !important;
  line-height: 1.1 !important;
}


/* =========================================
   3. UNTERSEITEN: KOPFBEREICH UND EINLEITUNG
   ========================================= */

/* Kopfbereich als rosa Band mit zarten Bögen
   (Seiten mit Topline, Bildergruppen, Einzelseiten ohne sichtbares Titelbild) */
.page__headline,
.csp-image-group-archive__headline,
.page-single__header__headline.no-image,
body.page .page-single__header__headline {
  background-color: #FBEFEC !important;
  background-image: var(--hfn-boegen-zart) !important;
  background-repeat: no-repeat !important;
  background-position: right bottom !important;
  background-size: 100% 100% !important;
  padding-top: 28px !important;
  padding-bottom: 32px !important;
}
@media screen and (min-width: 800px) {
  .page__headline,
  .csp-image-group-archive__headline,
  .page-single__header__headline.no-image,
  body.page .page-single__header__headline {
    padding-top: 36px !important;
    padding-bottom: 40px !important;
  }
}

/* Einleitung (z. B. Fotoportal) */
.page__content__introtext {
  padding-top: 28px !important;
  padding-bottom: 24px !important;
}
.page__content__introtext p {
  margin: 0 0 0.5em !important;
  padding: 0 !important;
  font-size: 19px !important;
}
.page__content__introtext p:last-child { margin-bottom: 0 !important; }

/* Erster Absatz der Einleitung als Vorspann */
.page__content__introtext > p:not(:empty):first-child,
.page__content__introtext > p:empty:first-child + p,
.csp-image-group-archive__content__introtext > p:not(:empty):first-child {
  font-size: 21px !important;
  line-height: 1.45 !important;
}

@media screen and (max-width: 799px) {
  .page__headline,
  .page__content__introtext {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}
@media screen and (min-width: 800px) {
  .page__headline,
  .page__content__introtext {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .page__content__introtext p {
    font-size: 20px !important;
    max-width: 42em;
  }
  .page__content__introtext > p:not(:empty):first-child,
  .page__content__introtext > p:empty:first-child + p,
  .csp-image-group-archive__content__introtext > p:not(:empty):first-child {
    font-size: 23px !important;
  }
}

/* Einleitungen mit fest eingetragenem Absatz-Einzug (z. B. Fotoportal) ausgleichen */
.page__content__introtext:has(> p[style*="padding"]) {
  padding-left: 0 !important;
}
@media screen and (max-width: 799px) {
  .page__content__introtext:has(> p[style*="padding"]) {
    margin-left: -8px;
  }
}


/* =========================================
   4. EINZELSEITEN (z. B. „Was wir machen", „Wer wir sind", Veranstaltungen)
   ========================================= */

.page-single__header__headline { padding-left: 16px !important; padding-right: 16px !important; }
.page-single__content__introtext {
  padding: 24px 16px !important;
  font-size: 19px !important;
  line-height: 1.5 !important;
}

/* Seiten: Beitragsbild oben ausblenden (bleibt für die Menükacheln erhalten) */
body.page .page-single__header__thumbnail {
  display: none !important;
}

/* Beiträge und Veranstaltungen: Titelbild vollständig, auf rosa Band mit Bögen */
.page-single__header__thumbnail {
  display: flex !important;
  justify-content: center;
  align-items: center;
  background-color: #FBEFEC;
  background-image: var(--hfn-boegen-zart);
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 100% 100%;
  padding: 24px 16px !important;
  height: auto !important;
  min-height: 0 !important;
}
.page-single__header__thumbnail img {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 55vh !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
}

@media screen and (min-width: 800px) {
  .page-single__header__headline { padding-left: 24px !important; padding-right: 24px !important; }
  .page-single__content__introtext {
    font-size: 20px !important;
    padding: 24px max(24px, calc(100% - 42em)) 24px 24px !important;
  }
  .page-single__header__thumbnail { padding: 32px 24px !important; }
}

/* Veranstaltungen: Flyer größer, Beschreibungstext */
.single-veranstaltung .page-single__header__thumbnail img { max-height: 85vh !important; }
.single-veranstaltung .page-single__content {
  padding: 24px 16px 32px 16px !important;
}
.single-veranstaltung .page-single__content p {
  font-size: 19px !important;
  line-height: 1.5 !important;
  margin: 0 0 0.8em 0 !important;
  padding: 0 !important;
  max-width: 42em;
}
.single-veranstaltung .page-single__content p:empty { display: none; }
.single-veranstaltung .page-single__content p:last-child { margin-bottom: 0 !important; }
@media screen and (min-width: 800px) {
  .single-veranstaltung .page-single__content { padding: 24px 24px 40px 24px !important; }
  .single-veranstaltung .page-single__content p { font-size: 20px !important; }
}


/* =========================================
   5. BILDERGRUPPEN-SEITEN (z. B. Brikettfabrik Profen)
   ========================================= */

.csp-image-group-archive__headline { margin-top: 0 !important; }
.csp-image-group-archive__content__introtext {
  padding-top: 28px !important;
  padding-bottom: 24px !important;
}
.csp-image-group-archive__content__introtext p {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 19px !important;
  line-height: 1.5 !important;
  white-space: pre-line;
}
.csp-image-group-archive__content__introtext p:empty { display: none; }

@media screen and (max-width: 799px) {
  .csp-image-group-archive__headline,
  .csp-image-group-archive__content__introtext {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}
@media screen and (min-width: 800px) {
  .csp-image-group-archive__headline,
  .csp-image-group-archive__content__introtext {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .csp-image-group-archive__content__introtext p {
    font-size: 20px !important;
    max-width: 42em;
  }
}
.csp-image-group-archive__bottom-space { height: 0 !important; }


/* =========================================
   6. KACHELN (Fotoportal, Aktuelles, Termine)
   ========================================= */

/* Aufbau: weniger Leerraum über dem Pfeil, Pfeile auf einer Linie */
.card-csp-image-group {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  min-height: 0 !important;
}
.card-csp-image-group__details {
  flex: 1 1 auto;
  padding-bottom: 0 !important;
}
.card-csp-image-group__link {
  position: static !important;
  margin-top: 16px !important;
  padding-top: 0 !important;
}

/* Titel und Anzahl */
.card-csp-image-group__details__headline {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px;
}
.card-csp-image-group__details__headline h3 {
  font-size: 24px !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  hyphens: manual !important;
}
.card-csp-image-group__count {
  font-family: "Freight Sans Book", Arial, sans-serif !important;
  font-size: 17px !important;
  color: #000 !important;
}
.card-article-event__details__headline,
.card-article-event__details__headline * {
  hyphens: manual !important;
}

/* Einfärbung beim Überfahren */
.card-csp-image-group:hover,
.card-csp-image-group:hover * {
  background-color: #FBEFEC !important;
}
.block-post-grid__bottom-space { height: 0 !important; }

/* Zwischenüberschriften (z. B. „Kommende Veranstaltungen") */
.block-post-grid h2 {
  font-size: 30px !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  padding: 24px 16px 16px 16px !important;
}
@media screen and (min-width: 800px) {
  .block-post-grid h2 {
    font-size: 38px !important;
    padding: 24px 24px 16px 24px !important;
  }
}

/* Termine: Etikett auf den Kacheln ausblenden */
.page-id-1700 .card-article-event__details__headline > p:first-of-type {
  display: none !important;
}


/* =========================================
   7. BLÖCKE
   ========================================= */

/* --- Bild + Text --- */
.block-image__description { padding: 16px 16px 24px 16px !important; }
.block-image__description h2 {
  font-size: 26px !important;
  line-height: 1.2 !important;
  margin: 0 0 0.4em 0 !important;
  padding: 0 !important;
}
.block-image__description p {
  font-size: 19px !important;
  line-height: 1.5 !important;
  margin: 0 0 0.5em 0 !important;
  padding: 0 !important;
  max-width: 42em;
}
.block-image__description p:last-child { margin-bottom: 0 !important; }
.block-image__description p:empty { display: none; }
.block-image__description a {
  font-size: inherit !important;
  font-family: "Freight Sans Bold", Arial, sans-serif !important;
  color: #CB553C !important;
  text-decoration: none !important;
  border-bottom: none !important;
  white-space: nowrap;
}
.block-image__description a::before { content: "→ "; }
@media screen and (max-width: 799px) {
  .block-image__description a { white-space: normal; }   /* lange Links auf dem Handy umbrechen */
}
.block-image__image-half-left-text-right,
.block-image__image-half-right-text-left,
.block-image__image-full-text-bottom { padding-bottom: 0 !important; }

@media screen and (min-width: 800px) {
  .block-image__description { padding: 20px 24px 24px 24px !important; }
  .block-image__description h2 { font-size: 30px !important; }
  .block-image__description p { font-size: 20px !important; }
}

/* --- Text --- */
.block-text { padding: 16px 16px 24px 16px !important; }
.block-text .lazyblock-inner-blocks { padding: 0 !important; }
.block-text .lazyblock-inner-blocks p {
  font-size: 19px !important;
  line-height: 1.5 !important;
  margin: 0 0 0.5em 0 !important;
  padding: 0 !important;
  max-width: 42em;
}
.block-text .lazyblock-inner-blocks > *:last-child { margin-bottom: 0 !important; }
.block-text .lazyblock-inner-blocks p:empty { display: none; }
@media screen and (min-width: 800px) {
  .block-text { padding: 20px 24px 24px 24px !important; }
  .block-text .lazyblock-inner-blocks p { font-size: 20px !important; }
}

/* --- Kontakt (z. B. Bergbaumuseum) --- */
.block-business-card__bottom-space { height: 0 !important; }
.block-business-card__card { padding-bottom: 24px !important; }

/* --- Team (Ansprechpartner) --- */
.block-team__bottom-space { height: 0 !important; }
.block-team > h2 {
  font-size: 30px !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  padding: 24px 16px 16px 16px !important;
}
.block-team__grid__member { padding: 16px !important; }

.block-team__grid__member .has-image {
  display: grid !important;
  grid-template-columns: 130px 1fr !important;
  column-gap: 24px !important;
  row-gap: 12px !important;
  align-items: start !important;
}
.block-team__grid__member .has-image .block-team__grid__member__image {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  padding: 0 !important;
}
.block-team__grid__member .has-image .block-team__grid__member__image img {
  width: 100% !important;
  height: auto !important;
}
.block-team__grid__member .has-image .block-team__grid__member__name-position-mobile,
.block-team__grid__member .has-image .block-team__grid__member__name-position-desktop,
.block-team__grid__member .has-image .block-team__grid__member__details {
  grid-column: 2 !important;
  padding: 0 !important;
}
.block-team__grid__member .has-image .block-team__grid__member__name-position-mobile,
.block-team__grid__member .has-image .block-team__grid__member__name-position-desktop {
  grid-row: 1 !important;
}
.block-team__grid__member .has-image .block-team__grid__member__details {
  grid-row: 2 !important;
}
.block-team__grid__member__name-position-mobile > *:first-child,
.block-team__grid__member__name-position-desktop > *:first-child {
  font-size: 24px !important;
  line-height: 1.25 !important;
  margin-bottom: 4px !important;
}
.block-team__grid__member__name-position-mobile > *:not(:first-child),
.block-team__grid__member__name-position-desktop > *:not(:first-child) {
  font-size: 20px !important;
  line-height: 1.5 !important;
}
.block-team__grid__member__details > * {
  margin-left: 0 !important;
  padding-left: 0 !important;
}
.block-team__grid__member__details,
.block-team__grid__member__details * {
  font-size: 19px !important;
  line-height: 1.6 !important;
}

@media screen and (min-width: 800px) {
  .block-team > h2 {
    font-size: 38px !important;
    padding: 24px 24px 16px 24px !important;
  }
  .block-team__grid__member { padding: 20px 24px !important; }
  .block-team__grid__member .has-image { grid-template-columns: 180px 1fr !important; }
}


/* =========================================
   8. CI-ELEMENTE: DACHLINIE ÜBER ZWISCHENÜBERSCHRIFTEN
   ========================================= */

.block-image__description h2::before,
.block-post-grid h2::before,
.block-team > h2::before {
  content: "";
  display: block;
  width: 48px;
  height: 9px;
  margin-bottom: 12px;
  background: var(--hfn-dach-rot) no-repeat left bottom / contain;
}


/* =========================================
   9. STARTSEITE (Seite 2504, Startseiten-Vorlage des Themes)
   ========================================= */

/* --- Rahmen der Startseite --- */
.home .front-page {
  position: relative;
  z-index: 0;                   /* eigene Ebene, damit der Titelbereich klickbar bleibt */
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.home .front-page__images { display: none !important; }   /* leerer Bildbereich der Vorlage */

/* --- Titelbereich: Foto mit rotem Titelschild ---
   --rand   Seitenrand
   --schild maximale Breite des Schilds */
body.home .front-page .front-page__headline-introtext {
  --rand: 16px;
  --schild: 680px;
  position: relative;
  top: 0 !important;            /* Vorlage verschiebt sonst um 80px */
  bottom: auto !important;
  z-index: 1 !important;        /* Vorlage legt den Bereich sonst nach hinten */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0 !important;
  height: auto !important;
  min-height: clamp(380px, 68vh, 640px) !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 32px var(--rand) 0 !important;
  background: url("https://heimatforschernetz.de/wp-content/uploads/2026/09/2016-08-05_45-scaled.webp") center 20% / cover no-repeat !important;
}
@media screen and (min-width: 800px) {
  body.home .front-page .front-page__headline-introtext { --rand: 24px; }
}

/* Schild oben: weiße Dachlinie und Dachzeile */
.home .front-page__headline-introtext::before {
  content: "Gemeinsam das industriekulturelle Erbe digitalisieren und erschließen";
  align-self: flex-start;
  box-sizing: border-box;
  width: min(var(--schild), 100%);
  margin: 0 !important;
  padding: 58px 28px 6px 28px !important;
  border: 0 !important;
  background: var(--hfn-dach-weiss) 28px 28px / 64px 11px no-repeat, #CB553C !important;
  color: #fff !important;
  font-family: "Freight Sans Bold", Arial, sans-serif;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.3;
}

/* Schild unten: Titel, ragt 130px über die Bildkante */
.home .front-page__headline-introtext h1 {
  display: block !important;
  position: static !important;
  box-sizing: border-box;
  width: min(var(--schild), 100%);
  height: auto !important;
  margin: 0 0 -130px 0 !important;
  padding: 4px 28px 32px 28px !important;
  background: #CB553C;
  color: #fff !important;
  text-shadow: none !important;
  font-size: clamp(34px, 4.4vw, 54px) !important;
  line-height: 1.05 !important;
}
/* Ersatztext, falls das Titelfeld der Vorlage leer ist */
.home .front-page__headline-introtext h1:empty::before {
  content: "Bürgerwissenschaft im Burgenlandkreis";
}

/* Bildnachweis-©: leerer Einleitungs-Absatz der Vorlage,
   Text gleitet beim Überfahren auf (nur solange das Einleitungsfeld leer ist) */
.home .front-page__headline-introtext > p:empty {
  display: flex !important;
  align-items: center;
  position: absolute !important;
  right: 8px;
  bottom: 8px;
  z-index: 50;
  height: 26px;
  margin: 0 !important;
  padding: 0 !important;
  background: rgba(255,255,255,0.8);
  cursor: pointer;
}
.home .front-page__headline-introtext > p:empty::before {
  content: "©";
  flex: none;
  width: 26px;
  height: 26px;
  color: #000;
  font: 16px/26px "Freight Sans Book", Arial, sans-serif;
  text-align: center;
}
.home .front-page__headline-introtext > p:empty::after {
  content: "Heimatverein Zeitz-Weißenfelser-Braunkohlenrevier e.V. / Bergbaumuseum Deuben";
  display: block;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  color: #000;
  font: 15px/26px "Freight Sans Book", Arial, sans-serif;
  transition: max-width 0.4s ease, padding 0.4s ease;
}
.home .front-page__headline-introtext > p:empty:hover::after {
  max-width: 900px;
  padding-right: 10px;
}

/* --- Inhaltsbereich --- */
.home .front-page__custom-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.home .front-page__custom-content > p:empty { display: none !important; }

/* Vorspann mit Trennlinie; oben Platz für den Überhang des Schilds (130 + 12) */
.home .front-page__custom-content > p:first-child {
  font-size: 20px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  padding: 142px 16px 32px 16px !important;
  border-bottom: 1px solid #000;
}
@media screen and (min-width: 800px) {
  .home .front-page__custom-content > p:first-child {
    font-size: 23px !important;
    padding: 142px max(24px, calc(100% - 48em)) 32px 24px !important;
  }
}

/* --- Bildboxen („Was wir machen“, „Wer wir sind“, „Termine“ usw.) --- */

/* Text neben dem Bild vertikal mittig */
.page-id-2504 .block-image__image-half-left-text-right,
.page-id-2504 .block-image__image-half-right-text-left {
  align-items: center !important;
}

/* Gleiche Bildformate */
.page-id-2504 .block-image__image img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center;
}

/* Link in eigener Zeile unter dem Text */
.page-id-2504 .block-image__description a {
  display: table;
  margin-top: 0.6em;
}

/* Ganze Box klickbar; das © bleibt darüber erreichbar */
.page-id-2504 .block-image { position: relative; }
.page-id-2504 .block-image__description a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.page-id-2504 .block-image .image-copyright { z-index: 2 !important; }
.page-id-2504 .block-image:hover { cursor: pointer; }

/* Link-Animation beim Überfahren: Unterstrich und wandernder Pfeil */
.page-id-2504 .block-image__description a {
  background-image: linear-gradient(#CB553C, #CB553C);
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 2px;
  transition: background-size 0.35s ease;
}
.page-id-2504 .block-image__description a::before {
  content: "→";
  display: inline-block;
  margin-right: 0.5em;
  transition: transform 0.35s ease;
}
.page-id-2504 .block-image:hover .block-image__description a {
  color: #CB553C !important;
  background-size: 100% 2px;
}
.page-id-2504 .block-image:hover .block-image__description a::before {
  transform: translateX(4px);
}

/* Beim Überfahren: ganze Kachel rosa */
.page-id-2504 .block-image,
.page-id-2504 .block-image > div,
.page-id-2504 .block-image__description {
  transition: background-color 0.3s ease;
}
.page-id-2504 .block-image:hover,
.page-id-2504 .block-image:hover > div,
.page-id-2504 .block-image:hover .block-image__image,
.page-id-2504 .block-image:hover .block-image__description {
  background-color: #FBEFEC !important;
}

/* Beim Überfahren: Kreuzungspunkt der Bögen im Textbereich, feste Größe */
.page-id-2504 .block-image:hover .block-image__description {
  background-image: var(--hfn-boegen-kreuzung) !important;
  background-repeat: no-repeat !important;
  background-position: right bottom !important;
  background-size: 390px 275px !important;
}
@media screen and (max-width: 799px) {
  .page-id-2504 .block-image:hover .block-image__description {
    background-size: 280px 197px !important;
  }
}

/* Beim Überfahren: leichter Bildzoom */
.page-id-2504 .block-image__image { overflow: hidden; }
.page-id-2504 .block-image__image img { transition: transform 0.5s ease; }
.page-id-2504 .block-image:hover .block-image__image img { transform: scale(1.04); }

/* Bewegung reduzieren, wenn im System so eingestellt */
@media (prefers-reduced-motion: reduce) {
  .page-id-2504 .block-image__description a,
  .page-id-2504 .block-image__description a::before,
  .page-id-2504 .block-image__image img { transition: none; }
  .page-id-2504 .block-image:hover .block-image__image img { transform: none; }
}

/* --- „Neu im Fotoportal“: Hinweis und Kacheln als ein Block, ohne Hover-Effekt --- */
.page-id-2504 .block-image__image-full-text-bottom {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.page-id-2504 .block-image__image-full-text-bottom .block-image__description {
  padding-top: 20px !important;
  padding-bottom: 32px !important;
}
.page-id-2504 .wp-block-lazyblock-image:has(+ .wp-block-lazyblock-post-grid),
.page-id-2504 .wp-block-lazyblock-image:has(+ .wp-block-lazyblock-post-grid) * {
  border-bottom: none !important;
}
.page-id-2504 .wp-block-lazyblock-post-grid,
.page-id-2504 .block-post-grid {
  border-top: none !important;
}
.page-id-2504 .block-image:has(.block-image__image-full-text-bottom):hover,
.page-id-2504 .block-image:has(.block-image__image-full-text-bottom):hover > div,
.page-id-2504 .block-image:has(.block-image__image-full-text-bottom):hover .block-image__description {
  background-color: transparent !important;
  background-image: none !important;
}

/* --- Bild im Fokus: Block „Bild + Text“ mit CSS-Klasse „fokus“ ---
   Ganze Kachel dauerhaft rosa, ohne Bögen und Bildzoom; Link animiert wie überall */
.page-id-2504 .fokus .block-image,
.page-id-2504 .fokus .block-image > div,
.page-id-2504 .fokus .block-image__image,
.page-id-2504 .fokus .block-image__description,
.page-id-2504 .fokus .block-image:hover,
.page-id-2504 .fokus .block-image:hover > div,
.page-id-2504 .fokus .block-image:hover .block-image__image,
.page-id-2504 .fokus .block-image:hover .block-image__description {
  background-color: #FBEFEC !important;
  background-image: none !important;
}
.page-id-2504 .fokus .block-image__description h2::before {
  content: "Bild im Fokus";
  width: auto;
  height: auto;
  margin-bottom: 8px;
  padding-top: 21px;
  background: var(--hfn-dach-rot) no-repeat left top / 48px 9px;
  color: #CB553C;
  font-family: "Freight Sans Bold", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.page-id-2504 .fokus .block-image:hover .block-image__image img {
  transform: none !important;
}

/* --- Aussage-Feld: Absatz mit CSS-Klasse „aussage“ (weiß) oder „aussage aussage--rot“ --- */
.home .front-page__custom-content > p.aussage {
  margin: 0 !important;
  padding: 40px 16px 200px 16px !important;
  text-align: left !important;
  font-family: "Freight Sans Bold", Arial, sans-serif !important;
  font-size: clamp(30px, 4vw, 52px) !important;
  line-height: 1.15 !important;
  color: #CB553C !important;
  background-color: #fff !important;
  background-image: var(--hfn-boegen-rot) !important;
  background-repeat: no-repeat !important;
  background-position: right bottom !important;
  background-size: auto 180px !important;
}
.home .front-page__custom-content > p.aussage.aussage--rot {
  color: #fff !important;
  background-color: #CB553C !important;
  background-image: var(--hfn-boegen-weiss) !important;
}
@media screen and (min-width: 800px) {
  .home .front-page__custom-content > p.aussage {
    min-height: 340px;
    padding: 56px max(24px, 38%) 56px 24px !important;
    background-size: auto 90% !important;
  }
}

/* --- Abschlussband „Mitmachen“ --- */
.home .front-page__custom-content > h2,
.home .front-page__custom-content > p:not(:first-child) {
  background-color: #CB553C;
  color: #fff !important;
  margin: 0 !important;
  text-align: center;
}
.home .front-page__custom-content > h2 {
  font-size: 30px !important;
  line-height: 1.2 !important;
  padding: 40px 16px 0.4em 16px !important;
}
.home .front-page__custom-content > p:not(:first-child) {
  font-family: "Freight Sans Bold", Arial, sans-serif !important;
  font-size: clamp(22px, 2.4vw, 30px) !important;
  line-height: 1.3 !important;
  padding: 44px 16px !important;
  background-image: var(--hfn-boegen-band);
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 100% 100%;
}
.home .front-page__custom-content > h2 + p { padding-top: 0 !important; }
@media screen and (min-width: 800px) {
  .home .front-page__custom-content > h2 {
    font-size: 38px !important;
    padding: 56px max(24px, calc((100% - 40em) / 2)) 0.4em !important;
  }
  .home .front-page__custom-content > p:not(:first-child) {
    padding: 56px max(24px, calc((100% - 40em) / 2)) !important;
  }
  .home .front-page__custom-content > h2 + p { padding-top: 0 !important; }
}

/* Link im Band: ohne Unterstrich; beim Überfahren des Bands zeichnet sich die Dachlinie */
.home .front-page__custom-content > p:not(:first-child) a {
  position: relative;
  display: inline-block;
  color: #fff !important;
  font-family: "Freight Sans Bold", Arial, sans-serif !important;
  text-decoration: none !important;
  border-bottom: none !important;
}
.home .front-page__custom-content > p:not(:first-child) a::before { content: "→ "; }
.home .front-page__custom-content > p:not(:first-child) a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -14px;
  height: 13px;
  pointer-events: none;
  background: var(--hfn-dach-reihe) repeat-x 0 0 / 24px 13px;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.7s ease;
}
.home .front-page__custom-content > p:not(:first-child):hover a::after,
.home .front-page__custom-content > p:not(:first-child) a:focus-visible::after {
  clip-path: inset(0 0 0 0);
}
@media (prefers-reduced-motion: reduce) {
  .home .front-page__custom-content > p:not(:first-child) a::after { transition: none; }
}


/* =========================================
   10. FOTOPORTAL (Seite 1462): EINSTIEG WIE AUF DER STARTSEITE
   Reihenfolge: Foto mit Schild, Einleitung (Feld „Introtext“, max. 500 Zeichen),
   Bestände, „So wirken Sie mit“ mit den Absatz-Blöcken, Absatz mit Link.
   ========================================= */

/* --- Kopf: Foto ohne Verlauf, rotes Schild unten links --- */
.page-id-1462 .page__headline {
  position: relative;
  z-index: 1;
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  min-height: clamp(380px, 68vh, 640px);
  padding-top: 32px !important;
  padding-bottom: 0 !important;
  background: url("https://heimatforschernetz.de/wp-content/uploads/2026/05/DSC01972-scaled.webp") center 40% / cover no-repeat !important;
}
.page-id-1462 .page__headline > * {
  box-sizing: border-box;
  width: min(680px, 100%);
  margin: 0 !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
  background-color: #CB553C;
  color: #fff !important;
}
/* Dachzeile mit weißer Dachlinie */
.page-id-1462 .page__headline > :first-child:not(h1) {
  padding-top: 58px !important;
  padding-bottom: 6px !important;
  background: var(--hfn-dach-weiss) 28px 28px / 64px 11px no-repeat, #CB553C;
  font-family: "Freight Sans Bold", Arial, sans-serif;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.3;
}
/* Titel, ragt 64px über die Bildkante */
.page-id-1462 .page__headline h1 {
  margin: 0 0 -64px 0 !important;
  padding-top: 4px !important;
  padding-bottom: 32px !important;
  font-size: clamp(34px, 4.4vw, 54px) !important;
  line-height: 1.05 !important;
}
/* Ohne Dachzeile: Dachlinie über dem Titel */
.page-id-1462 .page__headline > h1:first-child {
  padding-top: 58px !important;
  background: var(--hfn-dach-weiss) 28px 28px / 64px 11px no-repeat, #CB553C;
}

/* --- Reihenfolge im Inhalt --- */
.page-id-1462 .page .page__content {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding-top: 76px;             /* Überhang des Schilds (64) + 12 */
}
.page-id-1462 .page__content__introtext {
  order: -1 !important;          /* Einleitung vor den Beständen */
  display: block !important;
  border-top: none !important;
  padding: 20px 16px 32px 16px !important;
}
.page-id-1462 .page__content > p {
  order: 3;                      /* Absatz-Blöcke nach den Beständen */
}
.page-id-1462 .page__content > p:empty {
  display: none !important;
}

/* --- Alle Absätze wie jeder andere Text: eine Spalte, gleiche Größe, gleiche Abstände --- */
body.page-id-1462 .page .page__content .page__content__introtext p,
body.page-id-1462 .page .page__content > p {
  box-sizing: content-box;
  max-width: 42em;
  margin: 0 0 0.5em 0 !important;
  font-size: 19px !important;
  line-height: 1.5 !important;
}
body.page-id-1462 .page .page__content .page__content__introtext p {
  padding: 0 !important;
}
body.page-id-1462 .page .page__content > p {
  padding: 0 16px !important;
}

/* „So wirken Sie mit“ über dem ersten Absatz-Block */
body.page-id-1462 .page .page__content > p:first-of-type {
  padding-top: 36px !important;
}
.page-id-1462 .page__content > p:first-of-type::before {
  content: "So wirken Sie mit";
  display: block;
  margin-bottom: 16px;
  padding-top: 21px;
  background: var(--hfn-dach-rot) no-repeat left top / 48px 9px;
  font-family: "Freight Sans Bold", Arial, sans-serif;
  font-size: 30px;
  line-height: 1.2;
  color: #000;
}

/* Letzter Textabsatz: Abstand zur Linie darunter */
body.page-id-1462 .page .page__content > p:not(:has(a)):has(+ p:has(a)),
body.page-id-1462 .page .page__content > p:not(:has(a)):last-child {
  margin-bottom: 0 !important;
  padding-bottom: 32px !important;
}

/* --- Absatz mit Link: eigene Zeile zwischen Linien --- */
body.page-id-1462 .page .page__content > p:has(a) {
  order: 4;
  max-width: none;
  margin: 0 !important;
  padding: 32px 16px !important;
  border-top: 1px solid #000;
}
.page-id-1462 .page__content > p a {
  position: relative;
  display: inline-block;
  color: #CB553C !important;
  font-family: "Freight Sans Bold", Arial, sans-serif !important;
  text-decoration: none !important;
  border-bottom: none !important;
}
.page-id-1462 .page__content > p a::before {
  content: "→ ";
}
/* Dachlinie zeichnet sich beim Überfahren des Absatzes */
.page-id-1462 .page__content > p a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12px;
  height: 11px;
  pointer-events: none;
  background: var(--hfn-dach-reihe-rot) repeat-x 0 0 / 20px 11px;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.7s ease;
}
.page-id-1462 .page__content > p:hover a::after,
.page-id-1462 .page__content > p a:focus-visible::after {
  clip-path: inset(0 0 0 0);
}
@media (prefers-reduced-motion: reduce) {
  .page-id-1462 .page__content > p a::after { transition: none; }
}

/* --- Am Rechner --- */
@media screen and (min-width: 800px) {
  .page-id-1462 .page__content__introtext {
    padding: 24px 24px 40px 24px !important;
  }
  body.page-id-1462 .page .page__content .page__content__introtext p,
  body.page-id-1462 .page .page__content > p {
    font-size: 20px !important;
  }
  body.page-id-1462 .page .page__content > p {
    padding: 0 24px !important;
  }
  body.page-id-1462 .page .page__content > p:first-of-type {
    padding-top: 40px !important;
  }
  .page-id-1462 .page__content > p:first-of-type::before {
    font-size: 38px;
  }
  body.page-id-1462 .page .page__content > p:not(:has(a)):has(+ p:has(a)),
  body.page-id-1462 .page .page__content > p:not(:has(a)):last-child {
    padding-bottom: 40px !important;
  }
  body.page-id-1462 .page .page__content > p:has(a) {
    padding: 32px 24px !important;
  }
}


/* =========================================
   11. HAMBURGERMENÜ
   ========================================= */

/* Automatische Seitenliste ausblenden */
[class*="header__right__navigation"] ul:has(> .page_item) {
  display: none !important;
}


/* =========================================
   12. FOOTER
   ========================================= */

.footer__logo, .footer__text, .footer__social-media, .footer__press,
.footer__newsletter, .footer__address, .footer__contact,
.footer__navigation-secondary, .footer__development {
  padding: 20px 24px !important;
}
.footer img { object-fit: contain; }

/* HFN-Logo ausblenden, steht bereits oben auf jeder Seite */
.footer__logo { display: none !important; }

/* Logo-Kästen: Logos nebeneinander auf einer Mittellinie */
.footer__press,
.footer__newsletter {
  display: flex !important;
  flex-wrap: wrap;
  align-self: stretch;
  align-items: center !important;
  align-content: center !important;
  justify-content: flex-start !important;
  gap: 24px 32px !important;
  padding: 32px 24px !important;
}

/* Beschriftungen ohne Logo ganz entfernen, damit die Logos mittig sitzen */
.footer__press > :not(img):not(:has(img)),
.footer__newsletter > :not(img):not(:has(img)) {
  display: none !important;
}

/* Förderlogos */
.footer__newsletter img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: clamp(44px, 3.6vw, 54px) !important;
  min-width: 0;
  flex: 0 1 auto;
  margin: 0 !important;
}
.footer__newsletter img[src*="neb-logo"] {
  max-height: clamp(56px, 4.6vw, 68px) !important;
}

/* Partnerlogos ohne Beschriftung */
.footer__press p,
.footer__press span,
.footer__press h2,
.footer__press h3 {
  font-size: 0 !important;
  line-height: 0 !important;
  margin: 0 !important;
}
.footer__press img {
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  vertical-align: middle;
}
.footer__press a:first-of-type img {
  max-height: clamp(64px, 6vw, 150px) !important;
}
.footer__press a:last-of-type img {
  max-height: clamp(32px, 3vw, 44px) !important;
}

/* Anordnung auf dem Desktop */
@media screen and (min-width: 800px) {
  .footer__press {
    grid-row: 1 !important;
    grid-column: 1 / span 5 !important;
    padding: 40px 40px !important;
  }
  .footer__newsletter {
    grid-row: 1 !important;
    grid-column: 6 / span 7 !important;
    padding: 40px 32px !important;
  }
  .footer__social-media {
    grid-row: 2 !important;
    grid-column: 1 / span 4 !important;
  }
  .footer__navigation-secondary {
    grid-row: 2 !important;
    grid-column: 5 / span 4 !important;
  }
  .footer__development {
    grid-row: 2 !important;
    grid-column: 9 / span 4 !important;
  }
}


/* =========================================
   13. INHALTSSPALTE AUF GROSSEN BILDSCHIRMEN
   ========================================= */

@media screen and (min-width: 1320px) {
  /* Inhalt und Footer */
  #main-content > *,
  footer > .footer {
    max-width: 1280px;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Kopfzeile: volle Breite, Inhalt an den Spaltenkanten */
  body > header,
  body > header > * {
    border-left: none !important;
    border-right: none !important;
  }
  body > header > * {
    position: relative;
    max-width: none !important;
    padding-left: calc((100% - 1280px) / 2 + 24px) !important;
    padding-right: calc((100% - 1280px) / 2 + 24px) !important;
    border-bottom: none !important;
    background-image: none !important;
  }

  /* Kopfzeile: Linien gleich zentriert wie der Inhalt, daher pixelgenau */
  body > header > *::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    pointer-events: none;
  }

  /* Aufgeklapptes Menü: Kacheln an den Spaltenkanten */
  [class*="header__right__navigation__inner"] {
    padding-left: max(0px, calc((100% - 1280px) / 2)) !important;
    padding-right: max(0px, calc((100% - 1280px) / 2)) !important;
  }
}


/* =========================================
   13a. BILDANSICHT IM FOTOPORTAL: VOLLE BREITE
   Ausnahme von der 1280px-Spalte, damit das Foto die Fläche nutzen kann
   ========================================= */

@media screen and (min-width: 1320px) {
  /* Inhalt und Footer über die ganze Breite */
  body.single-csp_image #main-content > *,
  body.single-csp_image footer > .footer {
    max-width: none !important;
  }

  /* Kopfzeile: Inhalt und Linien wieder am Bildschirmrand */
  body.single-csp_image > header > * {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  body.single-csp_image > header > *::after {
    max-width: none !important;
  }

  /* Aufgeklapptes Menü ebenfalls über die ganze Breite */
  body.single-csp_image [class*="header__right__navigation__inner"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


/* =========================================
   14. LESEMODUS: „Was wir machen“ (1630) und „Wer wir sind“ (1632)
   Weitere Seiten: ihre ID in alle Klammern :is(…) aufnehmen.
   ========================================= */

body:is(.page-id-1630, .page-id-1632) {
  --lese-rand: max(16px, calc((100% - 720px) / 2));   /* Textspalte 720px */
  --bild-rand: max(16px, calc((100% - 960px) / 2));   /* Bilder und Kontaktkarten 960px */
}

/* --- Kopf: Foto mit rotem Schild an der Kante der Lesespalte --- */
body:is(.page-id-1630, .page-id-1632) .page-single__header .page-single__header__headline {
  position: relative;
  z-index: 1;
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  min-height: clamp(320px, 55vh, 520px);
  padding: 32px var(--lese-rand) 0 var(--lese-rand) !important;
  background-size: cover !important;
  background-position: center 40% !important;
  background-repeat: no-repeat !important;
  background-color: #FBEFEC !important;
}
body.page-id-1630 .page-single__header .page-single__header__headline {
  background-image: url("https://heimatforschernetz.de/wp-content/uploads/2026/05/what.jpg") !important;
}
body.page-id-1632 .page-single__header .page-single__header__headline {
  background-image: url("https://heimatforschernetz.de/wp-content/uploads/2026/05/DSC01995-scaled.webp") !important;
}
body:is(.page-id-1630, .page-id-1632) .page-single__header__headline h1 {
  box-sizing: border-box;
  width: min(680px, 100%);
  margin: 0 0 -64px 0 !important;
  padding: 58px 28px 32px 28px !important;
  background: var(--hfn-dach-weiss) 28px 28px / 64px 11px no-repeat, #CB553C;
  color: #fff !important;
  font-size: clamp(34px, 4.4vw, 54px) !important;
  line-height: 1.05 !important;
}

/* --- Textspalte --- */
body:is(.page-id-1630, .page-id-1632) .page-single__content__introtext,
body:is(.page-id-1630, .page-id-1632) .block-text,
body:is(.page-id-1630, .page-id-1632) .block-image__description,
body:is(.page-id-1630, .page-id-1632) .block-team > h2 {
  padding-left: var(--lese-rand) !important;
  padding-right: var(--lese-rand) !important;
}

/* Keine Trennlinien im Text */
body:is(.page-id-1630, .page-id-1632) .page-single__content,
body:is(.page-id-1630, .page-id-1632) .page-single__content * {
  border-color: transparent !important;
}

/* Vorspann: etwas größer, oben Platz für den Überhang des Schilds */
body:is(.page-id-1630, .page-id-1632) .page-single__content__introtext {
  padding-top: 88px !important;
  padding-bottom: 8px !important;
  font-size: 21px !important;
  line-height: 1.4 !important;
}
body:is(.page-id-1630, .page-id-1632) .page-single__content__introtext p {
  font-size: inherit !important;
  line-height: inherit !important;
  margin: 0 0 0.5em 0 !important;
}

/* Fließtext und Aufzählungen */
body:is(.page-id-1630, .page-id-1632) .block-text .lazyblock-inner-blocks p,
body:is(.page-id-1630, .page-id-1632) .block-image__description p,
body:is(.page-id-1630, .page-id-1632) .block-text li {
  max-width: none !important;
  font-size: 19px !important;
  line-height: 1.45 !important;
  hyphens: auto;
}
body:is(.page-id-1630, .page-id-1632) .block-text .lazyblock-inner-blocks p,
body:is(.page-id-1630, .page-id-1632) .block-image__description p {
  margin: 0 0 0.5em 0 !important;
}
body:is(.page-id-1630, .page-id-1632) .block-text :is(ul, ol) {
  margin: 0 0 0.6em 0 !important;
  padding-left: 1.2em !important;
}
body:is(.page-id-1630, .page-id-1632) .block-text li {
  margin-bottom: 0.2em !important;
}

/* Abstände der Abschnitte */
body:is(.page-id-1630, .page-id-1632) .block-text {
  padding-top: 12px !important;
  padding-bottom: 0 !important;
}
body:is(.page-id-1630, .page-id-1632) .block-image__description {
  padding-top: 28px !important;
  padding-bottom: 0 !important;
}

/* Links im Text in Terrakotta */
body:is(.page-id-1630, .page-id-1632) .page-single__content__introtext a,
body:is(.page-id-1630, .page-id-1632) .block-text a,
body:is(.page-id-1630, .page-id-1632) .block-team a,
body:is(.page-id-1630, .page-id-1632) .block-business-card a {
  color: #CB553C !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px;
  border-bottom: none !important;
}

/* --- Überschriften: „Wer ist …?“ (Bild-Text-Blöcke) größer, alle übrigen kleiner --- */
body:is(.page-id-1630, .page-id-1632) .block-image__description h2 {
  font-size: 22px !important;
  line-height: 1.25 !important;
  margin: 0 0 0.4em 0 !important;
}
body:is(.page-id-1630, .page-id-1632) .page-single__content .block-text :is(h2, h3, h4),
body:is(.page-id-1630, .page-id-1632) .page-single__content .block-text :is(h2, h3, h4) strong,
body:is(.page-id-1630, .page-id-1632) .block-team > h2 {
  font-size: 20px !important;
  line-height: 1.25 !important;
}
body:is(.page-id-1630, .page-id-1632) .page-single__content .block-text :is(h2, h3, h4) {
  margin: 1em 0 0.4em 0 !important;
}
body:is(.page-id-1630, .page-id-1632) .block-text .lazyblock-inner-blocks > :first-child {
  margin-top: 0 !important;
}

/* --- Bild-Text-Blöcke untereinander; Bild 16:9, höchstens 960px breit --- */
body:is(.page-id-1630, .page-id-1632) .block-image > div {
  display: block !important;
}
body:is(.page-id-1630, .page-id-1632) .block-image__image {
  position: relative;
  box-sizing: border-box;
  width: calc(100% - 32px) !important;
  max-width: 960px !important;
  margin: 28px auto 0 auto !important;
  padding: 0 !important;
}
body:is(.page-id-1630, .page-id-1632) .block-image__image img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  object-position: center;
}

/* --- Kontaktkarten: zartrosa, nebeneinander (ab 700px), Dachlinie unter dem Namen --- */
body:is(.page-id-1630, .page-id-1632) .block-team {
  background-color: transparent !important;
}
body:is(.page-id-1630, .page-id-1632) .block-team :has(> .block-team__grid__member) {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  padding: 8px var(--bild-rand) 24px var(--bild-rand) !important;
  background-color: transparent !important;
}
body:is(.page-id-1630, .page-id-1632) .block-team__grid__member {
  width: auto !important;
  margin: 0 !important;
  padding: 20px !important;
  background-color: #FBEFEC !important;
}
body:is(.page-id-1630, .page-id-1632) .block-team__grid__member .has-image {
  grid-template-columns: 110px 1fr !important;
  column-gap: 20px !important;
  row-gap: 6px !important;
}
body:is(.page-id-1630, .page-id-1632) .block-team__grid__member :is(.block-team__grid__member__name-position-desktop, .block-team__grid__member__name-position-mobile) > :first-child {
  position: relative;
  display: inline-block;
  margin-bottom: 16px !important;
  font-size: 21px !important;
}
body:is(.page-id-1630, .page-id-1632) .block-team__grid__member :is(.block-team__grid__member__name-position-desktop, .block-team__grid__member__name-position-mobile) > :not(:first-child),
body:is(.page-id-1630, .page-id-1632) .block-team__grid__member__details,
body:is(.page-id-1630, .page-id-1632) .block-team__grid__member__details * {
  font-size: 17px !important;
  line-height: 1.45 !important;
}
/* Dachlinie unter dem Namen, zeichnet sich beim Überfahren der Karte */
body:is(.page-id-1630, .page-id-1632) .block-team__grid__member :is(.block-team__grid__member__name-position-desktop, .block-team__grid__member__name-position-mobile) > :first-child::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -11px;
  height: 11px;
  pointer-events: none;
  background: var(--hfn-dach-reihe-rot) repeat-x 0 0 / 20px 11px;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.7s ease;
}
body:is(.page-id-1630, .page-id-1632) .block-team__grid__member:hover :is(.block-team__grid__member__name-position-desktop, .block-team__grid__member__name-position-mobile) > :first-child::after {
  clip-path: inset(0 0 0 0);
}

/* Visitenkarten (Kontakt-Block): zartrosa Karte in der Textspalte */
body:is(.page-id-1630, .page-id-1632) .block-business-card {
  padding: 12px var(--lese-rand) 24px var(--lese-rand) !important;
  background-color: transparent !important;
}
body:is(.page-id-1630, .page-id-1632) .block-business-card__card {
  margin: 0 !important;
  padding: 20px !important;
  background-color: #FBEFEC !important;
}

/* --- Am Rechner --- */
@media screen and (min-width: 700px) {
  body:is(.page-id-1630, .page-id-1632) .block-team :has(> .block-team__grid__member) {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media screen and (min-width: 800px) {
  body:is(.page-id-1630, .page-id-1632) .page-single__content__introtext {
    padding-top: 96px !important;
    font-size: 23px !important;
  }
  body:is(.page-id-1630, .page-id-1632) .block-text .lazyblock-inner-blocks p,
  body:is(.page-id-1630, .page-id-1632) .block-image__description p,
  body:is(.page-id-1630, .page-id-1632) .block-text li {
    font-size: 20px !important;
  }
  body:is(.page-id-1630, .page-id-1632) .block-image__description {
    padding-top: 32px !important;
  }
  body:is(.page-id-1630, .page-id-1632) .block-image__description h2 {
    font-size: 26px !important;
  }
  body:is(.page-id-1630, .page-id-1632) .page-single__content .block-text :is(h2, h3, h4),
  body:is(.page-id-1630, .page-id-1632) .page-single__content .block-text :is(h2, h3, h4) strong,
  body:is(.page-id-1630, .page-id-1632) .block-team > h2 {
    font-size: 22px !important;
  }
  body:is(.page-id-1630, .page-id-1632) .block-image__image {
    margin-top: 36px !important;
  }
  body:is(.page-id-1630, .page-id-1632) .block-team__grid__member .has-image {
    grid-template-columns: 130px 1fr !important;
  }
}

/* --- Bewegung reduzieren --- */
@media (prefers-reduced-motion: reduce) {
  body:is(.page-id-1630, .page-id-1632) .block-team__grid__member :is(.block-team__grid__member__name-position-desktop, .block-team__grid__member__name-position-mobile) > :first-child::after {
    transition: none;
  }
}

/* --- Lesefortschritt: dünne Linie am oberen Rand (nur in Browsern, die das können) --- */
@supports (animation-timeline: scroll()) {
  body:is(.page-id-1630, .page-id-1632)::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100000;
    width: 100%;
    height: 3px;
    background: #CB553C;
    transform-origin: 0 50%;
    transform: scaleX(0);
    animation: hfn-lesefortschritt linear both;
    animation-timeline: scroll(root);
  }
  @keyframes hfn-lesefortschritt {
    to { transform: scaleX(1); }
  }
}


/* =========================================
   15. KONTAKTSEITE (Seite 18): ROTES SCHILD IM KOPF, ABSENDEN-KNOPF
   ========================================= */

/* Rosa Band mit Bögen bleibt, Schild unten links */
.page-id-18 :is(.page__headline, .page-single__header__headline) {
  position: relative;
  z-index: 1;
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  min-height: clamp(200px, 30vh, 300px);
  padding-top: 32px !important;
  padding-bottom: 0 !important;
}

/* Schild oben: weiße Dachlinie und Dachzeile */
.page-id-18 :is(.page__headline, .page-single__header__headline)::before {
  content: "Wir freuen uns, von Ihnen zu hören!";
  box-sizing: border-box;
  width: min(680px, 100%);
  padding: 58px 28px 6px 28px;
  background: var(--hfn-dach-weiss) 28px 28px / 64px 11px no-repeat, #CB553C;
  color: #fff;
  font-family: "Freight Sans Bold", Arial, sans-serif;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.3;
}

/* Schild unten: Titel, ragt 64px über die Kante */
.page-id-18 :is(.page__headline, .page-single__header__headline) h1 {
  box-sizing: border-box;
  width: min(680px, 100%);
  margin: 0 0 -64px 0 !important;
  padding: 4px 28px 32px 28px !important;
  background: #CB553C;
  color: #fff !important;
  font-size: clamp(34px, 4.4vw, 54px) !important;
  line-height: 1.05 !important;
}

/* Inhalt rückt um den Überhang nach unten */
.page-id-18 :is(.page__content, .page-single__content) {
  padding-top: 76px !important;
}

/* Absenden-Knopf (Ninja Forms) in Terrakotta, mit weißer Dachkante im Knopf */
.nf-form-cont .submit-container :is(input, button) {
  padding: 14px 36px 32px 36px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--hfn-dach-weiss) center bottom 12px / 48px 9px no-repeat, #CB553C !important;
  color: #fff !important;
  font: 20px/1.2 "Freight Sans Bold", Arial, sans-serif !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.nf-form-cont .submit-container :is(input, button):hover,
.nf-form-cont .submit-container :is(input, button):focus-visible {
  background: var(--hfn-dach-weiss) center bottom 12px / 48px 9px no-repeat, #A9422C !important;
}
/* Wer wir sind: Textblöcke so breit wie der obere Textkasten */
body:is(.page-id-1630, .page-id-1632) .block-text .lazyblock-inner-blocks {
    width: min(720px, calc(100vw - 40px));
    max-width: none;
}