@keyframes fhe-booking-button-bounce {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(-4px); }
  72% { transform: translateY(-2px); }
}

@keyframes fhe-booking-dot-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-4px) scale(1.06); }
  72% { transform: translateY(-2px) scale(1.03); }
}

/* Buchungs-CTAs reagieren wie die Social-Buttons im Footer. */
a[href^="ferienhaus-finden.html"][class*="button"],
a[href^="ferienhaus-finden.html"].fhe-global-search-jump,
a[href^="ferienhaus-finden.html"][style*="background:#EA795F"],
form[action^="ferienhaus-finden.html"] .fhe-search-launcher-button {
  transform-origin: center;
  will-change: transform;
}

a[href^="ferienhaus-finden.html"][class*="button"]:hover,
a[href^="ferienhaus-finden.html"][class*="button"]:focus-visible,
a[href^="ferienhaus-finden.html"].fhe-global-search-jump:hover,
a[href^="ferienhaus-finden.html"].fhe-global-search-jump:focus-visible,
a[href^="ferienhaus-finden.html"][style*="background:#EA795F"]:hover,
a[href^="ferienhaus-finden.html"][style*="background:#EA795F"]:focus-visible,
form[action^="ferienhaus-finden.html"] .fhe-search-launcher-button:hover,
form[action^="ferienhaus-finden.html"] .fhe-search-launcher-button:focus-visible {
  animation: fhe-booking-button-bounce .42s cubic-bezier(.22,.8,.35,1) both !important;
}

/* Der gelbe Pfeilpunkt in der Suchleiste bewegt sich separat mit. */
.fhe-search-launcher-button b {
  transform-origin: center;
  will-change: transform;
}

.fhe-search-launcher-button:hover b,
.fhe-search-launcher-button:focus-visible b {
  animation: fhe-booking-dot-bounce .42s cubic-bezier(.22,.8,.35,1) both !important;
  background: #ffd074 !important;
}

/* Der Soforthilfe-Pfeil folgt demselben gelben Punkt- und Bounce-System. */
.hero-jump .hero-jump-arrow {
  transform-origin: center;
  will-change: transform;
}

.hero-jump:hover .hero-jump-arrow,
.hero-jump:focus-visible .hero-jump-arrow {
  animation: fhe-booking-dot-bounce .42s cubic-bezier(.22,.8,.35,1) both !important;
  background: #ffd074 !important;
}

/* Externe Hilfelinks nutzen denselben gelben Pfeilpunkt. */
.source-list a::after {
  transform-origin: center;
  will-change: transform;
}

.source-list a:hover::after,
.source-list a:focus-visible::after {
  animation: fhe-booking-dot-bounce .42s cubic-bezier(.22,.8,.35,1) both !important;
  background: #ffd074 !important;
}

@media (prefers-reduced-motion: reduce) {
  a[href^="ferienhaus-finden.html"][class*="button"]:hover,
  a[href^="ferienhaus-finden.html"][class*="button"]:focus-visible,
  a[href^="ferienhaus-finden.html"].fhe-global-search-jump:hover,
  a[href^="ferienhaus-finden.html"].fhe-global-search-jump:focus-visible,
  a[href^="ferienhaus-finden.html"][style*="background:#EA795F"]:hover,
  a[href^="ferienhaus-finden.html"][style*="background:#EA795F"]:focus-visible,
  form[action^="ferienhaus-finden.html"] .fhe-search-launcher-button:hover,
  form[action^="ferienhaus-finden.html"] .fhe-search-launcher-button:focus-visible,
  .fhe-search-launcher-button:hover b,
  .fhe-search-launcher-button:focus-visible b,
  .hero-jump:hover .hero-jump-arrow,
  .hero-jump:focus-visible .hero-jump-arrow,
  .source-list a:hover::after,
  .source-list a:focus-visible::after {
    animation: none !important;
  }
}

/*
 * Gemeinsame Ratgeber-Gestaltung
 * Der warme Sandton verbindet alle älteren und neueren Artikelgenerationen.
 * Weiße Flächen bleiben gezielt den Karten und gut lesbaren Informationselementen vorbehalten.
 */
body.fhe-ratgeber-page {
  --fhe-ratgeber-bg: #f7f4e9;
  --fhe-ratgeber-soft: #f1e9df;
  --fhe-ratgeber-card: #fffdf9;
  --fhe-ratgeber-border: #e2d3c4;
  background: var(--fhe-ratgeber-bg) !important;
}

body.fhe-ratgeber-page > main,
body.fhe-ratgeber-page > main[id^="fhe-"] {
  background-color: var(--fhe-ratgeber-bg) !important;
}

/* Die eigentlichen Lesebereiche liegen ruhig auf dem warmen Grundton. */
body.fhe-ratgeber-page :is(
  .content,
  .cta-wrap,
  .currency,
  .fhe-dogprep-section,
  .fhe-rg-section
) {
  background-color: var(--fhe-ratgeber-bg) !important;
}

/* Sanft abgesetzte Themenbereiche ersetzen die bisherigen blaugrünen Mischflächen. */
body.fhe-ratgeber-page :is(
  .steps,
  .layers,
  .fhe-dogprep-soft,
  .fhe-rg-soft
) {
  background-color: var(--fhe-ratgeber-soft) !important;
}

/* Helle Karten bleiben freundlich, wirken auf allen Artikeln aber gleich. */
body.fhe-ratgeber-page :is(
  .callout,
  .fhe-callout,
  .fhe-dogprep-rule,
  .template,
  .side,
  .layer,
  .fhe-dogprep-card,
  .fhe-dogprep-step,
  .fhe-dogprep-arrival article,
  .fhe-dogprep-emergency article,
  .fhe-dogprep-checks li,
  .fhe-rg-card
) {
  border-color: var(--fhe-ratgeber-border) !important;
  background-color: var(--fhe-ratgeber-card) !important;
}

/* Infokästen greifen das warme Gelb der runden Pfeilbuttons auf. */
body.fhe-ratgeber-page main :is(#fhe-ratgeber-yellow-accent, .callout, .fhe-callout, .fhe-dogprep-rule) {
  border-left-color: #f3b75b !important;
}

/* Vier-Schritte- und Vier-Punkte-Kästen folgen dem einheitlichen roten System. */
body.fhe-ratgeber-page :is(.step, .step-card, .four-step-card) {
  border-color: rgba(255,255,255,.24) !important;
  background: linear-gradient(135deg,#c85c46 0%,#a83d2f 100%) !important;
  color: #fff !important;
  box-shadow: 0 12px 26px rgba(107,42,31,.18) !important;
}

body.fhe-ratgeber-page :is(.step, .step-card, .four-step-card) :is(h3,strong,p,span,li) {
  color: #fff !important;
}

body.fhe-ratgeber-page :is(.step-number, .step-card-number, .four-step-number) {
  border-color: rgba(255,255,255,.38) !important;
  background: #7f2e25 !important;
  color: #fff !important;
}

/* Die vier Preisebenen verwenden denselben roten Vier-Schritte-Look. */
body.fhe-ratgeber-page #fhe-cost-guide-preview .layer-grid .layer {
  border-color: rgba(255,255,255,.24) !important;
  background: linear-gradient(135deg,#c85c46 0%,#a83d2f 100%) !important;
  color: #fff !important;
  box-shadow: 0 12px 26px rgba(107,42,31,.18) !important;
}

body.fhe-ratgeber-page #fhe-cost-guide-preview .layer-grid .layer :is(strong,span) {
  color: #fff !important;
}

body.fhe-ratgeber-page #fhe-cost-guide-preview .layer-grid .layer .number {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.38) !important;
  background: #7f2e25 !important;
  color: #fff !important;
  font-weight: 900;
  box-shadow: 0 5px 13px rgba(71,22,17,.24);
}

@media (prefers-color-scheme: dark) {
  body.fhe-ratgeber-page {
    --fhe-ratgeber-bg: #10262f;
    --fhe-ratgeber-soft: #17313a;
    --fhe-ratgeber-card: #1b3740;
    --fhe-ratgeber-border: #3d5961;
  }
}

/*
 * Ruhige Breitbild-Darstellung
 *
 * Flächige Sektionsfarben dürfen den gesamten Monitor nutzen. Navigation,
 * Titelmotive, Bildmosaike und Text bleiben dagegen in einer ruhigen,
 * zentrierten 1.280-Pixel-Spalte. So ändern sich Bildausschnitt und
 * Kartenformat zwischen Notebook und Ultrawide-Monitor nur noch behutsam.
 */
:root {
  --fhe-wide-content: 1280px;
  --fhe-wide-hero: 2000px;
  --fhe-wide-gutter: clamp(18px, 5vw, 58px);
}

/* Rasterelemente dürfen ihre Spalten nie künstlich verbreitern. */
body > main[id^="fhe-"] :is(
  .fhe-destination,
  .fhe-idea,
  .fhe-rz-country,
  .fhe-rz-tile,
  .fhe-rz-idea,
  article,
  figure
) {
  min-width: 0;
}

body > main[id^="fhe-"] img {
  max-width: 100%;
}

body > main[id^="fhe-"] :is(
  .fhe-destination,
  .fhe-idea,
  .fhe-rz-country,
  .fhe-rz-tile,
  .fhe-rz-idea
) {
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/*
 * Die Titelbilder greifen die weichen Ecken der Bildkarten auf. Auf kleineren
 * Bildschirmen wird der Radius bewusst etwas zurückgenommen.
 */
body > main[id^="fhe-"] > section[data-fhe-global-hero],
body > main#fhe-homepage-preview > section.fhe-hero {
  border-radius: clamp(12px, 1.6vw, 22px) !important;
  overflow: hidden !important;
}

@media (max-width: 1179px) {
  body > main[id^="fhe-"] > section[data-fhe-global-hero],
  body > main#fhe-homepage-preview > section.fhe-hero {
    box-sizing: border-box !important;
    width: calc(100% - 24px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 680px) {
  body > main[id^="fhe-"] > section[data-fhe-global-hero],
  body > main#fhe-homepage-preview > section.fhe-hero {
    width: calc(100% - 12px) !important;
    border-radius: 12px !important;
  }
}

@media (min-width: 1180px) {
  body > header.fhe-global-header,
  body > footer.fhe-global-footer,
  body > main[id^="fhe-"] > header.fhe-global-header,
  body > main[id^="fhe-"] > footer.fhe-global-footer {
    padding-left: max(24px, calc((100vw - var(--fhe-wide-content)) / 2)) !important;
    padding-right: max(24px, calc((100vw - var(--fhe-wide-content)) / 2)) !important;
  }

  /* Die Sektion selbst bleibt vollflächig; nur ihr Inhalt rückt nach innen. */
  body > main[id^="fhe-"] > section {
    padding-left: max(var(--fhe-wide-gutter), calc((100vw - var(--fhe-wide-content)) / 2)) !important;
    padding-right: max(var(--fhe-wide-gutter), calc((100vw - var(--fhe-wide-content)) / 2)) !important;
  }

  /* Ältere Ratgeber-Generationen verwenden teilweise Inhaltsblöcke ohne section. */
  body > main[id^="fhe-"] > :is(.content, .fhe-content, .page-content) {
    box-sizing: border-box !important;
    width: min(100%, var(--fhe-wide-content)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /*
   * Die großen Titelmotive bleiben schon auf normalen Desktopmonitoren kompakt.
   * Dadurch werden Ferienhäuser und Landschaften auf Start- und Unterseiten
   * weder gestreckt noch über die gesamte Monitorbreite gezogen. Text, Suchleiste und
   * Aktionsbutton behalten dabei die vertraute großzügige Anordnung.
   */
  body > main[id^="fhe-"] > section[data-fhe-global-hero],
  body > main#fhe-homepage-preview > section.fhe-hero {
    box-sizing: border-box !important;
    width: min(calc(100% - 32px), var(--fhe-wide-hero)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--fhe-wide-gutter) !important;
    padding-right: var(--fhe-wide-gutter) !important;
    overflow: hidden !important;
    border-radius: 22px !important;
    background-size: cover !important;
    background-position: center !important;

    /*
     * Auf breiten Monitoren bildet ein warmer Sandton einen ruhigen Rahmen
     * um das begrenzte Titelmotiv. So wirken die seitlichen Flächen bewusst
     * gestaltet, ohne mit dem Foto oder der weißen Navigation zu konkurrieren.
     */
    box-shadow: 0 0 0 100vmax #f3ede3 !important;
    clip-path: inset(0 -100vmax) !important;
  }
}