.termine-section{min-height: 87dvh;background: linear-gradient( 135deg, rgba(25, 33, 52, 0.95) 0%, rgba(45, 55, 90, 0.98) 30%, rgba(70, 24, 27, 0.85) 70%, rgba(162, 145, 96, 0.9) 100% );padding: 9rem 7rem 3.5rem 7rem;position: relative;z-index: 2;overflow: hidden} .termine-section::before{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: radial-gradient( circle at 70% 30%, rgba(100, 149, 237, 0.15) 0%, rgba(70, 24, 27, 0.1) 50%, transparent 100% );pointer-events: none} .termine-section h2{font-size: clamp(2rem, 4vw, 3rem);margin-bottom: 3rem;color: var(--color-light);font-weight: 500;position: relative;display: inline-block;letter-spacing: 0.05em} .termine-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%)} .termine-content{margin: 0 auto} .termine-grid{display: grid;grid-template-columns: 1fr 1fr;gap: 4rem;align-items: start} .detail-item ul{display: flex;flex-direction: column;gap: 1rem;list-style: none} .detail-item li{padding: 0.5rem 0;color: var(--color-light);opacity: 0.9;position: relative} .detail-item li::after{content: "";position: absolute;width: 100%;height: 1px;bottom: 0;left: 0;background: linear-gradient(90deg, var(--color-accent) 0%, transparent 100%);opacity: 0.3} .detail-item li::before{display: none} .detail-item .label{color: var(--color-accent);font-size: 1.1rem;font-weight: 500;margin-right: 0.5rem;letter-spacing: 0.02em} .detail-content{display: grid;grid-template-columns: 1fr 1fr;gap: 2rem;margin-bottom: 2rem;align-items: center} .detail-image{width: 100%;height: 250px;background-image: url("/img/masterclass/masterclass_italien.jpeg");background-size: contain;background-position: center;background-repeat: no-repeat;border-radius: 0.75rem;margin: auto 0;cursor: pointer} .image-overlay{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.9);z-index: 1000;cursor: pointer;opacity: 0;visibility: hidden;transition: opacity 0.3s ease, visibility 0.3s ease;display: flex;justify-content: center;align-items: center} .image-overlay.active{opacity: 1;visibility: visible} .image-overlay::before{content: "";position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 50vw;height: 50dvh;background-image: url("/img/masterclass/masterclass_italien.jpeg");background-size: contain;background-position: center;background-repeat: no-repeat;transition: transform 0.3s ease} .image-overlay.active::before{transform: translate(-50%, -50%) scale(1)} #map{height: 100%;width: 100%;border-radius: 0.75rem;box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)} .termine-map{width: 100%;height: 400px;border-radius: 1rem;overflow: hidden;border: 1px solid rgba(228, 184, 231, 0.1)} .leaflet-popup-content-wrapper{border-radius: 0.5rem;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)} .leaflet-popup-content{margin: 0.75rem 1rem;line-height: 1.4} .leaflet-popup-tip{box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)} .user-location-marker{background: transparent} .user-marker-inner{width: 20px;height: 20px;background: var(--color-accent);border-radius: 50%;border: 3px solid var(--color-light);box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);position: relative;animation: pulse 2s infinite} @keyframes pulse{0%{transform: scale(1);opacity: 1} 50%{transform: scale(1.2);opacity: 0.8} 100%{transform: scale(1);opacity: 1} } .no-appointments-message{text-align: center;padding: 2rem 0;max-width: 800px;margin: 0 auto} .no-appointments-content{background: rgba(25, 33, 52, 0.4);padding: 3rem 2rem;border-radius: 1rem;border: 1px solid rgba(228, 184, 231, 0.2);backdrop-filter: blur(10px);box-shadow: 0 8px 32px rgba(25, 33, 52, 0.25);position: relative} .no-appointments-content::before{content: "";position: absolute;top: 0;left: 50%;transform: translateX(-50%);width: 60px;height: 2px;background: linear-gradient( 90deg, transparent, var(--color-accent), transparent )} .no-appointments-icon{margin-bottom: 1.5rem} .no-appointments-icon i{font-size: 3rem;color: var(--color-accent);opacity: 0.8} .no-appointments-content h3{font-size: clamp(1.5rem, 3vw, 2rem);color: var(--color-light);margin-bottom: 1rem;font-weight: 500;letter-spacing: 0.02em} .no-appointments-content p{font-size: clamp(1rem, 1.4vw, 1.2rem);line-height: 1.6;color: rgba(255, 255, 255, 0.9);margin-bottom: 1rem;max-width: 640px;margin-left: auto;margin-right: auto} .no-appointments-content p:last-child{margin-bottom: 0} .no-appointments-content a{background: var(--color-button);color: var(--color-light);padding: 0.6rem 0.9rem;text-transform: uppercase;margin-inline: 0.3rem;border-radius: 1.875rem;border: 1px solid var(--color-button);transition: all 0.3s ease;font-weight: 500;text-decoration: none;position: relative;overflow: hidden;font-size: clamp(0.7rem, 1.2vw, 1rem);width: auto} .no-appointments-content a: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);text-decoration: none} .no-appointments-contact{display: flex;align-items: center;justify-content: center;gap: 0.3rem} .no-appointments-contact p[data-translate="noAppointmentsContact_1"]{margin: 0} .no-appointments-contact p[data-translate="noAppointmentsContact_2"]{margin: 0} @media (max-width: 1024px){.termine-section .termine-content h2{text-align: center;width: 100%;margin-bottom: 2rem} .termine-section h2::after{left: 50%;transform: translateX(-50%)} .termine-grid{gap: 2rem} .termine-section{padding: 3.2rem 2rem 2rem 2rem} .detail-item{padding: 2rem 1.5rem} .detail-item li{font-size: clamp(1.1rem, 1.8vw, 2.1rem)} .no-appointments-content{padding: 2.5rem 1.5rem} .no-appointments-icon i{font-size: 2.5rem} .no-appointments-content a{padding: 0.3rem 0.6rem} } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px){.termine-btn{padding: 0.6rem 1.5rem !important} } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait){.termine-btn{padding: 0.6rem 1.5rem !important} } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape){.termine-btn{padding: 0.6rem 1.5rem} } @media (max-width: 768px){.termine-section{padding: 3.7rem 2rem 2rem 2rem} .termine-grid{gap: 3rem;grid-template-rows: 1fr 1fr;grid-template-columns: 1fr} .detail-item::after{display: none} .detail-content{grid-template-columns: 1fr} .detail-image{display: none} .termine-btn{display: block;margin: 0 auto;width: fit-content;padding: 0.6rem 1.5rem !important} .no-appointments-content{padding: 2rem 1rem} .no-appointments-icon i{font-size: 2rem} .no-appointments-content h3{font-size: clamp(1.3rem, 4vw, 1.8rem)} .no-appointments-content p{font-size: clamp(0.9rem, 2.5vw, 1.1rem)} .no-appointments-content a{padding: 0.4rem 0.5rem} .no-appointments-contact{flex-direction: column} } @media (max-width: 468px){.termine-section{padding: 4.6rem 2rem 2rem 2rem} .no-appointments-content{padding: 1.5rem 0.8rem} .no-appointments-icon i{font-size: 1.8rem} } @media (max-width: 368px){.termine-section{padding: 4.6rem 1rem 2rem 1rem} .no-appointments-content{padding: 1.2rem 0.5rem} }