/*
Theme Name: Rhino Solar
Theme URI: https://rhino-solar.de
Author: Rhino Solar
Description: Custom WordPress theme for Rhino Solar. Rebuilt against the original Abkauf/RH-60 styling.
Version: 3.0.1
Requires at least: 6.0
Tested up to: 6.7
License: Private
Text Domain: rhino-solar
*/

/* ============================================================
   01 – RHINO BASISVARIABLEN
   ============================================================ */
:root {
  --rh--color--ci: #fdc414ff;
  --rh--color--ci--contrast: #000;
  --rh--color--ci--secondary: rgb(124, 183, 125);
  --rh--color--ci--secondary--contrast: #000;
  --rh--color--ci--secondary--lighten-30: #dfeddf;
  --rh--color--content: #fff;
  --rh--color--content--text: #333333ff;
  --rh--color--header: rgb(47, 41, 27);
  --rh--color--footer: #2f291bff;
  --rh--color--footer--text: #fff;
  --rh--color--link--text: rgb(51, 51, 51);
  --rh--color--link--text--hover: rgb(51, 51, 51);
  --rh--font--main: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --rh--general--font-size: 1.7rem;
  --rh--font--line-height--body: 1.8;
  --rh--size--content: 1400px;
  --rh--size--wide: 1600px;
  --rh--size--logo--height: 170px;
  --rh--size--logo--height--small: 100px;
  --rh--size--general--margin--bottom: 2.4rem;
  --rh--size--block-gap: clamp(4rem, 4.5vw, 12rem);
  --rhino-header-height: 0px;
}

/* ============================================================
   02 – GRUNDLAYOUT
   ============================================================ */
html {
  font-size: 62.5%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  background: var(--rh--color--content);
  color: var(--rh--color--content--text);
  font-family: var(--rh--font--main);
  font-size: var(--rh--general--font-size);
  line-height: var(--rh--font--line-height--body);
  margin: 0;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

#page.site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.site-content {
  flex: 1 0 auto;
  padding: 0;
  max-width: 100%;
  margin-top: var(--rhino-header-height, 0px);
}

.admin-bar .header.nav-fixed-wrapper {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .header.nav-fixed-wrapper {
    top: 46px;
  }
}

.container {
  max-width: var(--rh--size--content);
  margin-left: auto;
  margin-right: auto;
  padding-left: max(env(safe-area-inset-left), 2rem);
  padding-right: max(env(safe-area-inset-right), 2rem);
}

@media (min-width: 840px) {
  .container {
    padding-left: max(env(safe-area-inset-left), 4rem);
    padding-right: max(env(safe-area-inset-right), 4rem);
  }
}

img {
  max-width: 100%;
  height: auto;
}

/* ============================================================
   03 – HEADER WIE ORIGINAL: LOGO LINKS, NAVIGATION DANEBEN
   ============================================================ */
.header.nav-fixed-wrapper {
  background: var(--rh--color--header);
  box-shadow: 0 2px 10px rgba(0,0,0,.22);
  left: 0;
  margin-top: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 110;
}

.header > .nav-wrapper {
  align-items: center;
  display: flex;
  flex-direction: row;
  margin: 0 auto;
  max-width: var(--rh--size--content);
  min-height: 0;
  width: 100%;
}

.nav-wrapper .site-header {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  order: 0;
  padding-bottom: 0;
  padding-top: 0;
  width: auto;
}

.site-branding {
  align-items: center;
  display: flex;
  flex-grow: 0;
}

.site-branding > a,
.custom-logo-link {
  box-shadow: none !important;
  display: inline-flex;
  line-height: 0;
  text-decoration: none;
}

.custom-logo {
  display: block;
  height: var(--rh--size--logo--height);
  margin: 15px 0 5px;
  max-height: 170px;
  width: auto;
  transition: height .25s ease, max-height .25s ease, margin .25s ease;
}

.header.scrolled .custom-logo {
  height: var(--rh--size--logo--height--small);
  max-height: 100px;
  margin: 8px 0 4px;
}

/* ============================================================
   04 – DESKTOP-NAVIGATION
   ============================================================ */
@media (min-width: 840px) {
  .mobile-menu-toggle,
  .mobile-menu-toggle-inside {
    display: none !important;
  }

  .header > .nav-wrapper > .main-navigation {
    flex: 1 1 auto;
  }

  .nav-wrapper .main-navigation {
    align-self: center;
    background: transparent;
    bottom: auto;
    height: auto;
    left: auto;
    overflow: visible;
    position: static;
    transition: none;
    width: auto;
  }

  .main-navigation > .container {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding-bottom: 0;
    padding-top: 0;
    width: 100%;
  }

  .nav-menu {
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    margin: 0;
    min-width: 0;
    padding: 0;
    width: auto;
  }

  .nav-menu > .menu-item {
    color: #fff;
    flex: none;
    margin: 0;
    position: relative;
  }

  .nav-menu > .menu-item > a {
    align-items: center;
    box-shadow: none !important;
    color: currentColor;
    display: flex;
    font-size: 1.7rem;
    font-weight: 400;
    line-height: 2.3;
    overflow: hidden;
    padding: 10px 2.2rem;
    text-align: center;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav-menu > .menu-item:hover,
  .nav-menu > .menu-item:focus-within,
  .nav-menu > .menu-item.current-menu-item,
  .nav-menu > .menu-item.current_page_item,
  .nav-menu > .menu-item.current-menu-ancestor,
  .nav-menu > .menu-item.current_page_ancestor {
    background: var(--rh--color--ci);
    color: var(--rh--color--ci--contrast);
  }

  .nav-menu > .menu-item.current-menu-item:hover,
  .nav-menu > .menu-item.current_page_item:hover,
  .nav-menu > .menu-item.current-menu-ancestor:hover,
  .nav-menu > .menu-item.current_page_ancestor:hover {
    background: var(--rh--color--ci--secondary);
    color: var(--rh--color--ci--secondary--contrast);
  }

  .main-navigation .sub-menu {
    background: var(--rh--color--ci);
    box-shadow: 0 8px 22px rgba(0,0,0,.18);
    clip: rect(1px, 1px, 1px, 1px);
    display: block;
    height: 1px;
    left: 0;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    top: 100%;
    width: 1px;
    z-index: 100;
  }

  .main-navigation .menu-item:hover > .sub-menu,
  .main-navigation .menu-item:focus-within > .sub-menu,
  .main-navigation .sub-menu.sub-menu-open {
    clip: inherit;
    height: auto;
    overflow: visible;
    width: auto;
  }

  .main-navigation .sub-menu a {
    box-shadow: none !important;
    color: #000;
    display: block;
    font-size: 1.6rem;
    line-height: 1.5;
    padding: 1rem 2rem;
    text-align: left;
    text-decoration: none;
    white-space: normal;
    width: 250px;
  }

  .main-navigation .sub-menu .menu-item:hover,
  .main-navigation .sub-menu .menu-item:focus-within {
    background: var(--rh--color--ci--secondary);
  }
}

/* ============================================================
   05 – MOBILE-NAVIGATION
   ============================================================ */
.mobile-menu-toggle {
  align-items: center;
  appearance: none;
  background: var(--rh--color--ci);
  border: 0;
  color: #000;
  cursor: pointer;
  display: flex;
  gap: .8rem;
  margin-left: auto;
  padding: 1rem 2rem;
  white-space: nowrap;
}

.mobile-menu-toggle__icon {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-menu-toggle__icon span {
  background: currentColor;
  display: block;
  height: 2px;
  width: 22px;
}

.mobile-menu-toggle__label {
  font-size: 1.5rem;
  line-height: 1;
}

@media (max-width: 839px) {
  :root {
    --rh--size--logo--height: 100px;
    --rh--size--logo--height--small: 80px;
  }

  .header > .nav-wrapper {
    padding-right: 0;
  }

  .custom-logo {
    margin: 8px 0 6px;
  }

  .main-navigation {
    background: var(--rh--color--ci);
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    transition: width .3s ease;
    width: 0;
    z-index: 1000;
  }

  html.nav-open .main-navigation {
    overflow: auto;
    width: 256px;
  }

  .main-navigation > .container {
    display: flex;
    flex-direction: column;
    padding: 0;
    width: 100%;
  }

  .mobile-menu-toggle-inside {
    appearance: none;
    background: rgba(0,0,0,.08);
    border: 0;
    color: #000;
    cursor: pointer;
    display: block;
    font-family: var(--rh--font--main);
    font-size: 1.7rem;
    line-height: 2;
    padding: 1rem 2rem;
    text-align: left;
    width: 100%;
  }

  .main-navigation .nav-menu {
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
  }

  .main-navigation .menu-item {
    color: #000;
    display: block;
    position: relative;
  }

  .main-navigation .menu-item > a {
    box-shadow: none !important;
    color: currentColor;
    display: block;
    font-size: 1.7rem;
    line-height: 2.3;
    overflow: hidden;
    padding: 10px 4rem 10px 2rem;
    text-align: left;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .main-navigation .current-menu-item,
  .main-navigation .current_page_item,
  .main-navigation .menu-item:hover,
  .main-navigation .menu-item:focus-within {
    background: var(--rh--color--ci--secondary);
  }

  #nav-blocker {
    bottom: 0;
    left: 100%;
    position: fixed;
    right: 0;
    top: 0;
    transition: left .3s ease;
    z-index: 99999;
  }

  html.nav-open #nav-blocker {
    left: 256px;
  }
}

/* ============================================================
   06 – GUTENBERG / CONTENT KORREKTUREN
   ============================================================ */
.entry-content {
  width: 100vw;
}

.entry-content > .alignfull,
.entry-content > *.alignfull {
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  max-width: 100vw !important;
  padding-left: 0;
  padding-right: 0;
  width: 100vw !important;
}

.entry-content > *:not(.alignfull) {
  max-width: var(--rh--size--content);
  margin-left: auto;
  margin-right: auto;
}

.wp-block-cover.is-header-image,
.is-header-image.wp-block-cover {
  min-height: 450px;
}

@media (min-width: 1135px) {
  .home .wp-block-cover.is-header-image,
  .home .is-header-image.wp-block-cover {
    min-height: 30vw !important;
  }
}

.wp-block-cover.is-header-image .wp-block-cover__inner-container {
  max-width: calc(var(--rh--size--content) - 8rem);
}

.wp-block-cover.is-header-image .wp-block-heading,
.wp-block-cover.is-header-image h1,
.wp-block-cover.is-header-image h2 {
  color: #fff !important;
}

.wp-block-button__link,
.wp-element-button,
button[type="submit"],
input[type="submit"] {
  background-color: var(--rh--color--ci);
  border: 0;
  border-radius: 0;
  box-shadow: none !important;
  color: #000 !important;
  font-family: var(--rh--font--main);
  font-weight: 700;
  text-decoration: none;
}

.wp-block-button__link:hover,
.wp-element-button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background-color: var(--rh--color--ci--secondary);
  color: #000 !important;
}

a {
  color: var(--rh--color--link--text);
  text-decoration: none;
}

a:hover,
a:focus {
  color: var(--rh--color--link--text--hover);
}

/* ============================================================
   07 – FOOTER WIE ORIGINALFARBEN, ABER SAUBER FÜR WP-MENÜS
   ============================================================ */
.site-footer {
  background: var(--rh--color--footer);
  color: var(--rh--color--footer--text);
  flex-shrink: 0;
  margin-top: auto;
}

.site-footer h2,
.site-footer h3,
.site-footer p,
.site-footer li,
.site-footer span {
  color: var(--rh--color--footer--text);
}

.site-footer a {
  box-shadow: inset 0 -2px currentColor;
  color: var(--rh--color--footer--text);
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
  box-shadow: none;
  color: var(--rh--color--footer--text);
}

.footer-widgets.container {
  display: grid;
  gap: 3rem;
  padding-bottom: 4rem;
  padding-top: 5rem;
}

@media (min-width: 840px) {
  .footer-widgets.container {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-bottom: 5rem;
    padding-top: 6rem;
  }
}

.site-info.container {
  align-items: center;
  border-top: 1px solid rgba(255,255,255,.18);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-bottom: 2rem;
  padding-top: 2rem;
}

.footer-nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 840px) {
  .site-info.container {
    flex-direction: row;
    justify-content: space-between;
  }

  .footer-nav-list {
    justify-content: flex-end;
  }
}

/* ============================================================
   08 – ACCESSIBILITY / KLEINE KORREKTUREN
   ============================================================ */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background: var(--rh--color--ci);
  clip: auto !important;
  clip-path: none;
  color: #000;
  display: block;
  height: auto;
  left: 5px;
  padding: 1rem 1.5rem;
  top: 5px;
  width: auto;
  z-index: 100000;
}


/* ============================================================
   09 – HOTFIX 2.2: ORIGINAL-ABSTÄNDE HEADER + HERO
   ============================================================
   Ziel:
   - Header/Logo nicht mehr mittig im WordPress-Container.
   - Hero-Bild wieder echte volle Breite ohne weißen Rand.
   - Hero-Text auf der Startseite wieder links unten wie in der HTML-Version.
   - Inhaltsbreite unterhalb des Heros wieder näher am Original.
*/

/* Header: Wrapper wie Original, aber ohne versehentliche Zentrierung des Logo-Containers */
@media (min-width: 840px) {
  body .header.nav-fixed-wrapper > .nav-wrapper {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: max(env(safe-area-inset-left), 4rem) !important;
    padding-right: max(env(safe-area-inset-right), 4rem) !important;
    box-sizing: border-box !important;
  }

  body .header.nav-fixed-wrapper .site-header.container,
  body .header.nav-fixed-wrapper .nav-wrapper .site-header.container {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex: 0 0 auto !important;
    text-align: left !important;
  }

  body .header.nav-fixed-wrapper .site-branding {
    justify-content: flex-start !important;
    text-align: left !important;
  }

  body .header.nav-fixed-wrapper .main-navigation {
    flex: 1 1 auto !important;
    margin-left: 4rem !important;
  }

  body .header.nav-fixed-wrapper .main-navigation > .container {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: flex-end !important;
  }

  body .header.nav-fixed-wrapper .nav-menu > .menu-item > a {
    padding-left: 1.3rem !important;
    padding-right: 1.3rem !important;
  }
}

/* Logo-Größe wie HTML-Vorlage: groß, aber nicht übertrieben */
body .header.nav-fixed-wrapper .custom-logo {
  height: 145px !important;
  max-height: 145px !important;
  width: auto !important;
  object-fit: contain !important;
}

body .header.nav-fixed-wrapper.scrolled .custom-logo {
  height: 92px !important;
  max-height: 92px !important;
}

@media (max-width: 839px) {
  body .header.nav-fixed-wrapper .custom-logo {
    height: 96px !important;
    max-height: 96px !important;
  }

  body .header.nav-fixed-wrapper > .nav-wrapper {
    padding-left: 2rem !important;
  }
}

/* Hero: WordPress-Block darf nicht im Inhaltscontainer kleben */
body .site-content,
body .site-main,
body .entry-content,
body article.page {
  max-width: none !important;
  width: 100% !important;
}

body .entry-content > .wp-block-cover.alignfull,
body .entry-content > .wp-block-cover.is-header-image,
body .site-main .wp-block-cover.alignfull,
body .site-main .wp-block-cover.is-header-image {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: 0 !important;
  padding-left: 4rem !important;
  padding-right: 4rem !important;
  box-sizing: border-box !important;
}

/* Auf Desktop ist der Hero der Startseite flacher und bannerartiger wie die alte HTML-Seite. */
@media (min-width: 1135px) {
  body.home .entry-content > .wp-block-cover.is-header-image,
  body.home .site-main .wp-block-cover.is-header-image {
    min-height: 450px !important;
    height: 450px !important;
  }

  body:not(.home) .entry-content > .wp-block-cover.is-header-image,
  body:not(.home) .site-main .wp-block-cover.is-header-image {
    min-height: 350px !important;
    height: 350px !important;
  }
}

/* Hero-Inhalt: Startseiten-Claim wieder links unten statt rechts unten. */
body.home .wp-block-cover.is-header-image .wp-block-cover__inner-container {
  align-items: flex-start !important;
  justify-content: flex-end !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 760px !important;
  padding: 0 0 3rem 0 !important;
  text-align: left !important;
}

body.home .wp-block-cover.is-header-image .wp-block-heading,
body.home .wp-block-cover.is-header-image h1,
body.home .wp-block-cover.is-header-image h2 {
  font-size: clamp(3rem, 3.2vw, 4.8rem) !important;
  line-height: 1.22 !important;
  margin-bottom: 1.6rem !important;
  max-width: 760px !important;
  text-align: left !important;
}

body.home .wp-block-cover.is-header-image .wp-block-buttons,
body.home .wp-block-cover.is-header-image .wp-block-button {
  justify-content: flex-start !important;
  margin-top: 0 !important;
  text-align: left !important;
}

/* Normale Inhaltsblöcke nach dem Hero wieder breiter und originalnäher. */
body .entry-content > *:not(.alignfull):not(.wp-block-cover),
body .entry-content > .wp-block-group:not(.alignfull) > .wp-block-group__inner-container,
body .wp-block-group.is-layout-constrained > * {
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body .entry-content > .wp-block-group:not(.alignfull) {
  max-width: none !important;
  width: 100% !important;
}

@media (min-width: 840px) {
  body .entry-content > .wp-block-group,
  body .wp-block-group {
    padding-top: clamp(5rem, 5vw, 9rem) !important;
    padding-bottom: clamp(5rem, 5vw, 9rem) !important;
  }
}

/* Spalten/Media-Text auf Leistungsseite dürfen wieder breiter laufen. */
body .wp-block-columns,
body .wp-block-media-text {
  max-width: 1180px !important;
}

/* Adminbar: Header-Abstand bleibt stabil, ohne doppelten Main-Nesting-Effekt. */
body.admin-bar .site-content {
  margin-top: var(--rhino-header-height, 0px) !important;
}


/* ============================================================
   10 – HOTFIX 2.3: HEADER-NAV RECHTS, HERO OHNE RÄNDER, ABSTÄNDE KÜRZER
   ============================================================
   Ergebnis aus Screenshot-Abgleich:
   - Menü muss an den rechten Rand wie in der HTML-Version.
   - Hero darf keine weißen Innenränder haben.
   - Hero darf nicht mit Abstand unter dem Header starten.
   - Startseiten-Text muss links unten sitzen, nicht rechts.
   - Abstand zwischen Hero und erstem Inhaltsblock wird deutlich reduziert.
*/

@media (min-width: 840px) {
  body .header.nav-fixed-wrapper > .nav-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4rem !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 4rem !important;
    padding-right: 4rem !important;
    box-sizing: border-box !important;
  }

  body .header.nav-fixed-wrapper .site-header.container {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body .header.nav-fixed-wrapper .main-navigation {
    flex: 0 0 auto !important;
    width: auto !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    position: static !important;
  }

  body .header.nav-fixed-wrapper .main-navigation > .container {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
  }

  body .header.nav-fixed-wrapper .nav-menu {
    width: auto !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    justify-content: flex-end !important;
  }

  body .header.nav-fixed-wrapper .nav-menu > .menu-item > a {
    padding-left: 1.45rem !important;
    padding-right: 1.45rem !important;
  }
}

/* Hero direkt unter Header, ohne weiße WordPress-Ränder */
body .site-content,
body .site-main,
body .entry-content,
body .entry-content > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body .entry-content > .wp-block-cover.alignfull,
body .entry-content > .wp-block-cover.is-header-image,
body .site-main .wp-block-cover.alignfull,
body .site-main .wp-block-cover.is-header-image {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

body .wp-block-cover.is-header-image img.wp-block-cover__image-background,
body .wp-block-cover.is-header-image video.wp-block-cover__video-background {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

@media (min-width: 1135px) {
  body.home .entry-content > .wp-block-cover.is-header-image,
  body.home .site-main .wp-block-cover.is-header-image {
    min-height: 430px !important;
    height: 430px !important;
  }

  body:not(.home) .entry-content > .wp-block-cover.is-header-image,
  body:not(.home) .site-main .wp-block-cover.is-header-image {
    min-height: 335px !important;
    height: 335px !important;
  }
}

/* Startseite: Claim und Button konsequent links unten */
body.home .wp-block-cover.is-header-image {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
}

body.home .wp-block-cover.is-header-image .wp-block-cover__inner-container {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 4rem 4rem 4rem !important;
  box-sizing: border-box !important;
  display: block !important;
  text-align: left !important;
}

body.home .wp-block-cover.is-header-image .wp-block-cover__inner-container > *,
body.home .wp-block-cover.is-header-image .wp-block-group,
body.home .wp-block-cover.is-header-image .wp-block-group__inner-container,
body.home .wp-block-cover.is-header-image .is-layout-constrained > * {
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
  max-width: 760px !important;
}

body.home .wp-block-cover.is-header-image .wp-block-buttons,
body.home .wp-block-cover.is-header-image .wp-block-button {
  justify-content: flex-start !important;
  text-align: left !important;
}

/* Abstand nach dem Hero deutlich näher an der HTML-Version */
body.home .entry-content > .wp-block-cover.is-header-image + *,
body .entry-content > .wp-block-cover.is-header-image + * {
  margin-top: 0 !important;
  padding-top: clamp(5.5rem, 5vw, 8rem) !important;
}

@media (min-width: 840px) {
  body .entry-content > .wp-block-group,
  body .wp-block-group {
    padding-top: clamp(4rem, 4vw, 7rem) !important;
    padding-bottom: clamp(4rem, 4vw, 7rem) !important;
  }

  body .entry-content > .wp-block-cover.is-header-image + .wp-block-group {
    padding-top: clamp(5.5rem, 5vw, 8rem) !important;
  }
}

/* Falls WordPress Block-Gap zwischen Hero und nächstem Block setzt */
body .entry-content.is-layout-flow > * + *,
body .entry-content.is-layout-constrained > * + * {
  margin-block-start: 0 !important;
}


/* ============================================================
   09 – HOTFIX V4: STARTSEITEN-HERO WIE HTML-VERSION
   ============================================================
   Ziel:
   - Hero direkt unter dem Header, ohne weißen Abstand
   - Bild wieder volle Browserbreite
   - Text nicht mehr am Rand abgeschnitten
   - Text links unten wie in der HTML-Abkauf-Version
   - Kein übergroßer Leerraum nach dem Hero
   ============================================================ */

/* Grundproblem aus v3 korrigieren: entry-content darf nicht selbst 100vw breit sein,
   weil die alignfull-Berechnung sonst links aus dem Viewport rutschen kann. */
.entry-content {
  max-width: none !important;
  width: 100% !important;
}

/* Der erste Cover-Block auf der Startseite ist unser Hero. */
.home .entry-content > .wp-block-cover:first-child,
.home .entry-content > .wp-block-cover.alignfull:first-child,
.home .entry-content > .is-header-image.wp-block-cover:first-child {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  min-height: clamp(380px, 30vw, 470px) !important;
  margin-top: 0 !important;
  margin-bottom: clamp(4.5rem, 5vw, 7rem) !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  max-width: 100vw !important;
  overflow: hidden !important;
  padding: 0 !important;
  width: 100vw !important;
}

/* WP setzt teilweise globale Abstände auf den ersten Block. Die müssen beim Hero weg. */
.home .entry-content > .wp-block-cover:first-child:first-child {
  margin-block-start: 0 !important;
}

/* Bild sauber über die gesamte Hero-Fläche legen. */
.home .entry-content > .wp-block-cover:first-child .wp-block-cover__image-background,
.home .entry-content > .wp-block-cover:first-child video.wp-block-cover__video-background {
  height: 100% !important;
  left: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
  position: absolute !important;
  top: 0 !important;
  width: 100% !important;
}

/* Textbereich wieder links unten platzieren, aber mit sicherem Innenabstand,
   damit die Schrift nicht mehr links abgeschnitten wird. */
.home .entry-content > .wp-block-cover:first-child .wp-block-cover__inner-container {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  margin: 0 !important;
  max-width: none !important;
  min-height: clamp(380px, 30vw, 470px) !important;
  padding: 0 4rem 5.2rem clamp(3rem, 3vw, 5rem) !important;
  position: relative !important;
  transform: none !important;
  width: 100% !important;
}

.home .entry-content > .wp-block-cover:first-child h1,
.home .entry-content > .wp-block-cover:first-child h2,
.home .entry-content > .wp-block-cover:first-child .wp-block-heading {
  color: #fff !important;
  font-size: clamp(3rem, 3.2vw, 5.2rem) !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
  margin: 0 0 1.8rem 0 !important;
  max-width: 760px !important;
  text-align: left !important;
}

.home .entry-content > .wp-block-cover:first-child .wp-block-buttons,
.home .entry-content > .wp-block-cover:first-child .wp-block-button {
  margin: 0 !important;
}

.home .entry-content > .wp-block-cover:first-child .wp-block-button__link {
  font-size: 1.5rem !important;
  line-height: 1.2 !important;
  padding: 1.2rem 2rem !important;
}

/* Content nach dem Hero kompakter und näher an der HTML-Version. */
.home .entry-content > .wp-block-cover:first-child + * {
  margin-top: 0 !important;
}

.home .entry-content > .wp-block-group:not(.alignfull),
.home .entry-content > .wp-block-columns:not(.alignfull) {
  max-width: 1000px !important;
}

/* Auf Tablet/Mobile darf der Hero höher bleiben, damit Text und Button sauber passen. */
@media (max-width: 839px) {
  .home .entry-content > .wp-block-cover:first-child,
  .home .entry-content > .wp-block-cover:first-child .wp-block-cover__inner-container {
    min-height: 420px !important;
  }

  .home .entry-content > .wp-block-cover:first-child .wp-block-cover__inner-container {
    padding: 0 2rem 3.5rem 2rem !important;
  }
}


/* ============================================================
   11 – HOTFIX V5: HERO-ABGLEICH GEGEN HTML-ORIGINAL
   ============================================================
   Änderungen:
   - Admin-Bar verursacht keinen zusätzlichen weißen Abstand mehr
     (JS schreibt jetzt die echte Header-Höhe, nicht viewport-bottom).
   - Hero startet direkt unter dem Header.
   - Hero-Text bekommt wieder sicheren linken Innenabstand.
   - Überschrift läuft wie im Original auf zwei Zeilen.
   - Hero-Höhe wird auf Desktop wieder näher an der HTML-Version gesetzt.
   ============================================================ */

body.admin-bar .site-content,
body .site-content {
  margin-top: var(--rhino-header-height, 0px) !important;
}

.home .entry-content > .wp-block-cover:first-child,
.home .entry-content > .wp-block-cover.alignfull:first-child,
.home .entry-content > .is-header-image.wp-block-cover:first-child {
  height: clamp(440px, 31vw, 500px) !important;
  min-height: clamp(440px, 31vw, 500px) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

.home .entry-content > .wp-block-cover:first-child .wp-block-cover__inner-container,
body.home .wp-block-cover.is-header-image .wp-block-cover__inner-container {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  min-height: clamp(440px, 31vw, 500px) !important;
  padding: 0 4rem 5.6rem clamp(3.2rem, 2.2vw, 4.2rem) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  text-align: left !important;
}

.home .entry-content > .wp-block-cover:first-child h1,
.home .entry-content > .wp-block-cover:first-child h2,
.home .entry-content > .wp-block-cover:first-child .wp-block-heading,
body.home .wp-block-cover.is-header-image h1,
body.home .wp-block-cover.is-header-image h2,
body.home .wp-block-cover.is-header-image .wp-block-heading {
  max-width: 920px !important;
  font-size: clamp(3.8rem, 2.7vw, 4.7rem) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 1.6rem 0 !important;
  text-align: left !important;
}

.home .entry-content > .wp-block-cover:first-child .wp-block-button__link,
body.home .wp-block-cover.is-header-image .wp-block-button__link {
  font-size: 1.45rem !important;
  padding: 1.15rem 1.9rem !important;
}

.home .entry-content > .wp-block-cover:first-child + *,
.home .entry-content > .wp-block-cover.is-header-image + * {
  margin-top: 0 !important;
  padding-top: clamp(6.5rem, 5.7vw, 9rem) !important;
}

@media (max-width: 839px) {
  .home .entry-content > .wp-block-cover:first-child,
  .home .entry-content > .wp-block-cover:first-child .wp-block-cover__inner-container {
    height: auto !important;
    min-height: 440px !important;
  }

  .home .entry-content > .wp-block-cover:first-child .wp-block-cover__inner-container,
  body.home .wp-block-cover.is-header-image .wp-block-cover__inner-container {
    padding: 0 2rem 3.5rem 2rem !important;
  }

  .home .entry-content > .wp-block-cover:first-child h1,
  .home .entry-content > .wp-block-cover:first-child h2,
  .home .entry-content > .wp-block-cover:first-child .wp-block-heading {
    font-size: clamp(3rem, 8vw, 4rem) !important;
    max-width: 100% !important;
  }
}


/* ============================================================
   12 – HOTFIX V6: STARTSEITE GEGEN LIVE-HTML FINALISIEREN
   ============================================================
   Ziel nach Screenshot-Vergleich:
   - Header bleibt wie in v5, weil Logo und Menü jetzt passen.
   - Hero darf NICHT mehr über negative 100vw-Ränder laufen, weil dadurch
     der Claim links angeschnitten wurde.
   - Hero sitzt direkt unter dem Header ohne weißen Zwischenraum.
   - Claim sitzt wie im HTML-Original links unten mit sicherem Innenabstand.
   - Hero-Bild wird etwas höher und voller dargestellt.
   - Erster Inhaltsblock rückt näher an den Hero.
   ============================================================ */

body.home .site-content,
body.home main,
body.home article,
body.home .entry-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.home .entry-content {
  width: 100% !important;
  max-width: none !important;
  overflow: visible !important;
}

body.home .entry-content > .wp-block-cover:first-child,
body.home .entry-content > .wp-block-cover.alignfull:first-child,
body.home .entry-content > .wp-block-cover.is-header-image:first-child,
body.home .entry-content > .is-header-image.wp-block-cover:first-child {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  height: clamp(470px, 30.5vw, 540px) !important;
  min-height: clamp(470px, 30.5vw, 540px) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: stretch !important;
}

body.home .entry-content > .wp-block-cover:first-child .wp-block-cover__image-background,
body.home .entry-content > .wp-block-cover:first-child video.wp-block-cover__video-background,
body.home .entry-content > .wp-block-cover.is-header-image:first-child .wp-block-cover__image-background {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

body.home .entry-content > .wp-block-cover:first-child::before,
body.home .entry-content > .wp-block-cover:first-child .wp-block-cover__background {
  opacity: .45 !important;
}

body.home .entry-content > .wp-block-cover:first-child .wp-block-cover__inner-container,
body.home .entry-content > .wp-block-cover.is-header-image:first-child .wp-block-cover__inner-container,
body.home .wp-block-cover.is-header-image .wp-block-cover__inner-container {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 clamp(2.8rem, 2.4vw, 4.8rem) clamp(4.2rem, 4.1vw, 6.4rem) clamp(3.2rem, 2.2vw, 4.2rem) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  text-align: left !important;
  transform: none !important;
}

body.home .entry-content > .wp-block-cover:first-child h1,
body.home .entry-content > .wp-block-cover:first-child h2,
body.home .entry-content > .wp-block-cover:first-child .wp-block-heading,
body.home .wp-block-cover.is-header-image h1,
body.home .wp-block-cover.is-header-image h2,
body.home .wp-block-cover.is-header-image .wp-block-heading {
  box-sizing: border-box !important;
  color: #fff !important;
  display: block !important;
  width: auto !important;
  max-width: 820px !important;
  margin: 0 0 1.6rem 0 !important;
  padding: 0 !important;
  font-size: clamp(3.7rem, 3.05vw, 5.4rem) !important;
  font-weight: 800 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.02em !important;
  text-align: left !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

body.home .entry-content > .wp-block-cover:first-child .wp-block-buttons,
body.home .entry-content > .wp-block-cover:first-child .wp-block-button,
body.home .wp-block-cover.is-header-image .wp-block-buttons,
body.home .wp-block-cover.is-header-image .wp-block-button {
  margin: 0 !important;
  padding: 0 !important;
  justify-content: flex-start !important;
}

body.home .entry-content > .wp-block-cover:first-child .wp-block-button__link,
body.home .wp-block-cover.is-header-image .wp-block-button__link {
  font-size: 1.55rem !important;
  line-height: 1.15 !important;
  padding: 1.25rem 2.1rem !important;
}

body.home .entry-content > .wp-block-cover:first-child + *,
body.home .entry-content > .wp-block-cover.is-header-image:first-child + * {
  margin-top: 0 !important;
  padding-top: clamp(5.8rem, 4.8vw, 7.8rem) !important;
}

body.home .entry-content > .wp-block-group:not(.alignfull),
body.home .entry-content > .wp-block-columns:not(.alignfull) {
  max-width: 1000px !important;
}

@media (min-width: 1600px) {
  body.home .entry-content > .wp-block-cover:first-child,
  body.home .entry-content > .wp-block-cover.alignfull:first-child,
  body.home .entry-content > .wp-block-cover.is-header-image:first-child {
    height: 520px !important;
    min-height: 520px !important;
  }
}

@media (max-width: 839px) {
  body.home .entry-content > .wp-block-cover:first-child,
  body.home .entry-content > .wp-block-cover.alignfull:first-child,
  body.home .entry-content > .wp-block-cover.is-header-image:first-child {
    height: auto !important;
    min-height: 430px !important;
  }

  body.home .entry-content > .wp-block-cover:first-child .wp-block-cover__inner-container,
  body.home .entry-content > .wp-block-cover.is-header-image:first-child .wp-block-cover__inner-container {
    padding: 0 2rem 3.8rem 2rem !important;
  }

  body.home .entry-content > .wp-block-cover:first-child h1,
  body.home .entry-content > .wp-block-cover:first-child h2,
  body.home .entry-content > .wp-block-cover:first-child .wp-block-heading {
    max-width: 100% !important;
    font-size: clamp(3rem, 8vw, 4.1rem) !important;
  }
}


/* ============================================================
   13 – HOTFIX V7: STARTSEITEN-HERO BREITER UND HÖHER
   ============================================================
   Anlass aus Screenshot vom 30.05.:
   - Header/Logo/Menü sitzen jetzt gut und bleiben unberührt.
   - Der Hero ist auf der Startseite noch zu schmal: rechts bleibt ein
     sichtbarer weißer Rand.
   - Der Hero ist auf der Startseite zu niedrig und wirkt dadurch nicht wie
     die HTML-/Live-Version.

   Umsetzung:
   - Der erste Startseitenbereich wird konsequent als Full-Bleed-Bereich
     behandelt.
   - Der eigentliche Cover-/Hero-Block wird unabhängig von Gutenberg-
     Containerbreiten auf echte Viewport-Breite gesetzt.
   - Die Höhe wird auf Desktop deutlich erhöht.
   ============================================================ */

@media (min-width: 840px) {
  /* Der erste Block darf den Hero nicht mehr begrenzen. */
  body.home .entry-content > *:first-child {
    box-sizing: border-box !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Hero selbst: echte Browserbreite, nicht nur Inhalts-/Blockbreite. */
  body.home .site-content .wp-block-cover.is-header-image,
  body.home .site-content .wp-block-cover.alignfull.is-header-image,
  body.home .entry-content > .wp-block-cover:first-child,
  body.home .entry-content > .wp-block-cover:first-of-type {
    box-sizing: border-box !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    height: clamp(500px, 31vw, 560px) !important;
    min-height: clamp(500px, 31vw, 560px) !important;
    max-height: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* Bild füllt die neue Höhe sauber aus. */
  body.home .site-content .wp-block-cover.is-header-image .wp-block-cover__image-background,
  body.home .site-content .wp-block-cover.is-header-image img.wp-block-cover__image-background,
  body.home .site-content .wp-block-cover.is-header-image video.wp-block-cover__video-background {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* Overlay wie Original dunkel lassen, aber nicht weiter verdunkeln als nötig. */
  body.home .site-content .wp-block-cover.is-header-image .wp-block-cover__background,
  body.home .site-content .wp-block-cover.is-header-image::before {
    opacity: .46 !important;
  }

  /* Claim links unten wie Original, mit sicherem Rand und ohne Abschneiden. */
  body.home .site-content .wp-block-cover.is-header-image .wp-block-cover__inner-container,
  body.home .entry-content > .wp-block-cover:first-child .wp-block-cover__inner-container,
  body.home .entry-content > .wp-block-cover:first-of-type .wp-block-cover__inner-container {
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 clamp(4rem, 3vw, 5.6rem) clamp(5rem, 4vw, 6.8rem) clamp(4.2rem, 3vw, 5.8rem) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    text-align: left !important;
  }

  body.home .site-content .wp-block-cover.is-header-image h1,
  body.home .site-content .wp-block-cover.is-header-image h2,
  body.home .site-content .wp-block-cover.is-header-image .wp-block-heading {
    max-width: 900px !important;
    margin: 0 0 1.6rem 0 !important;
    font-size: clamp(4.1rem, 3.05vw, 5.4rem) !important;
    line-height: 1.16 !important;
    letter-spacing: -0.025em !important;
    text-align: left !important;
  }

  body.home .site-content .wp-block-cover.is-header-image .wp-block-button__link {
    font-size: 1.5rem !important;
    padding: 1.15rem 2rem !important;
  }

  /* Erster Inhaltsblock nach dem höheren Hero: Abstand ähnlich Live-HTML. */
  body.home .site-content .wp-block-cover.is-header-image + *,
  body.home .entry-content > *:first-child + * {
    margin-top: 0 !important;
    padding-top: clamp(7rem, 5.2vw, 9rem) !important;
  }
}

@media (min-width: 1600px) {
  body.home .site-content .wp-block-cover.is-header-image,
  body.home .entry-content > .wp-block-cover:first-child,
  body.home .entry-content > .wp-block-cover:first-of-type {
    height: 540px !important;
    min-height: 540px !important;
  }
}

@media (max-width: 839px) {
  body.home .site-content .wp-block-cover.is-header-image,
  body.home .entry-content > .wp-block-cover:first-child,
  body.home .entry-content > .wp-block-cover:first-of-type {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    min-height: 460px !important;
  }
}

/* ============================================================
   14 – HOTFIX V8: STARTSEITEN-HERO ORIGINALHÖHE / FULL BLEED
   ============================================================
   Stand nach v7:
   - Header, Logo und Menü sitzen gut.
   - Der Startseiten-Hero ist noch zu flach bzw. wirkt zu schmal.
   - Die HTML-/Live-Seite zeigt den Hero deutlich höher; im Inspector
     ist der Cover-Block als wp-block-cover / is-header-image erkennbar.

   Ziel:
   - Nur Startseite anfassen.
   - Header nicht verändern.
   - Hero bekommt echte Full-Bleed-Breite und eine feste Desktop-Höhe,
     nahe an der Originalseite.
   - Bild, Picture und Overlay werden auf die volle Hero-Höhe gezwungen.
   ============================================================ */

@media (min-width: 840px) {
  body.home article,
  body.home .hentry,
  body.home .entry,
  body.home .entry-content,
  body.home .site-main,
  body.home #primary,
  body.home #content,
  body.home .site-content {
    overflow: visible !important;
  }

  body.home .entry-content > .wp-block-cover.is-header-image:first-child,
  body.home .entry-content > .wp-block-cover.alignfull.is-header-image:first-child,
  body.home .site-main .wp-block-cover.is-header-image:first-of-type,
  body.home main .wp-block-cover.is-header-image:first-of-type,
  body.home .wp-block-cover.is-header-image:first-of-type {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    position: relative !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    height: clamp(560px, 34vw, 640px) !important;
    min-height: clamp(560px, 34vw, 640px) !important;
    max-height: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 0 !important;
    overflow: hidden !important;
    aspect-ratio: auto !important;
  }

  body.home .wp-block-cover.is-header-image:first-of-type picture,
  body.home .wp-block-cover.is-header-image:first-of-type img.wp-block-cover__image-background,
  body.home .wp-block-cover.is-header-image:first-of-type .wp-block-cover__image-background,
  body.home .wp-block-cover.is-header-image:first-of-type video.wp-block-cover__video-background {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  body.home .wp-block-cover.is-header-image:first-of-type .wp-block-cover__background,
  body.home .wp-block-cover.is-header-image:first-of-type::before {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: .50 !important;
  }

  body.home .wp-block-cover.is-header-image:first-of-type .wp-block-cover__inner-container {
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 4.8rem 7.2rem 4.8rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    text-align: left !important;
  }

  body.home .wp-block-cover.is-header-image:first-of-type h1,
  body.home .wp-block-cover.is-header-image:first-of-type h2,
  body.home .wp-block-cover.is-header-image:first-of-type .wp-block-heading {
    max-width: 900px !important;
    margin: 0 0 1.6rem 0 !important;
    font-size: clamp(4.2rem, 3.2vw, 5.8rem) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.025em !important;
  }

  body.home .wp-block-cover.is-header-image:first-of-type .wp-block-button__link {
    font-size: 1.5rem !important;
    padding: 1.2rem 2.15rem !important;
  }

  body.home .wp-block-cover.is-header-image:first-of-type + *,
  body.home .entry-content > .wp-block-cover.is-header-image:first-child + * {
    margin-top: 0 !important;
    padding-top: clamp(6.4rem, 5vw, 8.2rem) !important;
  }
}

@media (min-width: 1600px) {
  body.home .wp-block-cover.is-header-image:first-of-type,
  body.home .entry-content > .wp-block-cover.is-header-image:first-child {
    height: 620px !important;
    min-height: 620px !important;
  }
}

@media (min-width: 2200px) {
  body.home .wp-block-cover.is-header-image:first-of-type,
  body.home .entry-content > .wp-block-cover.is-header-image:first-child {
    height: 660px !important;
    min-height: 660px !important;
  }
}

/* ============================================================
   15 – HOTFIX V9: STARTSEITEN-HERO NÄHER AN LIVE-HTML
   ============================================================
   Stand nach v8 / Live-Vergleich:
   - Header, Logo und Menü sitzen gut und bleiben unverändert.
   - Der Startseiten-Hero muss optisch wieder wie die HTML-Seite wirken:
     volle Breite, höher, kein Container-Rand, Claim links unten.
   - Die Live-HTML-Seite zeigt im Inspector eine Hero-Bildhöhe von ca. 495px
     bei reduzierter DevTools-Breite. Auf großen Desktopbreiten darf der
     Hero deshalb moderat höher laufen.
   ============================================================ */

@media (min-width: 840px) {
  body.home,
  body.home #page,
  body.home .site,
  body.home .site-content,
  body.home #content,
  body.home #primary,
  body.home main,
  body.home .site-main,
  body.home article,
  body.home .entry-content {
    overflow-x: clip !important;
  }

  body.home .site-content,
  body.home #content,
  body.home #primary,
  body.home main,
  body.home .site-main,
  body.home article,
  body.home .entry-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  body.home .entry-content > .wp-block-cover.is-header-image:first-child,
  body.home .entry-content > .wp-block-cover.alignfull.is-header-image:first-child,
  body.home .site-main .wp-block-cover.is-header-image:first-of-type,
  body.home main .wp-block-cover.is-header-image:first-of-type,
  body.home .wp-block-cover.alignfull.is-header-image:first-of-type,
  body.home .wp-block-cover.is-header-image:first-of-type {
    box-sizing: border-box !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    height: clamp(500px, 30vw, 560px) !important;
    min-height: clamp(500px, 30vw, 560px) !important;
    max-height: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    padding: 0 !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
    aspect-ratio: auto !important;
  }

  body.home .wp-block-cover.is-header-image:first-of-type > picture,
  body.home .wp-block-cover.is-header-image:first-of-type > img.wp-block-cover__image-background,
  body.home .wp-block-cover.is-header-image:first-of-type .wp-block-cover__image-background,
  body.home .wp-block-cover.is-header-image:first-of-type video.wp-block-cover__video-background {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  body.home .wp-block-cover.is-header-image:first-of-type .wp-block-cover__background,
  body.home .wp-block-cover.is-header-image:first-of-type::before {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  body.home .wp-block-cover.is-header-image:first-of-type .wp-block-cover__inner-container {
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 4.2rem 6.1rem 4.2rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    text-align: left !important;
  }

  body.home .wp-block-cover.is-header-image:first-of-type h1,
  body.home .wp-block-cover.is-header-image:first-of-type h2,
  body.home .wp-block-cover.is-header-image:first-of-type .wp-block-heading {
    max-width: 900px !important;
    margin: 0 0 1.45rem 0 !important;
    font-size: clamp(4.15rem, 3vw, 5.55rem) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.025em !important;
    text-align: left !important;
  }

  body.home .wp-block-cover.is-header-image:first-of-type .wp-block-button__link {
    font-size: 1.45rem !important;
    line-height: 1.2 !important;
    padding: 1.1rem 2.05rem !important;
  }

  body.home .wp-block-cover.is-header-image:first-of-type + *,
  body.home .entry-content > .wp-block-cover.is-header-image:first-child + * {
    margin-top: 0 !important;
    padding-top: clamp(6.7rem, 5vw, 8.4rem) !important;
  }
}

@media (min-width: 1600px) {
  body.home .wp-block-cover.is-header-image:first-of-type,
  body.home .entry-content > .wp-block-cover.is-header-image:first-child {
    height: 560px !important;
    min-height: 560px !important;
  }
}

@media (min-width: 2200px) {
  body.home .wp-block-cover.is-header-image:first-of-type,
  body.home .entry-content > .wp-block-cover.is-header-image:first-child {
    height: 590px !important;
    min-height: 590px !important;
  }
}

@media (max-width: 839px) {
  body.home .wp-block-cover.is-header-image:first-of-type,
  body.home .entry-content > .wp-block-cover.is-header-image:first-child {
    min-height: 460px !important;
  }
}


/* ============================================================
   16 – HOTFIX V10: FIXED HEADER DARF DEN HERO NICHT ÜBERDECKEN
   ============================================================
   Problem nach v9:
   - Auf der Startseite wurde .site-content später wieder auf margin-top: 0 gesetzt.
   - Weil der Header fixed ist, lag der Hero dadurch teilweise unter dem vollen Header.
   - Beim Scrollen schrumpft der Header; der Content darf dabei nicht nach oben/unten springen.

   Lösung:
   - Der Content bekommt einen stabilen Header-Spacer.
   - Dieser Spacer orientiert sich an der größten gemessenen Headerhöhe.
   - Die Scroll-Verkleinerung des Headers verändert nur den Header selbst, nicht die Hero-Position.
   ============================================================ */

body .site-content,
body.home .site-content,
body.home #content {
  margin-top: var(--rhino-header-space, var(--rhino-header-height, 0px)) !important;
}

body.home #primary,
body.home main,
body.home .site-main,
body.home article,
body.home .entry-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

@media (min-width: 840px) {
  body.home .entry-content > .wp-block-cover.is-header-image:first-child,
  body.home .entry-content > .wp-block-cover.alignfull.is-header-image:first-child,
  body.home .site-main .wp-block-cover.is-header-image:first-of-type,
  body.home main .wp-block-cover.is-header-image:first-of-type,
  body.home .wp-block-cover.alignfull.is-header-image:first-of-type,
  body.home .wp-block-cover.is-header-image:first-of-type {
    margin-top: 0 !important;
    height: clamp(560px, 34vw, 640px) !important;
    min-height: clamp(560px, 34vw, 640px) !important;
  }
}

@media (min-width: 1600px) {
  body.home .wp-block-cover.is-header-image:first-of-type,
  body.home .entry-content > .wp-block-cover.is-header-image:first-child {
    height: 620px !important;
    min-height: 620px !important;
  }
}


/* ============================================================
   17 – HOTFIX V11: STARTSEITEN-CONTAINER AN ORIGINAL ANGLEICHEN
   ============================================================
   Stand nach v10:
   - Header und Hero sitzen jetzt gut und bleiben unangetastet.
   - Die sichtbaren Unterschiede liegen in den Inhaltscontainern:
     1) dunkler CTA-Block war in WordPress zu schmal/boxed,
     2) Media-Text/Karriere-Block war zu schmal,
     3) Karriere-Block war gegenüber der HTML-Seite gespiegelt,
     4) Inhaltskarten brauchten gleiche Bild-/Texthöhen.
   ============================================================ */

:root {
  --rhino-content-container: 1180px;
  --rhino-card-container: 1120px;
  --rhino-container-side: clamp(2.4rem, 4vw, 5.6rem);
}

/* 17.1 – Normale Startseiten-Container nach dem Hero breiter und einheitlicher. */
body.home .entry-content > .wp-block-group:not(.alignfull),
body.home .entry-content > .wp-block-columns:not(.alignfull),
body.home .entry-content > .wp-block-media-text:not(.alignfull) {
  width: calc(100% - (2 * var(--rhino-container-side))) !important;
  max-width: var(--rhino-content-container) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

body.home .entry-content > .wp-block-group:not(.alignfull) > .wp-block-group__inner-container,
body.home .entry-content > .wp-block-group.is-layout-constrained > *:not(.alignfull) {
  max-width: var(--rhino-content-container) !important;
}

/* 17.2 – Dunkler CTA-Block: im Original ist das ein breiter Abschnitt, kein kleiner Kasten. */
body.home .entry-content > .wp-block-group.has-background[style*="47, 41, 27"],
body.home .entry-content > .wp-block-group.has-background[style*="#2f291b"],
body.home .entry-content > .wp-block-group.has-background[style*="#2F291B"],
body.home .entry-content > .wp-block-group.has-rh-color-footer-background-color,
body.home .entry-content > .wp-block-group.has-rh-color-header-background-color {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: clamp(5.2rem, 4.5vw, 7.2rem) var(--rhino-container-side) !important;
  box-sizing: border-box !important;
}

body.home .entry-content > .wp-block-group.has-background[style*="47, 41, 27"] > .wp-block-group__inner-container,
body.home .entry-content > .wp-block-group.has-background[style*="#2f291b"] > .wp-block-group__inner-container,
body.home .entry-content > .wp-block-group.has-background[style*="#2F291B"] > .wp-block-group__inner-container,
body.home .entry-content > .wp-block-group.has-rh-color-footer-background-color > .wp-block-group__inner-container,
body.home .entry-content > .wp-block-group.has-rh-color-header-background-color > .wp-block-group__inner-container {
  max-width: 820px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

body.home .entry-content > .wp-block-group.has-background[style*="47, 41, 27"] + .wp-block-media-text,
body.home .entry-content > .wp-block-group.has-background[style*="#2f291b"] + .wp-block-media-text,
body.home .entry-content > .wp-block-group.has-rh-color-footer-background-color + .wp-block-media-text,
body.home .entry-content > .wp-block-group.has-rh-color-header-background-color + .wp-block-media-text {
  margin-top: clamp(6rem, 5vw, 8.5rem) !important;
}

/* 17.3 – Media-Text-Karten wie im HTML: breiter, gleiche Höhen, Bild und Text bündig. */
body.home .entry-content .wp-block-media-text {
  max-width: var(--rhino-card-container) !important;
  width: calc(100% - (2 * var(--rhino-container-side))) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  align-items: stretch !important;
  gap: 0 !important;
  box-sizing: border-box !important;
}

@media (min-width: 840px) {
  body.home .entry-content .wp-block-media-text {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  /* Karriere-Block: WordPress hatte Text links/Bild rechts; Original ist Bild links/Text rechts. */
  body.home .entry-content .wp-block-media-text.has-media-on-the-right {
    grid-template-areas: "media-text-media media-text-content" !important;
  }

  body.home .entry-content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
    grid-area: media-text-media !important;
  }

  body.home .entry-content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
    grid-area: media-text-content !important;
  }
}

body.home .entry-content .wp-block-media-text .wp-block-media-text__media,
body.home .entry-content .wp-block-media-text .wp-block-media-text__content {
  min-height: clamp(320px, 21vw, 390px) !important;
}

body.home .entry-content .wp-block-media-text .wp-block-media-text__media {
  display: flex !important;
  align-items: stretch !important;
  overflow: hidden !important;
}

body.home .entry-content .wp-block-media-text .wp-block-media-text__media img {
  width: 100% !important;
  height: 100% !important;
  min-height: clamp(320px, 21vw, 390px) !important;
  object-fit: cover !important;
  display: block !important;
}

body.home .entry-content .wp-block-media-text .wp-block-media-text__content {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: clamp(3.6rem, 3.6vw, 5.6rem) clamp(3.6rem, 3.8vw, 6.2rem) !important;
  box-sizing: border-box !important;
  background: #fbf7f8 !important;
}

body.home .entry-content .wp-block-media-text .wp-block-media-text__content > :first-child {
  margin-top: 0 !important;
}

body.home .entry-content .wp-block-media-text .wp-block-media-text__content > :last-child {
  margin-bottom: 0 !important;
}

body.home .entry-content .wp-block-media-text .wp-block-media-text__content h2,
body.home .entry-content .wp-block-media-text .wp-block-media-text__content h3,
body.home .entry-content .wp-block-media-text .wp-block-media-text__content .wp-block-heading {
  margin-bottom: 1.6rem !important;
}

/* 17.4 – Zwischenräume der unteren Startseitenblöcke dichter am Original. */
body.home .entry-content > .wp-block-media-text + .wp-block-group,
body.home .entry-content > .wp-block-media-text + .wp-block-columns,
body.home .entry-content > .wp-block-group + .wp-block-media-text,
body.home .entry-content > .wp-block-columns + .wp-block-group {
  margin-top: clamp(6rem, 5vw, 8.5rem) !important;
}

body.home .site-footer {
  margin-top: 0 !important;
}

/* 17.5 – Mobil: wieder sauber stapeln, ohne erzwungene Spiegelung. */
@media (max-width: 839px) {
  body.home .entry-content > .wp-block-group:not(.alignfull),
  body.home .entry-content > .wp-block-columns:not(.alignfull),
  body.home .entry-content > .wp-block-media-text:not(.alignfull),
  body.home .entry-content .wp-block-media-text {
    width: calc(100% - 3.2rem) !important;
    max-width: none !important;
  }

  body.home .entry-content .wp-block-media-text .wp-block-media-text__media,
  body.home .entry-content .wp-block-media-text .wp-block-media-text__content,
  body.home .entry-content .wp-block-media-text .wp-block-media-text__media img {
    min-height: auto !important;
  }

  body.home .entry-content .wp-block-media-text .wp-block-media-text__media img {
    height: auto !important;
  }

  body.home .entry-content .wp-block-media-text .wp-block-media-text__content {
    padding: 3.2rem 2.4rem !important;
  }
}


/* ============================================================
   18 – HOTFIX V12: STARTSEITEN-CONTENT-CONTAINER WIE HTML
   ============================================================
   Stand nach Screenshot-Abgleich:
   - Header und Hero sind korrekt und bleiben unangetastet.
   - Abweichungen liegen nur noch in den darunterliegenden Bereichen:
     1) 4-Schritte-Bereich: WordPress hatte keine Timeline-Optik.
     2) CTA: WordPress war boxed statt vollbreit.
     3) Karriere-Karte: WordPress war zu schmal und teilweise falsch gespiegelt.
   ============================================================ */

@media (min-width: 840px) {
  :root {
    --rhino-section-inner: 1040px;
    --rhino-card-inner: 1120px;
    --rhino-side-gap: clamp(3rem, 4vw, 6rem);
  }

  /* 18.1 – Standardbreite für die Startseitenbereiche nach dem Hero. */
  body.home .entry-content > .wp-block-group:not(.alignfull):not(.has-background),
  body.home .entry-content > .wp-block-columns:not(.alignfull),
  body.home .entry-content > .wp-block-media-text:not(.alignfull),
  body.home .entry-content .wp-block-group:not(.alignfull):not(.has-background) > .wp-block-group__inner-container {
    width: min(var(--rhino-section-inner), calc(100vw - (2 * var(--rhino-side-gap)))) !important;
    max-width: min(var(--rhino-section-inner), calc(100vw - (2 * var(--rhino-side-gap)))) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* 18.2 – 4-Schritte-Block: Abstand/Optik wie Original, inkl. grüner Verbindungslinie. */
  body.home .entry-content .wp-block-columns.has-4-columns,
  body.home .entry-content .wp-block-columns.timeline,
  body.home .entry-content .wp-block-columns:has(> .wp-block-column:nth-child(4)):not(:has(img)) {
    position: relative !important;
    width: min(980px, calc(100vw - 10rem)) !important;
    max-width: min(980px, calc(100vw - 10rem)) !important;
    margin: 2.2rem auto 0 auto !important;
    padding-top: 8.6rem !important;
    gap: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: start !important;
  }

  body.home .entry-content .wp-block-columns.has-4-columns::before,
  body.home .entry-content .wp-block-columns.timeline::before,
  body.home .entry-content .wp-block-columns:has(> .wp-block-column:nth-child(4)):not(:has(img))::before {
    content: "" !important;
    position: absolute !important;
    left: calc(12.5% + 3.8rem) !important;
    right: calc(12.5% + 3.8rem) !important;
    top: 4.1rem !important;
    height: 3px !important;
    background: var(--rh--color--ci--secondary) !important;
    z-index: 0 !important;
  }

  body.home .entry-content .wp-block-columns.has-4-columns > .wp-block-column,
  body.home .entry-content .wp-block-columns.timeline > .wp-block-column,
  body.home .entry-content .wp-block-columns:has(> .wp-block-column:nth-child(4)):not(:has(img)) > .wp-block-column {
    position: relative !important;
    padding: 0 .8rem !important;
    text-align: center !important;
    z-index: 1 !important;
  }

  /* Falls die alten RH-Icon-Blöcke nicht im neuen WordPress installiert sind,
     erzeugen wir die runden Timeline-Icons rein über CSS. */
  body.home .entry-content .wp-block-columns:has(> .wp-block-column:nth-child(4)):not(:has(.rh-block-icon)) > .wp-block-column::before {
    align-items: center !important;
    background: var(--rh--color--ci--secondary) !important;
    border-radius: 50% !important;
    color: #111 !important;
    display: flex !important;
    font-size: 3rem !important;
    font-weight: 800 !important;
    height: 7.6rem !important;
    justify-content: center !important;
    left: 50% !important;
    line-height: 1 !important;
    position: absolute !important;
    top: -8.6rem !important;
    transform: translateX(-50%) !important;
    width: 7.6rem !important;
    z-index: 2 !important;
  }

  body.home .entry-content .wp-block-columns:has(> .wp-block-column:nth-child(4)):not(:has(.rh-block-icon)) > .wp-block-column:nth-child(1)::before { content: "□" !important; }
  body.home .entry-content .wp-block-columns:has(> .wp-block-column:nth-child(4)):not(:has(.rh-block-icon)) > .wp-block-column:nth-child(2)::before { content: "○" !important; }
  body.home .entry-content .wp-block-columns:has(> .wp-block-column:nth-child(4)):not(:has(.rh-block-icon)) > .wp-block-column:nth-child(3)::before { content: "▤" !important; }
  body.home .entry-content .wp-block-columns:has(> .wp-block-column:nth-child(4)):not(:has(.rh-block-icon)) > .wp-block-column:nth-child(4)::before { content: "▦" !important; }

  body.home .entry-content .wp-block-columns.has-4-columns p,
  body.home .entry-content .wp-block-columns.timeline p,
  body.home .entry-content .wp-block-columns:has(> .wp-block-column:nth-child(4)):not(:has(img)) p {
    font-size: 1.6rem !important;
    line-height: 1.45 !important;
    margin: 0 !important;
    text-align: center !important;
  }

  /* Wenn echte RH-Icons vorhanden sind: Originalgröße und Linie sauber halten. */
  body.home .entry-content .wp-block-columns .wp-block-rh-block-icon-list,
  body.home .entry-content .wp-block-columns .rh-block-icon {
    position: relative !important;
    z-index: 2 !important;
  }

  body.home .entry-content .wp-block-columns .rh-block-icon.is-style-rounded,
  body.home .entry-content .wp-block-columns .rh-block-icon {
    background: var(--rh--color--ci--secondary) !important;
    border-radius: 50% !important;
  }

  /* 18.3 – CTA-Block zwingend vollbreit wie im HTML-Original. */
  body.home .entry-content .wp-block-rh-cta,
  body.home .entry-content > .wp-block-rh-cta,
  body.home .entry-content .wp-block-group.has-background,
  body.home .entry-content .wp-block-group:has(> p.has-text-align-center + .wp-block-buttons),
  body.home .entry-content .wp-block-group:has(.wp-block-button__link[href^="tel:"]):has(> p.has-text-align-center) {
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    margin-top: clamp(6rem, 5vw, 8rem) !important;
    margin-bottom: clamp(7rem, 5.5vw, 9rem) !important;
    padding: clamp(7rem, 6vw, 10rem) var(--rhino-side-gap) !important;
    box-sizing: border-box !important;
    background: var(--rh--color--header) !important;
    color: #fff !important;
    text-align: center !important;
  }

  body.home .entry-content .wp-block-rh-cta > *,
  body.home .entry-content .wp-block-group.has-background > *,
  body.home .entry-content .wp-block-group:has(> p.has-text-align-center + .wp-block-buttons) > * {
    max-width: 820px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  body.home .entry-content .wp-block-rh-cta p,
  body.home .entry-content .wp-block-group.has-background p,
  body.home .entry-content .wp-block-group:has(> p.has-text-align-center + .wp-block-buttons) p {
    color: #fff !important;
    margin-bottom: 1.8rem !important;
  }

  /* 18.4 – Karriere-Karte exakt als breite Media-Text-Karte: Bild links, Text rechts. */
  body.home .entry-content .wp-block-media-text:has(.wp-block-media-text__media img),
  body.home .entry-content > .wp-block-media-text:has(.wp-block-media-text__media img) {
    width: min(var(--rhino-card-inner), calc(100vw - (2 * var(--rhino-side-gap)))) !important;
    max-width: min(var(--rhino-card-inner), calc(100vw - (2 * var(--rhino-side-gap)))) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas: "media-text-media media-text-content" !important;
    gap: 0 !important;
    align-items: stretch !important;
    background: #fbf7f8 !important;
  }

  body.home .entry-content .wp-block-media-text:has(.wp-block-media-text__media img) .wp-block-media-text__media {
    grid-area: media-text-media !important;
    min-height: 360px !important;
    height: auto !important;
    overflow: hidden !important;
  }

  body.home .entry-content .wp-block-media-text:has(.wp-block-media-text__media img) .wp-block-media-text__content {
    grid-area: media-text-content !important;
    min-height: 360px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: clamp(4rem, 4vw, 6rem) clamp(4rem, 4.3vw, 6.5rem) !important;
    background: #fbf7f8 !important;
  }

  body.home .entry-content .wp-block-media-text:has(.wp-block-media-text__media img) .wp-block-media-text__media img,
  body.home .entry-content .wp-block-media-text:has(.wp-block-media-text__media img) .wp-block-media-text__media picture {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 360px !important;
    object-fit: cover !important;
  }

  body.home .entry-content .wp-block-media-text:has(.wp-block-media-text__media img) .wp-block-media-text__content > :first-child {
    margin-top: 0 !important;
  }

  body.home .entry-content .wp-block-media-text:has(.wp-block-media-text__media img) .wp-block-media-text__content > :last-child {
    margin-bottom: 0 !important;
  }
}

@media (max-width: 839px) {
  body.home .entry-content .wp-block-rh-cta,
  body.home .entry-content .wp-block-group.has-background,
  body.home .entry-content .wp-block-group:has(> p.has-text-align-center + .wp-block-buttons) {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 5rem 2rem !important;
    background: var(--rh--color--header) !important;
  }

  body.home .entry-content .wp-block-columns:has(> .wp-block-column:nth-child(4)):not(:has(img)) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
}


/* ============================================================
   19 – HOTFIX V13: ORIGINAL-CONTAINER UNTERHALB HERO
   ============================================================
   Wichtig:
   - Header und Hero bleiben unangetastet.
   - Diese Regeln korrigieren nur die Sektionen unterhalb des Heros.
   - Grundlage: Original-RH-Variablen/Typografie aus der Abkauf-Installation.
   ============================================================ */

:root {
  --rh--general--font-size: clamp(1.7rem, 2vw, 1.9rem);
  --rh--general--font-family: 'Lexend', Arial, Helvetica, sans-serif;
  --rh--general--font-weight: 300;
  --rh--general--line-height: 1.8;
  --rh--h2--font-size: clamp(2.6rem, 2vw, 3.5rem);
  --rh--h2--font-weight: 700;
  --rh--h2--line-height: 1.3;
  --rhino-content-inner: min(1040px, calc(100vw - 8rem));
  --rhino-card-width: min(1120px, calc(100vw - 8rem));
}

body, button, input, select, textarea {
  font-family: var(--rh--general--font-family) !important;
  font-size: var(--rh--general--font-size);
  font-weight: var(--rh--general--font-weight);
  line-height: var(--rh--general--line-height);
}

body.home .entry-content h2,
body.home .entry-content .wp-block-heading {
  font-size: var(--rh--h2--font-size) !important;
  font-weight: var(--rh--h2--font-weight) !important;
  line-height: var(--rh--h2--line-height) !important;
}

@media (min-width: 840px) {
  /* 19.1 – Alle normalen Startseiten-Sektionen bekommen die schmale Original-Mittelachse. */
  body.home .entry-content > .wp-block-group:not(.alignfull):not(:has(> p.has-text-align-center + .wp-block-buttons)):not(:has(.wp-block-media-text__media)),
  body.home .entry-content > .wp-block-columns:not(.alignfull):not(.timeline),
  body.home .entry-content > .wp-block-media-text:not(.alignfull) {
    width: var(--rhino-content-inner) !important;
    max-width: var(--rhino-content-inner) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 19.2 – 4-Schritte-Sektion: eigener weißer Bereich mit sauberem Zentrier-Layout. */
  body.home .entry-content > .wp-block-group:has(.wp-block-columns.timeline),
  body.home .entry-content > .wp-block-group:has(.wp-block-columns.has-4-columns),
  body.home .entry-content > .wp-block-group:has(.wp-block-columns > .wp-block-column:nth-child(4)) {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-top: clamp(7rem, 6vw, 10rem) !important;
    padding-bottom: clamp(8rem, 6vw, 11rem) !important;
    background: #fff !important;
  }

  body.home .entry-content > .wp-block-group:has(.wp-block-columns.timeline) > *,
  body.home .entry-content > .wp-block-group:has(.wp-block-columns.has-4-columns) > *,
  body.home .entry-content > .wp-block-group:has(.wp-block-columns > .wp-block-column:nth-child(4)) > * {
    width: var(--rhino-content-inner) !important;
    max-width: var(--rhino-content-inner) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.home .entry-content .wp-block-columns.timeline,
  body.home .entry-content .wp-block-columns.has-4-columns,
  body.home .entry-content .wp-block-columns:has(> .wp-block-column:nth-child(4)):not(:has(img)) {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    width: min(980px, calc(100vw - 12rem)) !important;
    max-width: min(980px, calc(100vw - 12rem)) !important;
    margin: 2.4rem auto 0 auto !important;
    padding-top: 8rem !important;
  }

  body.home .entry-content .wp-block-columns.timeline::before,
  body.home .entry-content .wp-block-columns.has-4-columns::before,
  body.home .entry-content .wp-block-columns:has(> .wp-block-column:nth-child(4)):not(:has(img))::before {
    content: "" !important;
    position: absolute !important;
    top: 4rem !important;
    left: calc(12.5% + 4rem) !important;
    right: calc(12.5% + 4rem) !important;
    height: 3px !important;
    background: var(--rh--color--ci--secondary) !important;
    z-index: 0 !important;
  }

  body.home .entry-content .wp-block-columns.timeline > .wp-block-column,
  body.home .entry-content .wp-block-columns.has-4-columns > .wp-block-column,
  body.home .entry-content .wp-block-columns:has(> .wp-block-column:nth-child(4)):not(:has(img)) > .wp-block-column {
    position: relative !important;
    z-index: 1 !important;
    text-align: center !important;
    padding-left: .8rem !important;
    padding-right: .8rem !important;
  }

  body.home .entry-content .wp-block-columns.timeline p,
  body.home .entry-content .wp-block-columns.has-4-columns p,
  body.home .entry-content .wp-block-columns:has(> .wp-block-column:nth-child(4)):not(:has(img)) p {
    font-size: 1.6rem !important;
    line-height: 1.45 !important;
    margin: 0 !important;
    text-align: center !important;
  }

  body.home .entry-content .wp-block-columns .wp-block-rh-block-icon-list {
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 2.4rem !important;
    position: absolute !important;
    top: -8rem !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 2 !important;
  }

  body.home .entry-content .wp-block-columns .rh-block-icon,
  body.home .entry-content .wp-block-columns .wp-block-rh-block-icon {
    width: 8rem !important;
    height: 8rem !important;
    border-radius: 50% !important;
    background: var(--rh--color--ci--secondary) !important;
    color: #111 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.home .entry-content .wp-block-columns .rh-block-icon svg,
  body.home .entry-content .wp-block-columns .wp-block-rh-block-icon svg {
    width: 4.2rem !important;
    height: 4.2rem !important;
    fill: currentColor !important;
  }

  /* Fallback, falls die RH-Icon-Blöcke im neuen WordPress fehlen. */
  body.home .entry-content .wp-block-columns:has(> .wp-block-column:nth-child(4)):not(:has(.wp-block-rh-block-icon)) > .wp-block-column::before {
    content: "" !important;
    position: absolute !important;
    top: -8rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 8rem !important;
    height: 8rem !important;
    border-radius: 50% !important;
    background-color: var(--rh--color--ci--secondary) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 4.2rem 4.2rem !important;
    z-index: 2 !important;
  }

  body.home .entry-content .wp-block-columns:has(> .wp-block-column:nth-child(4)):not(:has(.wp-block-rh-block-icon)) > .wp-block-column:nth-child(1)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
  }
  body.home .entry-content .wp-block-columns:has(> .wp-block-column:nth-child(4)):not(:has(.wp-block-rh-block-icon)) > .wp-block-column:nth-child(2)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z'/%3E%3C/svg%3E") !important;
  }
  body.home .entry-content .wp-block-columns:has(> .wp-block-column:nth-child(4)):not(:has(.wp-block-rh-block-icon)) > .wp-block-column:nth-child(3)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M8 13h8'/%3E%3Cpath d='M8 17h6'/%3E%3C/svg%3E") !important;
  }
  body.home .entry-content .wp-block-columns:has(> .wp-block-column:nth-child(4)):not(:has(.wp-block-rh-block-icon)) > .wp-block-column:nth-child(4)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h16'/%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M5 10l2-6h10l2 6'/%3E%3Cpath d='M4 21h16'/%3E%3C/svg%3E") !important;
  }

  /* 19.3 – CTA: wirklich voller dunkler Streifen, nicht boxed. */
  body.home .entry-content > .wp-block-rh-cta.alignfull,
  body.home .entry-content .wp-block-rh-cta,
  body.home .entry-content > .wp-block-group:has(> p.has-text-align-center + .wp-block-buttons),
  body.home .entry-content > .wp-block-group:has(.wp-block-button__link[href^="tel:"]):has(> p.has-text-align-center) {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: clamp(7.5rem, 6vw, 10rem) 4rem !important;
    background: var(--rh--color--header) !important;
    color: #fff !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  body.home .entry-content .wp-block-rh-cta > *,
  body.home .entry-content > .wp-block-group:has(> p.has-text-align-center + .wp-block-buttons) > * {
    max-width: 820px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  body.home .entry-content .wp-block-rh-cta p,
  body.home .entry-content > .wp-block-group:has(> p.has-text-align-center + .wp-block-buttons) p {
    color: #fff !important;
    margin-bottom: 1.8rem !important;
  }

  /* 19.4 – Karriere-Karte: direkt nach CTA, Bild links, Text rechts, Originalbreite. */
  body.home .entry-content > .wp-block-rh-cta + .wp-block-media-text,
  body.home .entry-content > .wp-block-group:has(> p.has-text-align-center + .wp-block-buttons) + .wp-block-media-text,
  body.home .entry-content > .wp-block-media-text:has(.wp-block-media-text__media img) {
    width: var(--rhino-card-width) !important;
    max-width: var(--rhino-card-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: clamp(7rem, 5.5vw, 9rem) !important;
    margin-bottom: clamp(7rem, 5.5vw, 9rem) !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas: "media-text-media media-text-content" !important;
    gap: 0 !important;
    background: #fbf7f8 !important;
    align-items: stretch !important;
  }

  body.home .entry-content > .wp-block-media-text:has(.wp-block-media-text__media img) .wp-block-media-text__media {
    grid-area: media-text-media !important;
    min-height: 360px !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  body.home .entry-content > .wp-block-media-text:has(.wp-block-media-text__media img) .wp-block-media-text__content {
    grid-area: media-text-content !important;
    min-height: 360px !important;
    padding: clamp(4rem, 4vw, 6rem) !important;
    background: #fbf7f8 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  body.home .entry-content > .wp-block-media-text:has(.wp-block-media-text__media img) .wp-block-media-text__media img,
  body.home .entry-content > .wp-block-media-text:has(.wp-block-media-text__media img) .wp-block-media-text__media picture {
    width: 100% !important;
    height: 100% !important;
    min-height: 360px !important;
    object-fit: cover !important;
    display: block !important;
  }

  body.home .entry-content > .wp-block-media-text:has(.wp-block-media-text__media img) h2 {
    margin-top: 0 !important;
    margin-bottom: 2rem !important;
  }
}

@media (max-width: 839px) {
  body.home .entry-content > .wp-block-rh-cta.alignfull,
  body.home .entry-content .wp-block-rh-cta,
  body.home .entry-content > .wp-block-group:has(> p.has-text-align-center + .wp-block-buttons) {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 5rem 2rem !important;
    background: var(--rh--color--header) !important;
    color: #fff !important;
  }
}