/* Startseite: einheitliche Typografie und sparsame rote Markenakzente. */
#main {
    --home-type-display: clamp(3.25rem, 2.25rem + 4.5vw, 6.25rem);
    --home-type-h2: clamp(2.375rem, 1.85rem + 2.2vw, 3.75rem);
    --home-type-h2-compact: clamp(2.125rem, 1.98rem + .65vw, 2.5rem);
    --home-type-h3: clamp(1.45rem, 1.25rem + .8vw, 2.25rem);
    --home-type-lead: clamp(1.125rem, 1.05rem + .3vw, 1.25rem);
    --home-type-body: clamp(1rem, .97rem + .12vw, 1.0625rem);
    --home-type-label: .7rem;
    --home-type-heading: #073f73;
    --home-type-text: #40545f;
    --home-type-accent: #d71920;
    --home-type-accent-text: #b51218
}

/* Textposition des bildfüllenden Startseiten-Heros. */
.hero#top .hero-content {
    position: relative;
    top: -58px
}

.site-header #nav>.home-nav-cta {
    position: relative;
    isolation: isolate;
    display: inline-grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    justify-content: normal;
    inline-size: 195px;
    min-inline-size: 195px;
    min-block-size: 50px;
    gap: 18px;
    overflow: hidden;
    color: #fff;
    background: var(--accent);
    transition: color .3s ease, background-color .3s ease
}

.site-header #nav>.home-nav-cta>span {
    position: relative;
    z-index: 2
}

.site-header #nav>.home-nav-cta .home-nav-cta__label {
    min-width: 0;
    white-space: nowrap;
    letter-spacing: 0;
    transition: letter-spacing .3s ease
}

.site-header #nav>.home-nav-cta::before,
.site-header #nav>.home-nav-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    width: auto;
    height: auto;
    box-sizing: border-box;
    pointer-events: none;
    transform-origin: center;
    transition: opacity .3s ease, transform .3s ease
}

.site-header #nav>.home-nav-cta::before {
    border-block: 1px solid rgba(255, 255, 255, .7);
    opacity: 0;
    transform: scaleX(.1)
}

.site-header #nav>.home-nav-cta::after {
    background: rgba(255, 255, 255, .1);
    opacity: 1;
    transform: scaleX(1)
}

.site-header #nav>.home-nav-cta:focus-visible {
    outline-color: var(--ink)
}

.site-header #nav>.home-nav-cta:focus-visible .home-nav-cta__label {
    letter-spacing: .06em
}

.site-header #nav>.home-nav-cta:focus-visible::before {
    opacity: 1;
    transform: scaleX(1)
}

.site-header #nav>.home-nav-cta:focus-visible::after {
    opacity: 0;
    transform: scaleX(.1)
}

@media (hover:hover) and (pointer:fine) {
    .site-header #nav>.home-nav-cta:hover {
        color: #fff;
        background: var(--accent)
    }

    .site-header #nav>.home-nav-cta:hover .home-nav-cta__label {
        letter-spacing: .06em
    }

    .site-header #nav>.home-nav-cta:hover::before {
        opacity: 1;
        transform: scaleX(1)
    }

    .site-header #nav>.home-nav-cta:hover::after {
        opacity: 0;
        transform: scaleX(.1)
    }
}

@media(max-width:1320px) {
    .site-header #nav>.home-nav-cta {
        inline-size: 100%;
        min-inline-size: 0
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header #nav>.home-nav-cta,
    .site-header #nav>.home-nav-cta::before,
    .site-header #nav>.home-nav-cta::after,
    .site-header #nav>.home-nav-cta .home-nav-cta__label {
        transition: none !important
    }

    .site-header #nav>.home-nav-cta:hover .home-nav-cta__label,
    .site-header #nav>.home-nav-cta:focus-visible .home-nav-cta__label {
        letter-spacing: 0
    }
}

#top .eyebrow,
#unternehmen .section-label,
#leistungen .home-services__eyebrow,
.section-handoff__copy>span,
#projekte .section-label,
#kontakt.contact .section-label {
    font-size: var(--home-type-label);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .15em;
    text-transform: uppercase
}

#top .eyebrow {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: .7rem;
    color: rgba(255, 255, 255, .88)
}

#top .eyebrow strong {
    display: inline-flex;
    padding: .48rem .62rem .43rem;
    color: #fff;
    background: var(--home-type-accent);
    line-height: 1
}

#top .eyebrow span {
    white-space: nowrap
}

#top #home-hero-title {
    margin: 22px 0;
    color: #fff;
    font-family: Arial, "Helvetica Neue", sans-serif;
    font-size: var(--home-type-display);
    font-weight: 500;
    line-height: .96;
    letter-spacing: -.045em;
    text-wrap: balance
}

#top #home-hero-title em {
    color: #fff
}

#unternehmen #home-intro-title,
#projekte #projects-title,
#kontakt.contact h2 {
    color: var(--home-type-heading);
    font-family: Arial, "Helvetica Neue", sans-serif;
    font-size: var(--home-type-h2);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.035em;
    text-wrap: balance
}

#unternehmen #home-intro-title {
    max-width: 11.5ch
}

#top .button-light {
    min-width: 294px
}

#unternehmen #home-intro-title em,
#kontakt.contact h2 em {
    color: var(--home-type-accent)
}

#projekte #projects-title .home-heading-accent {
    display: block;
    color: var(--home-type-accent)
}

#projekte .projects-copy {
    background-color: #e7eef4;
    background-image: none
}

#leistungen #home-services-title {
    color: var(--home-type-heading);
    font-family: Arial, "Helvetica Neue", sans-serif;
    font-size: var(--home-type-h2-compact);
    font-weight: 400;
    line-height: 1.14;
    letter-spacing: -.015em
}

#top .hero-copy,
#unternehmen .home-intro__lead,
.section-handoff__copy p {
    font-size: var(--home-type-lead);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: normal
}

#unternehmen .home-intro__copy>p:not(.home-intro__lead),
#leistungen .home-services__intro>p:last-child,
#projekte .section-head>p,
#kontakt.contact .contact-lead>p {
    color: var(--home-type-text);
    font-size: var(--home-type-body);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: normal
}

#leistungen .home-service-card h3 {
    position: relative;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0;
    padding-bottom: 15px;
    overflow: visible;
    text-align: center
}

#leistungen .home-service-card h3::after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 34px;
    height: 1px;
    margin: 0;
    background: rgba(255, 255, 255, .9);
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%);
    flex-shrink: 0
}

#projekte .carousel-item h3 {
    font-size: var(--home-type-h3);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -.025em
}

#unternehmen .arrow-link,
.section-handoff>a,
#projekte .project-cta,
#kontakt.contact .contact-mail,
#kontakt.contact .contact-phone {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0
}

#unternehmen .section-label,
#leistungen .home-services__eyebrow,
.section-handoff__copy>span,
#projekte .section-label,
#kontakt.contact .section-label {
    color: var(--home-type-accent-text)
}

#unternehmen .home-intro__visual {
    border-top-color: var(--home-type-accent)
}

#unternehmen .home-intro__visual figcaption {
    background: rgba(215, 25, 32, .94)
}

.section-handoff::before {
    background: linear-gradient(90deg, transparent, var(--home-type-accent), transparent)
}

#projekte .carousel-meta b {
    background: var(--home-type-accent)
}

#kontakt.contact .contact-form label {
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .1em
}

#kontakt.contact .contact-form input,
#kontakt.contact .contact-form textarea,
#kontakt.contact .contact-form select {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none
}

#kontakt.contact .contact-submit {
    position: relative;
    min-width: 0;
    min-height: 56px;
    margin-top: 10px
}

#kontakt.contact .contact-submit__button {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 56px;
    width: 100%;
    min-width: 0;
    min-height: 56px;
    padding: 0 8px 0 20px;
    overflow: visible;
    border: 0;
    color: #fff;
    background: transparent;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: left
}

#kontakt.contact .contact-submit__surface {
    position: absolute;
    z-index: -1;
    inset: 0;
    border: 2px solid var(--home-type-accent);
    background: var(--home-type-accent);
    transition: inset-inline-end .35s ease, background-color .35s ease
}

#kontakt.contact .contact-submit__label,
#kontakt.contact .contact-submit__rest-arrow,
#kontakt.contact .contact-submit__diamond {
    position: relative;
    z-index: 1;
    pointer-events: none
}

#kontakt.contact .contact-submit__label {
    align-self: center;
    grid-column: 1;
    min-width: 0;
    transition: color .35s ease
}

#kontakt.contact .contact-submit__rest-arrow {
    align-self: center;
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    font-size: 1.05rem;
    transition: opacity .2s ease, transform .35s ease
}

#kontakt.contact .contact-submit__diamond {
    display: grid;
    grid-column: 2;
    grid-row: 1;
    place-items: center;
    align-self: center;
    justify-self: center;
    width: 36px;
    height: 36px;
    border: 2px solid transparent;
    opacity: 0;
    transform: rotate(45deg) scale(.72);
    transition: opacity .22s ease, transform .35s ease, border-color .35s ease
}

#kontakt.contact .contact-submit__diamond svg {
    width: 22px;
    height: 22px;
    fill: var(--home-type-accent);
    transform: rotate(-45deg)
}

#kontakt.contact .contact-submit__button:focus-visible {
    color: var(--home-type-accent);
    outline-color: var(--home-type-heading)
}

#kontakt.contact .contact-submit__button:focus-visible .contact-submit__surface {
    inset-inline-end: 58px;
    background: transparent
}

#kontakt.contact .contact-submit__button:focus-visible .contact-submit__rest-arrow {
    opacity: 0;
    transform: translateX(8px)
}

#kontakt.contact .contact-submit__button:focus-visible .contact-submit__diamond {
    border-color: var(--home-type-accent);
    opacity: 1;
    transform: rotate(45deg) scale(1)
}

@media (hover:hover) and (pointer:fine) {
    #kontakt.contact .contact-submit__button:hover {
        color: var(--home-type-accent)
    }

    #kontakt.contact .contact-submit__button:hover .contact-submit__surface {
        inset-inline-end: 58px;
        background: transparent
    }

    #kontakt.contact .contact-submit__button:hover .contact-submit__rest-arrow {
        opacity: 0;
        transform: translateX(8px)
    }

    #kontakt.contact .contact-submit__button:hover .contact-submit__diamond {
        border-color: var(--home-type-accent);
        opacity: 1;
        transform: rotate(45deg) scale(1)
    }
}

@media(max-width:600px) {
    #kontakt.contact .contact-submit,
    #kontakt.contact .contact-submit__button {
        min-height: 52px
    }

    #kontakt.contact .contact-submit__button {
        grid-template-columns: minmax(0, 1fr) 52px;
        padding-inline: 16px 6px
    }

    #kontakt.contact .contact-submit__diamond {
        width: 34px;
        height: 34px
    }

    #kontakt.contact .contact-submit__button:focus-visible .contact-submit__surface {
        inset-inline-end: 54px
    }
}

@media (prefers-reduced-motion: reduce) {
    #kontakt.contact .contact-submit__surface,
    #kontakt.contact .contact-submit__label,
    #kontakt.contact .contact-submit__rest-arrow,
    #kontakt.contact .contact-submit__diamond {
        transition: none
    }
}

.home-footer {
    padding: 48px max(clamp(24px, 6vw, 100px), calc((100vw - 1320px) / 2 + 100px)) 18px;
    color: #fff;
    background: #073f73
}

.home-footer .footer-top:has(.social-block) {
    grid-template-columns: 1.2fr 1.2fr .85fr .9fr auto;
    gap: 32px;
    padding-bottom: 34px
}

.home-footer .footer-top b {
    margin-bottom: 13px;
    color: #bed0df;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .12em
}

.home-footer .footer-top address,
.home-footer .footer-top>div:not(.footer-brand):not(.social-block)>a {
    color: rgba(255, 255, 255, .86);
    font-size: .84rem;
    line-height: 1.45
}

.home-footer .footer-top>div:not(.footer-brand):not(.social-block)>a {
    padding: 3px 0
}

.home-footer .social-links {
    gap: 8px
}

.home-footer .social-links a,
.home-footer .social-unavailable {
    width: 38px;
    height: 38px;
    border-color: rgba(255, 255, 255, .38)
}

.home-footer .social-links svg {
    width: 18px;
    height: 18px
}

.home-footer .footer-bottom {
    padding-top: 16px;
    color: rgba(255, 255, 255, .62);
    font-size: .7rem
}

.home-footer .footer-top address a:hover,
.home-footer .footer-top address a:focus-visible,
.home-footer .footer-top>div:not(.footer-brand):not(.social-block)>a:hover,
.home-footer .footer-top>div:not(.footer-brand):not(.social-block)>a:focus-visible,
.home-footer .footer-bottom a:hover,
.home-footer .footer-bottom a:focus-visible {
    color: #fff
}

.home-footer .social-links a:hover,
.home-footer .social-links a:focus-visible {
    background: #d71920;
    border-color: #d71920;
    transform: translateY(-2px)
}

.home-footer .footer-bottom>div {
    gap: 20px;
    flex-wrap: wrap
}

@media(max-width:1100px) {
    .home-footer {
        padding: 42px clamp(24px, 5vw, 48px) 18px
    }

    .home-footer .footer-top:has(.social-block) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 30px;
        padding-bottom: 30px
    }
}

@media(max-width:540px) {
    .home-footer {
        padding: 36px 20px 18px
    }

    .home-footer .footer-top:has(.social-block) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px 18px;
        padding-bottom: 26px
    }

    .home-footer .social-block {
        grid-column: 1 / -1
    }

    .home-footer .footer-top>div:not(.footer-brand):not(.social-block)>a {
        width: max-content;
        padding: 3px 0;
        border-bottom: 0
    }

    .home-footer .footer-bottom {
        flex-direction: column;
        gap: 13px
    }
}

@media(max-width:360px) {
    .home-footer .footer-top:has(.social-block) {
        grid-template-columns: 1fr
    }

    .home-footer .social-block {
        grid-column: 1
    }
}

@media(max-width:699px) {
    #leistungen .home-service-card h3 {
        font-size: 1.0625rem
    }
}

@media(max-width:800px) {
    .hero#top {
        height: max(100svh, 850px);
        min-height: 850px;
        align-items: flex-start
    }

    .hero#top .hero-content {
        top: 0;
        margin-top: 84px;
        padding-top: 38px
    }

    #top .eyebrow {
        gap: .5rem;
        letter-spacing: .11em;
        flex-wrap: wrap
    }

    #top .eyebrow strong {
        padding: .42rem .5rem .37rem
    }

    #top .hero-facts {
        right: 24px;
        left: 24px;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: auto;
        gap: 0
    }

    #top .hero-facts div {
        min-width: 0;
        padding-inline: 12px 8px
    }

    #top .hero-facts strong {
        font-size: 1.05rem;
        line-height: 1.2
    }

    #top .hero-facts span {
        margin-top: 4px;
        line-height: 1.35
    }
}

@media(max-width:680px) {
    #top .hero-actions {
        width: 100%;
        gap: 17px;
        margin-top: 30px
    }

    #top .button-light {
        width: 100%;
        min-width: 0;
        gap: 12px
    }
}

@media(max-width:420px) {
    .hero#top {
        height: max(100svh, 880px);
        min-height: 880px
    }

    .hero#top .hero-content {
        padding-top: 34px
    }

    #top .eyebrow {
        font-size: .61rem;
        letter-spacing: .09em
    }

    #top .eyebrow strong {
        padding-inline: .42rem
    }

    #top .hero-facts div {
        padding-inline: 9px 5px
    }

    #top .hero-facts strong {
        font-size: .95rem
    }
}

/* Fünf kuratierte Projektansichten mit ruhigem, gleichmäßigem Wechsel. */
#projekte .carousel-item {
    animation-name: home-project-carousel;
    animation-duration: 15s
}

#projekte .carousel-item:nth-child(1) { animation-delay: -.6s }
#projekte .carousel-item:nth-child(2) { animation-delay: 2.4s }
#projekte .carousel-item:nth-child(3) { animation-delay: 5.4s }
#projekte .carousel-item:nth-child(4) { animation-delay: 8.4s }
#projekte .carousel-item:nth-child(5) { animation-delay: 11.4s }

#projekte .carousel-item--dach-garage img { object-position: 50% 56% }
#projekte .carousel-item--wohngebaeude-strasse img { object-position: 52% 55% }
#projekte .carousel-item--giebel img { object-position: 50% 58% }
#projekte .carousel-item--wohngebaeude-garagen img { object-position: 54% 60% }
#projekte .carousel-item--neubau-nuernberg img { object-position: 48% 44% }

@keyframes home-project-carousel {
    0% { transform: translate3d(100%, 0, 0) }
    4%, 20% { transform: translate3d(0, 0, 0) }
    24%, 100% { transform: translate3d(-100%, 0, 0) }
}

@media(prefers-reduced-motion:reduce) {
    #projekte .carousel-item {
        display: none;
        animation: none;
        transform: none;
        will-change: auto
    }

    #projekte .carousel-item:first-child {
        display: block
    }
}