/* =========================
   HERO SECTION
========================= */

.hero {
    position: relative;
    min-height: clamp(400px, 52vh, 520px);
    background: #e6e4e0 url('../img/RA-WE_halb.webp') no-repeat 85% bottom / auto 85%;
    overflow:hidden;
}
 
.hero .container {
    height: 100%;
    display: flex;
    align-items: center;
    padding-right: 0;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right,
            rgba(15, 23, 42, 0.70) 0%,
            rgba(15, 23, 42, 0.57) 35%,
            rgba(15, 23, 42, 0.14) 65%,
            rgba(15, 23, 42, 0) 100%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    color: #fff;
    max-width: 600px;
    text-align: left;
    width: 100%;
    overflow: hidden;
    margin-top: 0;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.8s ease forwards;
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero h1 {
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1.10;
    padding-top:30px;
    margin-bottom: 3px;
}

.hero p {
    font-size: 18px;
    margin-bottom: 30px;
    line-height: 1.5;
}

.hero .hero-subline {
    margin-bottom: 14px;
}

.hero-badges {
    display: flex;
    gap: 10px;
    flex-direction: column;
    margin: 14px 0 25px;
    max-width: 200px;
    padding-left: 8px;
}

.hero-badges span {
  position: relative;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}

.hero-badges span::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transition: width 0.25s ease;
}

.hero-badges span:hover {
  color: #fff;
}

.hero-badges span:hover::after {
  width: 0;
}

.hero-badges svg {
    width: 18px;
    height: 18px;
}

.hero-usp {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 25px;
    padding-top: 10px;
}

.mobile-break {
    display: none;
}

/* =========================
   HERO RESPONSIVE
========================= */

/* Hero below the shared desktop breakpoint. */
@media (max-width: 1199px) {
    .hero {
        /* Keep the portrait below the heading and beside the CTA. */
        background-position: right 6px bottom;
        background-size: min(46%, 200px) auto;
    }
    .hero .hero-badges {
        max-width: min(200px, calc(56% - 20px));
        padding-left: 0;
    }
    .hero .hero-badges span {
        font-size: 14px;
        gap: 7px;
    }
    .hero .hero-badges svg {
        flex-shrink: 0;
    }
    .hero .hero-badges span::after {
        width: 90%;
    }
    .hero .hero-badges span:hover::after {
        width: 0;
    }
    .hero .call-button {
        min-width: 0;
        width: min(180px, calc(50.4% - 18px));
        max-width: none;
        padding: 12px;
        gap: 7px;
        font-size: 13px;
    }
    .hero .container {
        align-items: flex-start;
        padding-top: 0;
    }
   .section-trust {
    padding: 35px 0;
  }
    .hero-usp {
        margin-top: 40px;
    }
}

/* Let the portrait scale with the hero on intermediate screens. */
@media (min-width: 768px) and (max-width: 1199px) {
    .hero {
        background-size: auto 85%;
        background-position: 88% bottom;
    }
    .hero .hero-content {
        max-width: 55%;
    }
    .hero .container {
        padding-left: 32px;
        padding-right: 32px;
    }
    .hero .hero-badges {
        max-width: 200px;
    }
    .hero .call-button {
        width: 180px;
    }
}

/* Desktop */
@media (min-width: 1200px) {
    html.updated-page {
        background: #e7e9ec;
    }
    .updated-page body {
        width: min(1200px, calc(100% - 48px));
        height: auto;
        min-height: 100vh;
        margin-inline: auto;
        box-shadow: 0 8px 32px rgba(31, 41, 55, 0.10);
    }
    .updated-page .header {
        width: min(1200px, calc(100% - 48px));
        left: 0;
        right: 0;
        margin-inline: auto;
        transform: none;
    }
    .updated-page .container {
        padding-left: 48px;
        padding-right: 48px;
    }
    .updated-page .header .nav {
        gap: 20px;
    }
    .updated-page .sticky-contact {
        right: max(36px, calc((100% - 1200px) / 2 + 12px));
    }
    .hero {
        max-width: 100%;
        margin-inline: auto;
        background-size: auto 90%;
        background-position: 78% bottom;
    }
}

/* Landscape Sonderfall */
@media (orientation: landscape) and (max-height: 500px) {
    .hero {
        height: auto;
        padding: 50px 0;
    }
    .hero-content {
        margin-top: 0;
    }
}



/* Shared page layout and separate portrait column. */

.updated-page .section-about-premium {
    background-image: none;
}
.updated-page .about-portrait {
    display: none;
}
@media (min-width: 900px) {
    .updated-page .section-about-premium {
        padding-bottom: 0;
    }
    .updated-page .about-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) clamp(240px, 26vw, 320px);
        gap: 40px;
        align-items: end;
    }
    .updated-page .about-text {
        min-width: 0;
        padding-bottom: 40px;
    }
    .updated-page .about-portrait {
        display: block;
        width: 100%;
        height: auto;
        align-self: end;
    }
}
@media (min-width: 768px) and (max-width: 1199px) {
    .updated-page .footer-inner {
        grid-template-columns: 1fr 1fr;
    }
    .updated-page .footer-inner > .footer-col::after {
        display: none;
    }
    .updated-page .section {
        padding-block: 60px;
    }
}
@media (max-width: 1199px) {
    .updated-page .sticky-contact {
        display: none;
    }
}

.updated-page .header .nav a { white-space: nowrap; }
.updated-page .hero-content { padding-bottom: 30px; }
.updated-page .hero h1 { text-shadow: none; }
@media (max-width: 1199px) {
    .updated-page .header .nav { display: none; }
    .updated-page .header .burger { display: flex; }
    .updated-page .intro-grid { grid-template-columns: 1fr; }
    .updated-page .intro-left h2 { text-align: center; }
    .updated-page .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .updated-page .hero-badges span { flex-wrap: wrap; }
    .updated-page .hero-badges a { overflow-wrap: anywhere; }
    .updated-page .hero .hero-buttons { display: block; }
}
@media (max-width: 767px) {
    .updated-page .hero .hero-buttons {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .updated-page .hero .hero-buttons .button {
        width: min(180px, calc(50.4% - 18px));
        min-width: 0;
        margin: 0;
        padding: 12px 8px;
        font-size: 13px;
    }
}

/* New portrait in every compact CTA box, without cropping the head. */
.updated-page .cta-dark-image {
    right: 8px;
    bottom: 0;
    width: 40%;
    height: 88%;
    background-image: url('../img/RA-WE_halb.webp');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;
    opacity: 1;
}

/* Slightly smaller hero headings on phones only. */
@media (max-width: 767px) {
    .hero h1 {
        font-size: clamp(26.5px, calc(5vw - 1.5px), 36.5px);
    }
}

/* Match desktop content gutters on tablet; preserve phone spacing. */
@media (min-width: 768px) and (max-width: 1199px) {
    .updated-page .container,
    .updated-page .hero .container {
        padding-left: 48px;
        padding-right: 48px;
    }
}

/* Stack detail sections at the shared desktop breakpoint. */
@media (min-width: 768px) and (max-width: 1199px) {
    .updated-page .scheidung-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .updated-page .cta-dark {
        margin-top: 0;
        padding: 25px 20px;
    }
    .updated-page .cta-dark-content {
        max-width: min(420px, calc(100% - 150px));
    }
}