/*
 * Responsive layout layer
 * Loaded after style.css so legacy fixed dimensions cannot override it.
 */

:root {
    --site-header-height: 105px;
    --page-gutter: clamp(18px, 5vw, 96px);
    --hero-bottom-gap: clamp(24px, 6svh, 20px);
}

html {
    min-width: 320px;
    overflow-x: clip;
}

body {
    min-width: 320px;
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
}

body.menu-open {
    overflow: hidden;
}

img,
picture,
svg,
video,
iframe {
    max-width: 100%;
}

h1,
h2,
h3,
p,
li,
a {
    overflow-wrap: break-word;
}

.site-header {
    min-height: var(--site-header-height);
    padding: 12px 0;
}

.brand-box {
    min-width: 0;
    padding: 3px 10px;
}

.brand-box img {
    width: auto;
    height: clamp(54px, 4.515vw, 65px);
    max-width: min(68vw, 290px);
    margin-right: 0;
}

.burger-icon {
    left: clamp(24px, 24.3056vw, 350px);
    z-index: 2;
    width: 44px;
    height: 44px;
    padding: 9px;
    justify-content: center;
    align-items: center;
}

#main-menu {
    max-width: min(420px, calc(100vw - 32px));
    max-height: calc(100dvh - var(--site-header-height) - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

#main-menu a {
    line-height: 1.15;
}

/* Home */
.hero-section {
    height: calc(100svh - var(--site-header-height) - var(--hero-bottom-gap));
    min-height: 0;
    margin-top: var(--site-header-height);
}

.hero-section picture,
.hero-section picture > img,
.hero-section > img {
    display: block;
    width: 100%;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover;
}

.hero-title {
    left: var(--page-gutter);
    max-width: calc(100% - (2 * var(--page-gutter)));
    font-size: clamp(2.5rem, 4.444vw, 4rem);
    line-height: 1.08;
}

.vertical-text-left {
    top: 50%;
    left: clamp(24px, 4.722vw, 68px);
}

.hi-section {
    width: min(100%, 735px);
    white-space: normal;
}

.hi-desc,
.hi-desc p,
.hi-desc h3 {
    overflow-wrap: anywhere;
}

.overlap-container {
    margin: clamp(56px, 6.944vw, 100px) 0;
}

.overlap-container picture {
    display: block;
    width: 100%;
    height: 100%;
}

.overlap-img,
.overlap-container picture .overlap-img {
    display: block;
    height: clamp(520px, 62.5vw, 900px) !important;
}

.overlapcon2 .overlap-img,
.overlapcon2 picture .overlap-img {
    height: clamp(460px, 43.056vw, 620px) !important;
}

.overlap-box {
    max-width: calc(100% - (2 * var(--page-gutter)));
}

.overlap-box h2 {
    max-width: 100%;
    font-size: clamp(2.5rem, 4.444vw, 4rem);
}

/* Inspiration overview and detail */
.inspiration-carousel {
    padding-top: var(--site-header-height);
}

.inspiration-carousel .slider-view {
    height: clamp(470px, calc(100svh - 215px), 800px) !important;
}

.inspiration-carousel .slider-col img,
.inspislide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

.inspiration-carousel .slider-overlay {
    max-width: calc(100% - 40px);
}

#page-detail {
    padding-top: calc(var(--site-header-height) + clamp(18px, 2.5vw, 40px));
}

.detail-hero-section {
    margin-bottom: clamp(28px, 3vw, 48px);
}

.detail-hero-section:not(.has-custom-hero-width):not(.is-portrait-hero) picture,
.detail-hero-section:not(.has-custom-hero-width):not(.is-portrait-hero) > img {
    display: block;
    width: 100%;
    height: min(68svh, 760px);
}

.detail-main-title {
    font-size: clamp(2.15rem, 4vw, 3rem);
    line-height: 1.1;
}

.detail-text-block,
.detail-text-block p,
.detail-text-block li {
    overflow-wrap: anywhere;
}

.site-lightbox {
    height: 100dvh;
}

/* Contact */
.contact-stage {
    margin-top: var(--site-header-height);
}

.contact-stage-grid {
    width: min(calc(100% - (2 * var(--page-gutter))), 1194px);
}

.contact-form-panel,
.contact-map-panel,
.contact-form-panel .cs_input_wrapper,
.contact-form-panel input,
.contact-form-panel select,
.contact-form-panel textarea {
    min-width: 0;
}

.contact-map-panel,
.contact-map-panel .dsgvo-embed {
    width: 100%;
}

/* Footer and generic/legal content */
.site-footer .row > * {
    min-width: 0;
}

.footer-contact,
.footer-text-col {
    min-width: 0;
}

.footer-contact a,
.footer-bottom,
#impressum,
#datenschutz,
.dsgvo-policy {
    overflow-wrap: anywhere;
}

#impressum,
#datenschutz {
    width: min(100%, 1200px);
    margin-inline: auto;
    padding-right: var(--page-gutter);
    padding-left: var(--page-gutter);
}

#impressum table,
#datenschutz table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

/* New content-page layouts */
.career-intro,
.career-copy,
.career-text,
.credo-content,
.credo-row,
.credo-text,
.vision-content,
.vision-intro-text,
.vision-closing-text {
    min-width: 0;
    max-width: 100%;
}

.career-lead,
.career-text,
.credo-title,
.credo-text,
.vision-title,
.vision-intro-text,
.vision-closing-text {
    overflow-wrap: anywhere;
}

@media (min-width: 769px) {
    .hero-title {
        margin-left: 40px;
    }
}

@media (max-width: 1199px) {
    .burger-icon {
        left: var(--page-gutter);
    }

    #main-menu {
        left: var(--page-gutter);
    }

    .inspiration-detail-layout {
        column-count: 2;
    }

    .career-page,
    .credo-page,
    .vision-page {
        width: 100%;
        padding-right: var(--page-gutter);
        padding-left: var(--page-gutter);
    }

    .career-intro,
    .credo-content,
    .vision-content {
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

@media (max-width: 991px) {
    .contact-stage-overlay {
        padding: clamp(64px, 10vw, 95px) 0;
    }

    .contact-stage-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .contact-map-panel iframe,
    .contact-map-panel .dsgvo-embed {
        min-height: 360px;
    }

    .site-footer .row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-contact {
        align-items: flex-start;
    }
}

@media (max-width: 768px) {
    :root {
        --site-header-height: 96px;
    }

    .site-header {
        padding: 10px 0;
    }

    .brand-box img {
        height: 58px;
        max-width: min(66vw, 235px);
    }

    .burger-icon {
        left: max(14px, env(safe-area-inset-left));
    }

    #main-menu {
        top: var(--site-header-height);
        right: 14px;
        left: 14px;
        width: auto;
        max-width: none;
        padding: 22px 24px 14px;
        background: rgba(0, 0, 0, 0.97);
    }

    #main-menu a {
        margin-bottom: 14px;
        font-size: clamp(1.5rem, 7vw, 1.9rem);
    }

    .hero-section {
        height: calc(100svh - var(--site-header-height) - var(--hero-bottom-gap));
        min-height: 0;
        max-height: none;
    }

    .hero-title {
        bottom: clamp(28px, 7vw, 48px);
        font-size: clamp(2.2rem, 10vw, 3.2rem);
        padding-left: 13px;
    }

    .vertical-text-left {
        left: max(38px, var(--page-gutter));
        font-size: clamp(0.95rem, 4.5vw, 1.2rem);
        letter-spacing: 1px;
    }

    .hi-section {
        padding: 65px var(--page-gutter) 75px;
    }

    .hi-logo-wrapper {
        margin-bottom: 34px;
    }

    .hi-logo-wrapper img {
        width: min(220px, 72vw);
    }

    .hi-desc {
        margin-left: 0;
        font-size: 1rem;
        line-height: 1.6;
    }

    .overlap-container {
        margin: 42px 0;
        padding-right: var(--page-gutter);
        padding-left: var(--page-gutter);
    }

    .overlap-img,
    .overlap-container picture .overlap-img,
    .overlapcon2 .overlap-img,
    .overlapcon2 picture .overlap-img {
        height: clamp(340px, 112vw, 500px) !important;
    }

    .overlapcon1 .pos-center,
    .overlapcon2 .pos-right,
    .overlapcon3 .pos-center,
    .overlapcon3 .pos-right {
        top: 50%;
        right: auto;
        left: clamp(28px, 9vw, 60px);
        transform: translateY(-50%);
    }

    .overlap-box {
        width: auto;
        max-width: calc(100% - (2 * var(--page-gutter)));
    }

    .overlap-box h2 {
        --mobile-frame-size: clamp(150px, 48vw, 185px);
        display: block;
        width: var(--mobile-frame-size);
        height: var(--mobile-frame-size);
        padding: 52% 0 0 40%;
        font-size: clamp(1.5rem, 7.5vw, 1.85rem);
        line-height: 1;
        text-align: left;
        white-space: nowrap;
    }

    .bracket-tl::before {
        width: 100%;
        height: 39%;
        border-width: 4px;
    }

    .bracket-tl::after {
        width: 80%;
        height: 62%;
        border-width: 0 0 4px 4px;
    }

    .inspiration-carousel .slider-view {
        height: 76svh !important;
        min-height: 0;
    }

    .inspiration-carousel {
        padding-bottom: clamp(72px, 20vw, 110px);
        background: #000;
    }

    .inspiration-carousel .slider-overlay,
    .inspiration-carousel .slider-col:hover .slider-overlay {
        top: clamp(34px, 10vw, 48px);
        right: 18px;
        bottom: auto;
        left: clamp(24px, 7vw, 32px);
        z-index: 2;
        display: block;
        max-width: none;
        padding: 0;
        background: transparent;
    }

    .inspiration-carousel .slider-overlay h2 {
        margin: 0;
        font-size: clamp(2rem, 9vw, 2.7rem);
        font-weight: 300;
        line-height: 1.08;
    }

    .inspiration-carousel .slider-vert-text {
        margin-top: 103px;
        font-size: 1.2rem;
        transform: rotate(-90deg);
        transform-origin: left top;
        white-space: nowrap;
    }

    .inspiration-carousel .slider-col::after {
        position: absolute;
        inset: 0;
        z-index: 1;
        background: rgba(0, 0, 0, 0.38);
        content: '';
        pointer-events: none;
    }

    .inspiration-carousel .nav-arrows {
        width: min(230px, 72vw);
        height: 72px;
        font-size: 3.2rem;
    }

    .inspiration-carousel .bottom-nav-bar {
        margin-top: -72px;
    }

    .inspiration-carousel .nav-text {
        margin-top: 8px;
        font-size: clamp(1.7rem, 8vw, 2.2rem);
    }

    .detail-content-wrapper,
    .detail-grid-container,
    .inspiration-detail-layout {
        padding-right: var(--page-gutter);
        padding-left: var(--page-gutter);
    }

    .detail-hero-section.is-portrait-hero img,
    .detail-hero-section.has-custom-hero-width img {
        width: min(100%, 520px) !important;
    }

    .detail-hero-section:not(.has-custom-hero-width):not(.is-portrait-hero) picture,
    .detail-hero-section:not(.has-custom-hero-width):not(.is-portrait-hero) > img {
        height: min(58svh, 560px);
        min-height: 330px;
    }

    .inspiration-detail-layout {
        column-count: 1;
    }

    .site-lightbox {
        padding: 58px 42px;
    }

    .contact-stage-overlay {
        padding: 52px 0;
    }

    .contact-stage-grid {
        width: calc(100% - (2 * var(--page-gutter)));
    }

    .contact-form-panel .cs_contact_form {
        grid-template-columns: minmax(0, 1fr);
    }

    .contact-form-panel .cs_form_field,
    .contact-form-panel select,
    .contact-form-panel textarea,
    .contact-form-panel input[type="text"],
    .contact-form-panel input[type="email"],
    .contact-form-panel input[type="tel"] {
        font-size: 1rem;
    }

    .contact-map-panel iframe,
    .contact-map-panel .dsgvo-embed {
        min-height: 320px;
    }

    .site-footer {
        padding-right: var(--page-gutter);
        padding-left: var(--page-gutter);
    }

    .site-footer .row {
        grid-template-columns: minmax(0, 1fr);
    }

    .footer-text-col,
    .footer-contact {
        align-items: flex-start;
        min-height: 0;
    }

    .footer-logo-block img {
        width: min(240px, 70vw);
    }

    .footer-social {
        white-space: normal;
    }

    .footer-bottom {
        padding-right: var(--page-gutter);
        padding-left: var(--page-gutter);
        font-size: 0.9rem;
    }

    .handwerk-text-section {
        padding: 65px var(--page-gutter) 0;
    }

    .handwerk-title {
        font-size: clamp(2.25rem, 11vw, 3.4rem);
        text-align: left;
    }

    .handwerk-body {
        width: 100%;
        font-size: 1rem;
    }

    .handwerk-body p {
        text-align: left;
    }

    .handwerk-collage-row {
        padding-right: var(--page-gutter);
        padding-left: var(--page-gutter);
    }

    .career-page,
    .credo-page,
    .vision-page {
        padding-top: calc(var(--site-header-height) + 29px);
    }

    .career-hi-label {
        font-size: clamp(4rem, 21vw, 5.4rem);
    }

    .career-lead,
    .credo-title,
    .vision-title {
        font-size: clamp(2.15rem, 10vw, 2.75rem);
        line-height: 1.1;
    }

    .career-text,
    .credo-text,
    .vision-intro-text,
    .vision-closing-text {
        font-size: 1rem;
        line-height: 1.6;
    }

    .credo-hero {
        aspect-ratio: 1.55 / 1;
    }

    .career-gallery-item,
    .vision-gallery-item {
        aspect-ratio: 1 / 1.15;
    }
}

@media (max-width: 380px) {
    :root {
        --page-gutter: 16px;
    }

    .brand-box img {
        height: 52px;
        max-width: 68vw;
    }

    .burger-icon {
        width: 42px;
        height: 42px;
        padding: 8px;
    }

    .hero-section {
        min-height: 0;
    }

    .footer-jobs {
        width: min(180px, 100%);
    }
}

@media (max-height: 520px) and (orientation: landscape) {
    :root {
        --site-header-height: 78px;
    }

    .site-header {
        padding: 6px 0;
    }

    .brand-box img {
        height: 52px;
    }

    #main-menu {
        padding-top: 14px;
    }

    #main-menu a {
        margin-bottom: 8px;
        font-size: 1.25rem;
    }

    .hero-section {
        height: calc(100svh - var(--site-header-height) - var(--hero-bottom-gap));
        min-height: 0;
    }

    .hero-title {
        bottom: 16px;
        font-size: clamp(1.75rem, 9svh, 2.4rem);
    }

    .vertical-text-left {
        left: 16px;
        font-size: 0.8rem;
        letter-spacing: 0;
    }

    .inspiration-carousel .slider-view {
        height: 76svh !important;
        min-height: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .inspiration-carousel-track,
    .burger-icon span,
    #main-menu,
    #main-menu a {
        transition-duration: 0.01ms !important;
    }
}