.kontakt-section{min-height: 87dvh;background: linear-gradient( 60deg, var(--color-gold) 0%, var(--color-secondary) 50%, #252d3d 100% );padding: 9.3rem 7rem 3.5rem 7rem;position: relative;z-index: 2;overflow: hidden} .kontakt-section::before{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: radial-gradient( circle at 70% 30%, rgba(228, 184, 231, 0.1) 0%, transparent 70% );pointer-events: none;animation: gradientShift 15s ease-in-out infinite alternate} .kontakt-content{display: grid;grid-template-columns: 1fr 1fr;gap: 2rem;margin: 0 auto} .kontakt-section h2{font-size: clamp(2rem, 3vw, 3rem);margin-bottom: 3rem;color: var(--color-light);font-weight: 500;position: relative;display: inline-block;letter-spacing: 0.05em;white-space: nowrap} .kontakt-section h2::after{content: "";position: absolute;width: 100%;height: 2px;bottom: -0.5rem;left: 0;background: linear-gradient(90deg, var(--color-accent) 0%, transparent 100%)} .map-container{width: 100%;height: 85%} .form-container{width: 100%;height: 100%} .kontakt-form{width: 100%;margin: 0;background: linear-gradient( 338deg, var(--color-darkest) 0%, #1c2230 50%, #252d3d 100% );padding: 2rem;border-radius: 1rem;border: 1px solid rgba(228, 184, 231, 0.1)} .name-row{display: flex;gap: 1rem} .form-group{margin-bottom: 1rem} .name-row .form-group{flex: 1} .form-group label{display: block;font-size: 0.9rem;color: var(--color-light);margin-bottom: 0.5rem;font-weight: 500;text-transform: uppercase;letter-spacing: 0.05em} .form-group input, .form-group textarea{width: 100%;padding: 0.8rem;background: rgba(228, 184, 231, 0.03);border: 1px solid rgba(228, 184, 231, 0.1);border-radius: 0.5rem;color: var(--color-light);font-size: 0.9rem;transition: all 0.3s ease;font-family: "EB Garamond", serif;font-weight: 500;letter-spacing: 0.02em;height: 3.5rem} .form-group input:focus, .form-group textarea:focus{outline: none;border-color: var(--color-accent);background: rgba(228, 184, 231, 0.08);box-shadow: 0 0 10px rgba(228, 184, 231, 0.1)} .form-group textarea{min-height: 100px;resize: vertical} .submit-btn{display: inline-block;background: var(--color-button);color: var(--color-light);border: 2px solid var(--color-button);border-radius: 2rem;font-family: "EB Garamond", serif;font-weight: 500;cursor: pointer;transition: all 0.3s ease;text-transform: uppercase;letter-spacing: 0.05em;margin-top: 1rem;padding: 0.8rem 2rem;font-size: 0.9rem} .submit-btn:hover{transform: scale(1.05);background: var(--color-button);filter: brightness(1.2);border-color: var(--color-button);box-shadow: 0 0 15px rgba(112, 24, 27, 0.5);color: var(--color-light) !important} .map-container{border-radius: 1rem;overflow: hidden;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);justify-self: end} .map-container{height: 81%;display: flex;flex-direction: column} .map-container ul{margin-bottom: 1.5rem} .map-container li{border-left: 2px solid var(--color-accent);padding-left: 1.5rem;margin-left: 0.5rem} .map-container li::before{content: "•";color: var(--color-accent);position: absolute;left: -0.5rem;top: 50%;transform: translateY(-50%);width: 1rem;height: 1rem;background: var(--color-darkest);border: 2px solid var(--color-accent);border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 1.5rem;opacity: 1} #map{width: 100%;height: 100%} [data-netlify-recaptcha="true"]{min-height: 50px;display: block} .success-message{position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%) scale(0.8);background: linear-gradient( 135deg, var(--color-darkest) 0%, #1c2230 50%, #252d3d 100% );color: var(--color-light);padding: 2rem 3rem;border-radius: 1rem;font-size: 1.2rem;box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);border: 1px solid rgba(228, 184, 231, 0.2);z-index: 1001;display: flex;align-items: center;gap: 1rem;font-family: "EB Garamond", serif;font-weight: 500;letter-spacing: 0.02em;opacity: 0;transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)} .success-message.show{opacity: 1;transform: translate(-50%, -50%) scale(1)} .success-message.hide{opacity: 0;transform: translate(-50%, -50%) scale(0.8)} .success-overlay{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);z-index: 1000;opacity: 0;transition: all 0.6s ease;pointer-events: none} .success-overlay.show{opacity: 1;pointer-events: auto} .success-overlay.hide{opacity: 0;pointer-events: none} .success-message i{font-size: 1.5rem;color: var(--color-accent)} @keyframes gradientShift{0%{transform: scale(1);opacity: 0.5} 50%{transform: scale(1.1);opacity: 0.7} 100%{transform: scale(1);opacity: 0.5} } @media (max-width: 1280px){.map-container{height: 83%} } @media (max-width: 1105px){.kontakt-section{padding: 9rem 5rem 3.5rem 7rem} } @media (max-width: 1024px){.kontakt-content{grid-template-columns: 1fr;padding: 0;align-content: center;justify-content: center} .kontakt-section h2{text-align: center;margin-left: auto;margin-right: auto;display: block;width: 100%;margin-top: 1.5rem} .kontakt-section h2::after{left: 50%;transform: translateX(-50%);width: 27rem} .form-container, .map-container{margin: 0 auto} .kontakt-section{padding: 1.7rem 2rem 4rem 2rem} .kontakt-section::before{height: auto} .kontakt-content div:last-child h2{margin-top: 3rem} .map-container{max-width: 100%;min-height: 55rem} } @media (max-width: 768px){.kontakt-section{padding: 2.2rem 2rem 4rem 2rem} .kontakt-section h2{white-space: normal} } @media (max-width: 648px){.kontakt-section{padding: 6rem 2rem} .success-message{padding: 1rem 1.5rem} .success-message.show{flex-direction: column;justify-content: center;align-items: center} [data-translate="messageSent"]{text-align: center} .name-row{flex-direction: column;gap: 1.5rem} .success-message{font-size: 0.9rem} } @media (max-width: 468px){.kontakt-section h2::after{width: 19rem} .kontakt-section{padding: 3.5rem 1.5rem} } @media (max-width: 368px){.kontakt-section{padding: 3.5rem 1rem} .kontakt-section h2{font-size: clamp(1.1rem, 3vw, 3rem)} }