/* ========================================= GLOBAL RESET & DEFAULT STYLES (ehemals im von index.html) ========================================= */ /* 1. Reset Styles */ html { line-height: 1.15; } body { margin: 0; } * { box-sizing: border-box; border-width: 0; border-style: solid; -webkit-font-smoothing: antialiased; } p, li, ul, pre, div, h1, h2, h3, h4, h5, h6, figure, blockquote, figcaption { margin: 0; padding: 0; } button { background-color: transparent; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, select { text-transform: none; } button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; color: inherit; } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } button:-moz-focus, [type="button"]:-moz-focus, [type="reset"]:-moz-focus, [type="submit"]:-moz-focus { outline: 1px dotted ButtonText; } a { color: inherit; text-decoration: inherit; } pre { white-space: normal; } input { padding: 2px 4px; } img { display: block; } details { display: block; margin: 0; padding: 0; } summary::-webkit-details-marker { display: none; } [data-thq="accordion"] [data-thq="accordion-content"] { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-in-out; padding: 0; } [data-thq="accordion"] details[data-thq="accordion-trigger"][open] + [data-thq="accordion-content"] { max-height: 1000vh; } details[data-thq="accordion-trigger"][open] summary [data-thq="accordion-icon"] { transform: rotate(180deg); } html { scroll-behavior: smooth; } /* 2. Default Styles (WICHTIG FÜR SCHRIFTARTEN) */ html { font-family: 'Inter', sans-serif; /* Sicherstellen, dass Inter geladen wird */ font-size: 16px; } body { font-weight: 400; font-style: normal; text-decoration: none; text-transform: none; letter-spacing: normal; line-height: 1.15; color: var(--dl-color-theme-neutral-dark); background: var(--dl-color-theme-neutral-light); fill: var(--dl-color-theme-neutral-dark); } /* === Inhalt von index.css === */ .home-container10 { width: 100%; display: flex; min-height: 100vh; align-items: center; flex-direction: column; justify-content: center; } .home-thq-navbar-interactive-elm { width: 100%; display: flex; align-items: center; padding-top: 1rem; padding-left: var(--dl-layout-space-threeunits); padding-right: var(--dl-layout-space-threeunits); padding-bottom: 1rem; justify-content: space-between; background-color: var(--dl-color-stillebewegung-background); } .home-container11 { gap: 12px; display: flex; align-items: center; } .home-icon100 { color: var(--dl-color-stillebewegung-textmenu); } .home-text11 { color: #5a8266; font-style: italic; font-weight: 400; } .home-thq-desktop-menu-elm { flex: 1; display: flex; justify-content: space-between; } .home-thq-links-elm1 { gap: var(--dl-layout-space-twounits); flex: 1; display: flex; align-items: center; flex-direction: row; justify-content: flex-end; } .home-thq-link-elm { text-decoration: none; } .home-link11 { text-decoration: none; } .home-link12 { text-decoration: none; } .home-link13 { cursor: pointer; padding-right: var(--dl-layout-space-twounits); text-decoration: none; } .home-thq-buttons-elm1 { display: flex; align-items: center; flex-direction: row; justify-content: space-between; } .home-thq-termin-buchen-elm { text-decoration: none; } .home-thq-burger-menu-elm { display: none; } .home-icon104 { width: var(--dl-layout-size-xsmall); height: var(--dl-layout-size-xsmall); } .home-thq-mobile-menu-elm { top: 0px; left: 0px; width: 100%; height: 100vh; display: flex; padding: 32px; z-index: 100; position: absolute; transform: translateX(100%); transition: 0.5s; flex-direction: column; justify-content: space-between; background-color: var(--dl-color-stillebewegung-background); } .home-thq-nav-elm { display: flex; align-items: flex-start; flex-direction: column; } .home-thq-top-elm { width: 100%; display: flex; align-items: center; margin-bottom: var(--dl-layout-space-threeunits); justify-content: space-between; } .home-container12 { gap: 8px; display: flex; align-items: center; } .home-icon106 { color: var(--dl-color-stillebewegung-textmenu); } .home-text12 { color: var(--dl-color-stillebewegung-textmenu); font-size: 28px; } .home-thq-close-menu-elm { display: flex; align-items: center; justify-content: center; } .home-icon110 { fill: var(--dl-color-stillebewegung-textmenu); width: var(--dl-layout-size-xsmall); height: var(--dl-layout-size-xsmall); } .home-thq-links-elm2 { flex: 0 0 auto; display: flex; align-self: flex-start; align-items: flex-start; flex-direction: column; } .home-thq-text6-elm { fill: var(--dl-color-stillebewegung-textmenu); color: var(--dl-color-stillebewegung-textmenu); cursor: pointer; margin-bottom: var(--dl-layout-space-unit); } .home-text13 { fill: var(--dl-color-stillebewegung-textmenu); color: var(--dl-color-stillebewegung-textmenu); margin-bottom: var(--dl-layout-space-unit); } .home-text14 { fill: var(--dl-color-stillebewegung-textmenu); color: var(--dl-color-stillebewegung-textmenu); margin-bottom: var(--dl-layout-space-unit); } .home-text15 { fill: var(--dl-color-stillebewegung-textmenu); color: var(--dl-color-stillebewegung-textmenu); margin-bottom: var(--dl-layout-space-unit); } .home-text16 { fill: var(--dl-color-stillebewegung-textmenu); color: var(--dl-color-stillebewegung-textmenu); margin-bottom: var(--dl-layout-space-unit); } .home-thq-buttons-elm2 { width: 100%; display: flex; margin-top: var(--dl-layout-space-unit); align-items: center; flex-direction: row; justify-content: space-between; } .home-icon112 { width: var(--dl-layout-size-xsmall); height: var(--dl-layout-size-xsmall); margin-right: var(--dl-layout-space-twounits); } .home-icon114 { width: var(--dl-layout-size-xsmall); height: var(--dl-layout-size-xsmall); margin-right: var(--dl-layout-space-twounits); } .home-icon116 { width: var(--dl-layout-size-xsmall); height: var(--dl-layout-size-xsmall); } .home-thq-hero-elm { width: 100%; height: 676px; display: flex; opacity: 1; max-height: 600px; min-height: auto; flex-direction: column; background-size: cover; background-image: url("Bilder/Hintergrund1.jpg"); scroll-margin-top: 100px; } .home-thq-titel-elm { top: 250px; flex: 0 0 auto; left: 0px; width: 100%; height: 220px; display: flex; padding: var(--dl-layout-space-twounits); z-index: 0; position: absolute; max-width: auto; align-self: stretch; align-items: center; aspect-ratio: auto; flex-direction: column; justify-content: center; } .home-thq-text-elm { display: flex; z-index: 1; align-items: center; flex-direction: column; justify-content: center; } .home-text17 { color: #2d3e34; display: flex; font-size: 40px; align-self: center; text-align: center; align-items: center; font-family: """Playfair Display", serif""; font-weight: 600; text-transform: none; justify-content: flex-start; text-decoration: none; } .home-text18 { fill: var(--dl-color-stillebewegung-background); color: var(--dl-color-stillebewegung-background); display: flex; align-self: center; text-align: center; align-items: center; padding-top: var(--dl-layout-space-twounits); justify-content: flex-start; } .home-thq-background-visabilty-elm { left: 0px; width: 100%; bottom: 4px; height: 220px; display: flex; opacity: 0.6; position: absolute; align-items: flex-start; background-color: var(--dl-color-stillebewegung-textmenu); } .home-text20 { color: #588157; display: inline-block; position: relative; font-style: italic; } .home-container13 { display: none; } .home-container14 { display: contents; } .home-container15 { display: none; } .home-container16 { display: contents; } .home-thq-therapie-main-title-elm { color: #2c3e50; font-size: 2.5rem; font-family: "'Playfair Display', serif"; font-weight: 700; } .home-text32 { color: white; display: inline-block; padding: 4px 12px; font-size: 0.875rem; background: linear-gradient(135deg, #6c8e9e 0%, #8baba5 100%); box-shadow: 0 2px 8px rgba(108, 142, 158, 0.25); font-weight: 600; margin-left: 8px; border-radius: 12px; letter-spacing: 0.3px; } .home-container17 { display: none; } .home-container18 { display: contents; } .home-container19 { display: none; } .home-container20 { display: contents; } .home-container21 { display: none; } .home-container22 { display: contents; } .home-thq-thq-contact-form-icon-elm1-elm { color: #8baba5; width: 18px; height: 18px; } .home-thq-thq-contact-form-icon-elm2-elm { color: #8baba5; width: 18px; height: 18px; } .home-thq-thq-contact-form-icon-elm3-elm { color: #8baba5; width: 18px; height: 18px; } .home-thq-thq-contact-form-icon-elm4-elm { color: #8baba5; width: 18px; height: 18px; } .home-thq-thq-contact-form-submit-text-elm-elm { z-index: 1; position: relative; } .home-thq-thq-contact-form-submit-icon-elm-elm { width: 20px; height: 20px; z-index: 1; position: relative; transition: transform 0.3s ease; } .home-thq-booking-section-elm { z-index: 1; margin-bottom: 120px; padding-bottom: 160px; } .home-thq-booking-container-elm { z-index: 10; } .home-text70 { font-weight: 700; } .home-container25 { display: none; } .home-container26 { display: contents; } .home-text73 { color: #5a8266; font-style: italic; font-weight: 400; } .home-container27 { display: none; } .home-container28 { display: contents; } .home-link20 { display: contents; } .home-container29 { right: 50px; border: 1px solid #ffffff5c; bottom: 30px; display: flex; z-index: 22; position: fixed; box-shadow: 5px 5px 10px 0px rgba(31, 31, 31, 0.4); min-height: auto; align-items: center; padding-top: 8px; padding-left: 12px; border-radius: 8px; padding-right: 12px; padding-bottom: 8px; backdrop-filter: blur(6px); background-color: rgba(41, 41, 41, 0.41); } .home-icon237 { width: 24px; margin-right: 4px; } .home-text78 { color: white; font-size: 13px; font-style: normal; font-weight: 500; line-height: 24px; } @media(max-width: 1600px) { .home-container10 { justify-content: flex-start; } .home-thq-navbar-interactive-elm { justify-content: space-between; } .home-text11 { color: #5a8266; font-style: italic; font-weight: 400; } .home-thq-links-elm1 { flex-direction: row; justify-content: flex-end; } .home-icon104 { display: block; } .home-thq-mobile-menu-elm { background-color: var(--dl-color-stillebewegung-background); } .home-text12 { fill: var(--dl-color-stillebewegung-textmenu); color: var(--dl-color-stillebewegung-textmenu); font-size: 32px; } .home-thq-hero-elm { height: 647px; display: flex; opacity: 0.8; position: static; background-size: cover; background-image: url("/functions/hintergrund11-1500w.jpg"); } .home-thq-titel-elm { left: 0px; bottom: 140px; position: absolute; justify-content: center; } .home-thq-text-elm { opacity: 1; flex-direction: column; } .home-text17 { fill: var(--dl-color-stillebewegung-background); color: var(--dl-color-stillebewegung-background); text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25); } .home-thq-preise-content-grid-elm { display: grid; align-self: stretch; justify-items: stretch; flex-direction: row; } .home-text32 { color: white; display: inline-block; padding: 4px 12px; font-size: 0.875rem; background: linear-gradient(135deg, rgb(108, 142, 158) 0%, rgb(139, 171, 165) 100%); box-shadow: rgba(108, 142, 158, 0.25) 0px 2px 8px; font-weight: 600; margin-left: 8px; border-radius: 12px; letter-spacing: 0.3px; } .home-container17 { display: none; } .home-thq-contact-section-elm1 { width: 100%; } .home-thq-contact-content-wrapper-elm { height: auto; } .home-thq-contact-left-column-elm { width: auto; } .home-thq-booking-info-section-elm { margin-bottom: 60px; } .home-thq-booking-iframe-elm { height: 1000px; } .home-text73 { color: #5a8266; font-style: italic; font-weight: 400; } } @media(max-width: 1200px) { .home-container10 { display: flex; justify-content: flex-start; } .home-thq-links-elm1 { gap: var(--dl-layout-space-unit); align-items: center; flex-direction: row; justify-content: flex-end; } .home-thq-hero-elm { width: auto; height: 663px; margin: 0px; display: flex; position: static; align-self: stretch; min-height: 500px; background-size: cover; background-image: url("/functions/hintergrund11-1500w.jpg"); } .home-thq-titel-elm { left: 0px; bottom: 140px; display: flex; opacity: 0.8; position: absolute; } .home-thq-background-visabilty-elm { display: block; } .home-text20 { color: #588157; display: inline-block; position: relative; font-style: italic; } .home-thq-about-me-bg-accent-elm { opacity: 1; } .home-thq-about-me-cv-column-elm2 { display: flex; } .home-thq-testimonials-section-elm1 { width: 100%; display: none; } .home-thq-testimonial-dot-elm1 { margin-left: 2px; margin-right: 2px; padding-left: 2px; padding-right: 2px; } .home-thq-testimonial-dot-elm2 { margin-left: 2px; margin-right: 2px; padding-left: 2px; padding-right: 2px; } .home-thq-testimonial-dot-elm3 { margin-left: 2px; margin-right: 2px; padding-left: 2px; padding-right: 2px; } .home-thq-carousel-dot-elm1 { margin-left: 2px; margin-right: 2px; padding-left: 2px; padding-right: 2px; } .home-thq-carousel-dot-elm2 { margin-left: 2px; margin-right: 2px; padding-left: 2px; padding-right: 2px; } .home-thq-thq-contact-location-card-elm-elm { height: auto; } .home-thq-contact-location-content-elm1 { padding-top: var(--dl-layout-space-twounits); } .home-thq-contact-location-content-elm2 { padding-top: var(--dl-layout-space-twounits); } } @media(max-width: 991px) { .home-thq-hero-elm { display: flex; } .home-thq-titel-elm { z-index: 2; } .home-thq-booking-section-elm { margin-bottom: 80px; padding-bottom: 120px; } .home-thq-booking-iframe-elm { height: 1300px; } } @media(max-width: 767px) { .home-thq-navbar-interactive-elm { padding-left: var(--dl-layout-space-twounits); padding-right: var(--dl-layout-space-twounits); } .home-thq-desktop-menu-elm { display: none; } .home-thq-burger-menu-elm { display: flex; align-items: center; justify-content: center; } .home-icon104 { fill: var(--dl-color-stillebewegung-textmenu); width: var(--dl-layout-size-small); height: var(--dl-layout-size-xsmall); } .home-thq-text6-elm { margin-bottom: var(--dl-layout-space-unit); } .home-text13 { margin-bottom: var(--dl-layout-space-unit); } .home-text14 { margin-left: 0; margin-bottom: var(--dl-layout-space-unit); } .home-text15 { margin-left: 0; margin-bottom: var(--dl-layout-space-unit); } .home-text16 { margin-left: 0; margin-bottom: var(--dl-layout-space-unit); } .home-thq-contact-section-elm1 { height: 2300px; margin-bottom: 40px; padding-bottom: 60px; } .home-thq-thq-contact-location-card-elm-elm { height: 1500px; margin-top: 40px; margin-bottom: 40px; } .home-thq-booking-section-elm { margin: 0px; padding-bottom: 80px; } } @media(max-width: 479px) { .home-thq-navbar-interactive-elm { padding: var(--dl-layout-space-unit); } .home-thq-mobile-menu-elm { padding: 16px; } .home-text32 { width: fit-content; display: block; padding: 6px 12px; font-size: 0.875rem; margin-top: 8px; margin-left: 0; } .home-thq-testimonials-section-elm1 { width: 100%; } .home-thq-contact-section-elm1 { height: auto; z-index: auto; margin-bottom: 40px; padding-bottom: 60px; } .home-thq-contact-content-wrapper-elm { height: auto; } .home-thq-thq-contact-location-card-elm-elm { height: auto; z-index: auto; } .home-thq-contact-location-grid-elm { height: auto; margin-bottom: var(--dl-layout-space-halfunit); padding-bottom: 0px; } .home-thq-booking-section-elm { z-index: auto; margin-top: 40px; padding-top: 60px; margin-bottom: 40px; padding-bottom: 60px; } .home-thq-booking-calendar-card-elm { display: block; } .home-thq-booking-calendar-wrapper-elm { overflow: visible; } .home-thq-booking-iframe-elm { width: 100%; height: 1450px; } } /* ===== CSS Variables ===== */ :root { --dl-color-stillebewegung-background: #8baba5; --dl-color-stillebewegung-textmenu: #ffffff; --dl-layout-space-unit: 16px; --dl-layout-space-halfunit: 8px; --dl-layout-space-oneandhalfunits: 24px; --dl-layout-space-twounits: 32px; --dl-layout-space-threeunits: 48px; --dl-layout-space-fourunits: 64px; --dl-layout-space-fiveunits: 80px; --dl-layout-space-sixunits: 96px; } /* ===== Therapie Section ===== */ .home-thq-therapie-elm { width: 100%; display: flex; padding: var(--dl-layout-space-sixunits) var(--dl-layout-space-threeunits); overflow: hidden; position: relative; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); min-height: 100vh; align-items: center; flex-direction: column; scroll-margin-top: 80px; } .home-therapie-header { z-index: 1; position: relative; text-align: center; margin-bottom: var(--dl-layout-space-fiveunits); } .home-thq-therapie-main-title-elm { color: var(--dl-color-stillebewegung-background); margin: 0; display: inline-block; position: relative; font-size: 3.5rem; font-family: "Playfair Display", serif; font-weight: 700; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); letter-spacing: -0.5px; } .home-therapie-content-wrapper { gap: var(--dl-layout-space-fiveunits); width: 100%; display: flex; z-index: 1; position: relative; max-width: 1400px; flex-direction: column; } /* ===== Therapie Cards ===== */ .home-therapie-card { padding: var(--dl-layout-space-fourunits); overflow: hidden; position: relative; background: rgba(255, 255, 255, 0.95); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 24px; } .home-therapie-card::before { top: 0; left: 0; right: 0; height: 5px; content: ""; opacity: 0; position: absolute; background: linear-gradient(90deg, #8bbae0, #c6a7fe); transition: opacity 0.4s ease; } .home-therapie-card:hover { transform: translateY(-8px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12); } .home-therapie-card:hover::before { opacity: 1; } .home-therapie-card:hover .home-therapie-image-wrapper { transform: scale(1.03); } .home-therapie-card:hover .home-therapie-image-wrapper::after { opacity: 1; } .home-therapie-card-content1 { gap: var(--dl-layout-space-fourunits); display: grid; align-items: center; grid-template-columns: 1fr 400px; } .therapie-card-reverse .home-therapie-card-content1 { grid-template-columns: 400px 1fr; } .therapie-text-section { gap: var(--dl-layout-space-oneandhalfunits); display: flex; flex-direction: column; } .home-therapie-text-section { gap: var(--dl-layout-space-oneandhalfunits); display: flex; flex-direction: column; } .therapie-image-section { position: relative; } .home-therapie-card-title { color: var(--dl-color-stillebewegung-background); width: fit-content; margin: 0 0 var(--dl-layout-space-unit) 0; display: inline-block; position: relative; font-size: 2.25rem; font-family: "Inter", sans-serif; font-weight: 700; letter-spacing: -0.3px; } .home-therapie-card-title::after { left: 0; width: 50px; bottom: -8px; height: 3px; content: ""; position: absolute; background: linear-gradient(90deg, #8bbae0, #c6a7fe); border-radius: 2px; } .home-therapie-card-description { color: #4a5568; font-size: 1.05rem; font-family: "Inter", sans-serif; line-height: 1.8; } .home-therapie-card-description p { margin: 0 0 var(--dl-layout-space-unit) 0; } .home-therapie-image-wrapper { width: 100%; height: 450px; overflow: hidden; position: relative; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 20px; } .home-therapie-image-wrapper::after { inset: 0; content: ""; opacity: 0; position: absolute; background: linear-gradient(135deg, rgba(139, 186, 224, 0.1) 0%, rgba(198, 167, 254, 0.1) 100%); transition: opacity 0.4s ease; } .therapie-image { width: 100%; height: 100%; display: block; object-fit: cover; } .home-therapie-quote { color: #2d3748; margin: var(--dl-layout-space-oneandhalfunits) 0; padding: var(--dl-layout-space-oneandhalfunits); position: relative; font-size: 1rem; background: linear-gradient(135deg, rgba(139, 186, 224, 0.08) 0%, rgba(198, 167, 254, 0.08) 100%); font-style: italic; border-left: 4px solid #8bbae0; line-height: 1.7; border-radius: 0 12px 12px 0; } .home-therapie-quote::before { top: -10px; left: 10px; color: rgba(139, 186, 224, 0.3); content: '"'; position: absolute; font-size: 4rem; font-family: Georgia, serif; line-height: 1; } .therapie-translation-label { color: var(--dl-color-stillebewegung-background); margin-top: var(--dl-layout-space-unit); font-weight: 600; } .home-therapie-translation { color: #8baba5; font-style: italic; border-left: 3px solid #c6a7fe; padding-left: var(--dl-layout-space-oneandhalfunits); } /* ===== Preise Section ===== */ .home-preise-section { width: 100%; display: flex; padding: var(--dl-layout-space-fiveunits) var(--dl-layout-space-threeunits); overflow: hidden; position: relative; background: linear-gradient(135deg, rgba(108, 142, 158, 0.03) 0%, rgba(139, 171, 165, 0.05) 100%); align-items: center; justify-content: center; scroll-margin-top: 80px; margin-top: var(--dl-layout-space-fiveunits); border-radius: 24px; } .home-preise-container { gap: var(--dl-layout-space-threeunits); width: 100%; display: flex; position: relative; max-width: 1400px; flex-direction: column; } .preise-header { gap: var(--dl-layout-space-unit); display: flex; position: relative; align-items: center; flex-direction: column; } .home-preise-title { color: var(--dl-color-stillebewegung-background); margin: 0; font-size: 2.5rem; text-align: center; font-family: "PT Serif", serif; font-weight: 700; letter-spacing: -0.5px; } .preise-title-line { width: 80px; height: 4px; background: linear-gradient(90deg, transparent, #6c8e9e, transparent); border-radius: 2px; } .preise-content-grid { gap: var(--dl-layout-space-twounits); display: grid; z-index: 2; position: relative; grid-template-columns: repeat(2, 1fr); } .home-preise-pricing-card { gap: var(--dl-layout-space-twounits); border: 2px solid rgba(108, 142, 158, 0.2); height: 100%; display: flex; padding: var(--dl-layout-space-threeunits); overflow: hidden; position: relative; background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%); box-shadow: 0 8px 32px rgba(108, 142, 158, 0.15), 0 2px 8px rgba(108, 142, 158, 0.1); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 20px; flex-direction: column; } .home-preise-insurance-card { gap: var(--dl-layout-space-twounits); border: 2px solid rgba(108, 142, 158, 0.2); height: 100%; display: flex; padding: var(--dl-layout-space-threeunits); overflow: hidden; position: relative; background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%); box-shadow: 0 8px 32px rgba(108, 142, 158, 0.15), 0 2px 8px rgba(108, 142, 158, 0.1); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 20px; flex-direction: column; } .home-preise-pricing-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(108, 142, 158, 0.2), 0 4px 12px rgba(108, 142, 158, 0.15); border-color: rgba(108, 142, 158, 0.4); } .home-preise-pricing-card:hover .home-preise-icon-wrapper { transform: scale(1.05) rotate(5deg); box-shadow: 0 6px 20px rgba(108, 142, 158, 0.4); } .home-preise-insurance-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(108, 142, 158, 0.2), 0 4px 12px rgba(108, 142, 158, 0.15); border-color: rgba(108, 142, 158, 0.4); } .home-preise-insurance-card:hover .home-preise-icon-wrapper { transform: scale(1.05) rotate(5deg); box-shadow: 0 6px 20px rgba(108, 142, 158, 0.4); } .preise-card-header { gap: var(--dl-layout-space-unit); width: 100%; display: flex; align-items: center; } .preise-card-body { gap: var(--dl-layout-space-unit); display: flex; flex-direction: column; } .home-preise-icon-wrapper { width: 52px; height: 52px; display: flex; position: relative; background: linear-gradient(135deg, #6c8e9e 0%, #8baba5 100%); box-shadow: 0 4px 16px rgba(108, 142, 158, 0.3); transition: all 0.3s ease; align-items: center; flex-shrink: 0; border-radius: 14px; justify-content: center; } .home-preise-icon-wrapper-secondary { background: linear-gradient(135deg, #8baba5 0%, #6c8e9e 100%); } .home-preise-icon { color: white; width: 28px; height: 28px; } .home-preise-card-title { color: var(--dl-color-stillebewegung-background); margin: 0; font-size: 1.5rem; font-family: "PT Serif", serif; font-weight: 700; } .home-preise-duration { color: #4a5568; margin: 0; font-size: 1rem; font-family: "Inter", sans-serif; font-weight: 500; letter-spacing: 0.2px; line-height: 1.7; } .preise-amount-wrapper { gap: 4px; display: flex; align-items: baseline; } .home-preise-info-list { gap: var(--dl-layout-space-twounits); height: 100%; display: grid; justify-content: center; grid-template-columns: repeat(2, 1fr); } .preise-info-item { gap: var(--dl-layout-space-unit); display: flex; align-items: flex-start; } .home-preise-bullet { width: 28px; height: 28px; display: flex; background: linear-gradient(135deg, rgba(139, 171, 165, 0.15) 0%, rgba(108, 142, 158, 0.15) 100%); align-items: center; flex-shrink: 0; border-radius: 8px; justify-content: center; } .home-preise-bullet-icon { color: #6c8e9e; width: 20px; height: 20px; } .home-preise-info-text { flex: 1; color: #4a5568; margin: 0; font-size: 1.05rem; font-family: "Inter", sans-serif; line-height: 1.7; } .home-text32 { color: white; display: inline-block; padding: 4px 12px; font-size: 0.875rem; background: linear-gradient(135deg, #6c8e9e 0%, #8baba5 100%); box-shadow: 0 2px 8px rgba(108, 142, 158, 0.25); font-weight: 600; margin-left: 8px; border-radius: 12px; letter-spacing: 0.3px; } .preise-card-decoration { background: radial-gradient(circle at top right, rgba(139, 171, 165, 0.08) 0%, transparent 70%); } .preise-card-decoration-secondary { background: radial-gradient(circle at top right, rgba(139, 171, 165, 0.08) 0%, transparent 70%); } .preise-bg-decoration { opacity: 0.4; z-index: 1; position: absolute; border-radius: 50%; pointer-events: none; } .preise-bg-decoration-1 { top: -80px; right: -80px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(108, 142, 158, 0.12) 0%, transparent 70%); } .preise-bg-decoration-2 { left: -60px; width: 250px; bottom: -60px; height: 250px; background: radial-gradient(circle, rgba(139, 171, 165, 0.12) 0%, transparent 70%); } /* ===== Animations ===== */ @keyframes float-slow { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } } @keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ===== Responsive ===== */ @media (max-width: 1200px) { .home-thq-therapie-elm { padding: var(--dl-layout-space-fiveunits) var(--dl-layout-space-twounits); } .home-thq-therapie-main-title-elm { font-size: 3rem; } .home-therapie-card-content1 { gap: var(--dl-layout-space-threeunits); grid-template-columns: 1fr; } .therapie-card-reverse .home-therapie-card-content1 { grid-template-columns: 1fr; } .home-preise-section { padding: var(--dl-layout-space-fourunits) var(--dl-layout-space-twounits); } .home-preise-title { font-size: 2.25rem; } .preise-content-grid { grid-template-columns: 1fr; } } @media (max-width: 991px) { .home-thq-therapie-elm { padding: var(--dl-layout-space-fourunits) var(--dl-layout-space-oneandhalfunits); min-height: auto; } .home-thq-therapie-main-title-elm { font-size: 2.5rem; } .home-therapie-card { padding: var(--dl-layout-space-twounits); } .home-therapie-card-content1 { gap: var(--dl-layout-space-twounits); } .home-preise-section { padding: var(--dl-layout-space-threeunits) var(--dl-layout-space-oneandhalfunits); } .home-preise-title { font-size: 2rem; } .preise-content-grid { grid-template-columns: 1fr; } .home-preise-pricing-card { padding: var(--dl-layout-space-twounits); } .home-preise-insurance-card { padding: var(--dl-layout-space-twounits); } .home-preise-info-list { grid-template-columns: 1fr; } } @media (max-width: 767px) { .home-thq-therapie-elm { padding: var(--dl-layout-space-threeunits) var(--dl-layout-space-unit); } .home-therapie-header { margin-bottom: var(--dl-layout-space-threeunits); } .home-thq-therapie-main-title-elm { font-size: 2rem; } .home-therapie-content-wrapper { gap: var(--dl-layout-space-threeunits); } .home-therapie-card { padding: var(--dl-layout-space-oneandhalfunits); } .home-therapie-card-content1 { gap: var(--dl-layout-space-oneandhalfunits); } .home-therapie-card-title { font-size: 1.75rem; } .home-therapie-card-description { font-size: 0.95rem; } .home-therapie-quote { padding: var(--dl-layout-space-unit); font-size: 0.9rem; } .home-therapie-image-wrapper { height: 300px; } .preise-header { margin-bottom: var(--dl-layout-space-twounits); } .home-preise-section { padding: var(--dl-layout-space-twounits) var(--dl-layout-space-unit); margin-top: var(--dl-layout-space-threeunits); } .home-preise-title { font-size: 1.75rem; } .home-preise-pricing-card { padding: var(--dl-layout-space-oneandhalfunits); } .home-preise-insurance-card { padding: var(--dl-layout-space-oneandhalfunits); } .home-preise-info-list { gap: var(--dl-layout-space-unit); } .preise-info-item { gap: 8px; } .home-preise-info-text { font-size: 0.95rem; } } @media (max-width: 479px) { .home-thq-therapie-elm { padding: var(--dl-layout-space-twounits) var(--dl-layout-space-unit); } .home-thq-therapie-main-title-elm { font-size: 1.5rem; } .home-therapie-card { padding: var(--dl-layout-space-unit); } .home-therapie-card-content1 { gap: var(--dl-layout-space-unit); } .home-therapie-card-title { font-size: 1.5rem; margin-bottom: 8px; } .home-therapie-card-description { font-size: 0.9rem; line-height: 1.6; } .home-therapie-quote { padding: 12px; font-size: 0.85rem; margin: 12px 0; } .home-therapie-image-wrapper { height: 250px; } .home-preise-section { padding: var(--dl-layout-space-oneandhalfunits) var(--dl-layout-space-unit); margin-top: var(--dl-layout-space-twounits); } .home-preise-title { font-size: 1.5rem; } .home-preise-pricing-card { padding: var(--dl-layout-space-unit); } .home-preise-insurance-card { padding: var(--dl-layout-space-unit); } .home-preise-card-title { font-size: 1.25rem; } .home-preise-duration { font-size: 0.9rem; } .home-preise-info-list { gap: 12px; } .preise-info-item { gap: 6px; } .home-preise-info-text { font-size: 0.85rem; line-height: 1.5; } .home-text32 { padding: 2px 8px; font-size: 0.75rem; margin-left: 4px; } } /* === Inhalt von style.css === */ :root { --dl-layout-size-large: 144px; --dl-layout-size-small: 48px; --dl-layout-space-unit: 16px; --dl-layout-size-medium: 96px; --dl-layout-size-xlarge: 192px; --dl-layout-size-xsmall: 16px; --dl-color-theme-accent1: #C9E8FF; --dl-color-theme-accent2: #B2D1E6; --dl-layout-radius-round: 50%; --dl-layout-size-xxlarge: 288px; --dl-color-theme-primary1: #147487; --dl-color-theme-primary2: #0A3A44; --dl-layout-size-maxwidth: 1400px; --dl-layout-radius-radius2: 2px; --dl-layout-radius-radius4: 4px; --dl-layout-radius-radius8: 8px; --dl-layout-space-halfunit: 8px; --dl-layout-space-sixunits: 96px; --dl-layout-space-twounits: 32px; --dl-color-theme-secondary1: #A9D5DD; --dl-color-theme-secondary2: #F7F7F7; --dl-layout-space-fiveunits: 80px; --dl-layout-space-fourunits: 64px; --dl-layout-space-threeunits: 48px; --dl-color-theme-neutral-dark: #2c3e50; --dl-layout-radius-cardradius: 8px; --dl-color-theme-neutral-light: #fcfdfd; --dl-layout-radius-imageradius: 8px; --dl-layout-radius-inputradius: 24px; --dl-layout-radius-buttonradius: 24px; --dl-layout-space-oneandhalfunits: 24px; --dl-color-stillebewegung-textmenu: #ffffff; --dl-color-stillebewegung-background: #8baba5; } .button { color: var(--dl-color-theme-neutral-dark); display: inline-block; padding: 0.5rem 1rem; border-color: var(--dl-color-theme-neutral-dark); border-width: 1px; border-radius: 4px; background-color: var(--dl-color-theme-neutral-light); } .input { color: var(--dl-color-theme-neutral-dark); cursor: auto; padding: 0.5rem 1rem; border-color: var(--dl-color-theme-neutral-dark); border-width: 1px; border-radius: 4px; background-color: var(--dl-color-theme-neutral-light); } .textarea { color: var(--dl-color-theme-neutral-dark); cursor: auto; padding: 0.5rem; border-color: var(--dl-color-theme-neutral-dark); border-width: 1px; border-radius: 4px; background-color: var(--dl-color-theme-neutral-light); } .list { width: 100%; margin: 1em 0px 1em 0px; display: block; padding: 0px 0px 0px 1.5rem; list-style-type: none; list-style-position: outside; } .list-item { display: list-item; } .teleport-show { display: flex !important; transform: translateX(0%) !important; } .thq-input { color: var(--dl-color-theme-neutral-dark); cursor: auto; outline: none; padding: 0.5rem 1rem; align-self: stretch; text-align: center; border-color: var(--dl-color-theme-neutral-dark); border-width: 1px; border-radius: var(--dl-layout-radius-inputradius); background-color: var(--dl-color-theme-neutral-light); } .thq-input:focus { outline: 1px solid var(--dl-color-theme-primary1); } .thq-button-filled { gap: var(--dl-layout-space-halfunit); fill: var(--dl-color-theme-secondary1); color: var(--dl-color-theme-secondary1); cursor: pointer; display: flex; transition: 0.3s; align-items: center; font-weight: bold; padding-top: var(--dl-layout-space-halfunit); white-space: nowrap; border-color: var(--dl-color-theme-primary1); border-width: 1px; padding-left: var(--dl-layout-space-oneandhalfunits); border-radius: var(--dl-layout-radius-buttonradius); padding-right: var(--dl-layout-space-oneandhalfunits); padding-bottom: var(--dl-layout-space-halfunit); justify-content: center; background-color: var(--dl-color-theme-primary1); } .thq-button-filled:hover { fill: var(--dl-color-theme-secondary2); color: var(--dl-color-theme-secondary2); border-color: var(--dl-color-theme-primary2); background-color: var(--dl-color-theme-primary2); } .thq-button-outline { gap: var(--dl-layout-space-halfunit); fill: var(--dl-color-theme-primary1); color: var(--dl-color-theme-primary1); border: 1px solid; cursor: pointer; display: flex; transition: 0.3s; align-items: center; font-weight: bold; padding-top: var(--dl-layout-space-halfunit); white-space: nowrap; border-color: var(--dl-color-theme-primary1); padding-left: var(--dl-layout-space-oneandhalfunits); border-radius: var(--dl-layout-radius-buttonradius); padding-right: var(--dl-layout-space-oneandhalfunits); padding-bottom: var(--dl-layout-space-halfunit); justify-content: center; } .thq-button-outline:hover { fill: var(--dl-color-theme-secondary2); color: var(--dl-color-theme-secondary2); border-color: var(--dl-color-theme-primary2); background-color: var(--dl-color-theme-primary2); } .thq-button-flat { gap: var(--dl-layout-space-halfunit); fill: var(--dl-color-theme-primary1); color: var(--dl-color-theme-primary1); cursor: pointer; display: flex; transition: 0.3s; align-items: center; font-weight: bold; padding-top: var(--dl-layout-space-halfunit); white-space: nowrap; border-color: transparent; border-width: 1px; padding-left: var(--dl-layout-space-oneandhalfunits); border-radius: var(--dl-layout-radius-buttonradius); padding-right: var(--dl-layout-space-oneandhalfunits); padding-bottom: var(--dl-layout-space-halfunit); justify-content: center; } .thq-button-flat:hover { fill: var(--dl-color-theme-secondary1); color: var(--dl-color-theme-secondary1); border-color: var(--dl-color-theme-primary2); background-color: var(--dl-color-theme-primary2); } .thq-heading-1 { font-size: 48px; font-family: PT Serif; font-weight: 700; line-height: 1.5; } .thq-heading-2 { font-size: 35px; font-family: PT Serif; font-weight: 600; line-height: 1.5; } .thq-heading-3 { font-size: 26px; font-family: PT Serif; font-weight: 600; line-height: 1.5; } .thq-body-large { font-size: 18px; font-family: Inter Tight; line-height: 1.5; } .thq-body-small { font-size: 16px; font-family: Inter Tight; line-height: 1.5; } .thq-team-image-round { width: 80px; height: 80px; object-fit: cover; border-radius: 50%; } .thq-section-padding { width: 100%; display: flex; padding: var(--dl-layout-space-fiveunits); position: relative; align-items: center; flex-direction: column; } .thq-section-max-width { width: 100%; max-width: var(--dl-layout-size-maxwidth); } .thq-img-ratio-1-1 { width: 100%; object-fit: cover; aspect-ratio: 1/1; border-radius: var(--dl-layout-radius-imageradius); } .thq-img-ratio-16-9 { width: 100%; object-fit: cover; aspect-ratio: 16/9; border-radius: var(--dl-layout-radius-imageradius); } .thq-img-ratio-4-3 { width: 100%; object-fit: cover; aspect-ratio: 4/3; border-radius: var(--dl-layout-radius-imageradius); } .thq-img-ratio-4-6 { width: 100%; object-fit: cover; aspect-ratio: 4/6; border-radius: var(--dl-layout-radius-imageradius); } .thq-img-round { width: 100%; border-radius: var(--dl-layout-radius-round); } .thq-flex-column { gap: var(--dl-layout-space-twounits); display: flex; overflow: hidden; position: relative; align-items: center; flex-direction: column; } .thq-flex-row { gap: var(--dl-layout-space-twounits); display: flex; overflow: hidden; position: relative; align-items: center; } .thq-grid-6 { display: grid; grid-gap: var(--dl-layout-space-twounits); grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; } .thq-grid-5 { display: grid; grid-gap: var(--dl-layout-space-twounits); grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } .thq-card { gap: var(--dl-layout-space-oneandhalfunits); display: flex; padding: var(--dl-layout-space-twounits); align-items: stretch; border-radius: var(--dl-layout-radius-cardradius); flex-direction: column; } .thq-box-shadow { box-shadow: 0px 0px 5px -2px var(--dl-color-theme-neutral-dark); } .thq-grid-3 { display: grid; grid-gap: var(--dl-layout-space-twounits); grid-template-columns: 1fr 1fr 1fr; } .thq-grid-4 { display: grid; grid-gap: var(--dl-layout-space-twounits); grid-template-columns: 1fr 1fr 1fr 1fr; } .thq-grid-2 { width: 100%; display: grid; grid-gap: var(--dl-layout-space-twounits); grid-template-columns: 1fr 1fr; } .thq-checkbox { width: var(--dl-layout-size-xsmall); height: var(--dl-layout-size-xsmall); } .thq-select { cursor: pointer; appearance: none; padding-top: var(--dl-layout-space-halfunit); padding-left: var(--dl-layout-space-unit); border-radius: var(--dl-layout-radius-inputradius); padding-right: var(--dl-layout-space-twounits); padding-bottom: var(--dl-layout-space-halfunit); background-color: var(--dl-color-theme-neutral-light); background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg width%3D%2220%22 height%3D%2220%22 xmlns%3D%22http%3A//www.w3.org/2000/svg%22 viewBox%3D%220 0 20 20%22 fill%3D%22%23000%22%3E%3Cpath d%3D%22M4.293 7.293a1 1 0 011.414 0L10 11.586l4.293-4.293a1 1 0 111.414 1.414l-5 5a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414z%22/%3E%3C/svg%3E'); background-repeat: no-repeat; background-position: right 8px center; } .thq-divider-horizontal { width: 100%; height: 1px; background-color: var(--dl-color-theme-neutral-dark); } .thq-icon-small { width: 24px; height: 24px; } .thq-button-icon { fill: var(--dl-color-theme-secondary1); padding: 3px; transition: 0.3s; border-radius: var(--dl-layout-radius-round); } .thq-button-icon:hover { fill: var(--dl-color-theme-secondary2); } .thq-icon-medium { width: var(--dl-layout-size-small); height: var(--dl-layout-size-small); } .thq-icon-x-small { width: var(--dl-layout-size-xsmall); height: var(--dl-layout-size-xsmall); } .thq-link { cursor: pointer; display: inline-block; overflow: hidden; background: linear-gradient(to right, var(--dl-color-theme-primary1) 50%, var(--dl-color-theme-neutral-dark) 50%); transition: background-position 300ms ease; font-weight: 600; background-clip: text; background-size: 200% 100%; background-position: 100%; -webkit-text-fill-color: transparent; } .thq-link:hover { background-position: 0 100%; } .thq-grid-auto-300 { display: grid; grid-gap: var(--dl-layout-space-oneandhalfunits); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .thq-animated-group-vertical-reverse { gap: var(--dl-layout-space-unit); width: 100%; display: flex; animation: scroll-y 20s linear infinite; align-items: flex-start; flex-direction: column; justify-content: space-around; animation-direction: reverse; } .thq-animated-group-horizontal-reverse { gap: var(--dl-layout-space-unit); display: flex; animation: scroll-x 20s linear infinite; min-width: 100%; align-items: center; flex-shrink: 0; justify-content: space-around; animation-direction: reverse; } .thq-animated-group-vertical { gap: var(--dl-layout-space-unit); width: 100%; display: flex; animation: scroll-y 20s linear infinite; align-items: flex-start; flex-direction: column; justify-content: space-around; } .thq-animated-group-horizontal { gap: var(--dl-layout-space-unit); display: flex; animation: scroll-x 20s linear infinite; min-width: 100%; align-items: center; flex-shrink: 0; justify-content: space-around; } .thq-animated-group-container-vertical { gap: var(--dl-layout-space-unit); display: flex; overflow: hidden; flex-direction: column; } .thq-animated-group-container-horizontal { gap: var(--dl-layout-space-unit); display: flex; overflow: hidden; } .thq-mask-image-vertical { mask-image: linear-gradient(to bottom, transparent, black 1%, black 99%, transparent); } .thq-mask-image-horizontal { mask-image: linear-gradient(to right, transparent, black 1%, black 99%, transparent); } .thq-img-scale { transition: 0.3s; } .thq-img-scale:hover { scale: 1.05; } .thq-animated-card-bg-1 { width: 100%; height: 100%; transition: transform 0.3s; border-radius: var(--dl-layout-radius-cardradius); background-color: var(--dl-color-theme-accent1); } .thq-animated-card-bg-2 { transition: transform 0.3s; border-radius: var(--dl-layout-radius-cardradius); background-color: var(--dl-color-theme-accent2); } .thq-button-animated { outline: none; z-index: 1; overflow: hidden; position: relative; border-width: 2px; } .thq-input::placeholder { text-align: center; vertical-align: middle; } .thq-animated-group-container-vertical:hover div { animation-play-state: paused; } .thq-animated-group-container-horizontal:hover div { animation-play-state: paused; } .thq-animated-card-bg-2:has([data-animated="true"]:hover) { transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(3deg) skew(0deg, 0deg); } .thq-animated-card-bg-1:has([data-animated="true"]:hover) { transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(-6deg) skew(0deg, 0deg); } .thq-button-animated:before { top: 0; left: -20%; color: var(--dl-color-theme-neutral-light); width: 200%; height: 101%; content: ""; z-index: 1; position: absolute; transform: scaleX(0); transition: transform 0.5s; border-radius: var(--dl-layout-radius-buttonradius); background-color: var(--dl-color-theme-neutral-dark); transform-origin: 0 0; transition-timing-function: cubic-bezier(0.5, 1.6, 0.4, 0.7); } .thq-button-animated:hover::before { color: var(--dl-color-theme-neutral-light); z-index: -1; transform: scaleX(1); } .thq-therapie-elm { width: 100%; display: flex; padding: var(--dl-layout-space-sixunits) var(--dl-layout-space-threeunits); overflow: hidden; position: relative; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); min-height: 100vh; align-items: center; flex-direction: column; } .therapie-header { z-index: 1; position: relative; text-align: center; margin-bottom: var(--dl-layout-space-fiveunits); } .therapie-content-wrapper { gap: var(--dl-layout-space-fiveunits); width: 100%; display: flex; z-index: 1; position: relative; max-width: 1400px; flex-direction: column; } .therapie-main-title { color: var(--dl-color-stillebewegung-background); margin: 0; display: inline-block; position: relative; font-size: 3.5rem; font-family: "Inter", sans-serif; font-weight: 700; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); letter-spacing: -0.5px; } .therapie-card { padding: var(--dl-layout-space-fourunits); overflow: hidden; position: relative; background: rgba(255, 255, 255, 0.95); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 24px; } .therapie-card-content { gap: var(--dl-layout-space-fourunits); display: grid; align-items: center; grid-template-columns: 1fr 400px; } .therapie-text-section { gap: var(--dl-layout-space-oneandhalfunits); display: flex; flex-direction: column; } .therapie-image-section { position: relative; } .therapie-card-title { color: var(--dl-color-stillebewegung-background); width: fit-content; margin: 0 0 var(--dl-layout-space-unit) 0; display: inline-block; position: relative; font-size: 2.25rem; font-family: "Inter", sans-serif; font-weight: 700; letter-spacing: -0.3px; } .therapie-card-description { color: #4a5568; font-size: 1.05rem; font-family: "Inter", sans-serif; line-height: 1.8; } .therapie-image-wrapper { width: 100%; height: 450px; overflow: hidden; position: relative; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 20px; } .therapie-quote { color: #2d3748; margin: var(--dl-layout-space-oneandhalfunits) 0; padding: var(--dl-layout-space-oneandhalfunits); position: relative; font-size: 1rem; background: linear-gradient(135deg, rgba(139, 186, 224, 0.08) 0%, rgba(198, 167, 254, 0.08) 100%); font-style: italic; border-left: 4px solid #8bbae0; line-height: 1.7; border-radius: 0 12px 12px 0; } .therapie-translation-label { color: var(--dl-color-stillebewegung-background); margin-top: var(--dl-layout-space-unit); font-weight: 600; } .therapie-translation { color: #5a6c7d; font-style: italic; border-left: 3px solid #c6a7fe; padding-left: var(--dl-layout-space-oneandhalfunits); } .therapie-image { width: 100%; height: 100%; display: block; object-fit: cover; } .thq-therapie-elm::before { top: -50%; right: -10%; width: 600px; height: 600px; content: ""; position: absolute; background: radial-gradient(circle, rgba(198, 167, 254, 0.15) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .thq-therapie-elm::after { left: -5%; width: 500px; bottom: -30%; height: 500px; content: ""; position: absolute; background: radial-gradient(circle, rgba(139, 186, 224, 0.15) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .therapie-main-title::after { left: 50%; width: 80px; bottom: -15px; height: 4px; content: ""; position: absolute; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--dl-color-stillebewegung-background), transparent); border-radius: 2px; } .therapie-card::before { top: 0; left: 0; right: 0; height: 5px; content: ""; opacity: 0; position: absolute; background: linear-gradient(90deg, #8bbae0, #c6a7fe); transition: opacity 0.4s ease; } .therapie-card:hover { transform: translateY(-8px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12); } .therapie-card:hover::before { opacity: 1; } .therapie-card:hover .therapie-image-wrapper { transform: scale(1.03); } .therapie-card:hover .therapie-image-wrapper::after { opacity: 1; } .therapie-card-reverse .therapie-card-content { grid-template-columns: 400px 1fr; } .therapie-card-title::after { left: 0; width: 50px; bottom: -8px; height: 3px; content: ""; position: absolute; background: linear-gradient(90deg, #8bbae0, #c6a7fe); border-radius: 2px; } .therapie-card-description p { margin: 0 0 var(--dl-layout-space-unit) 0; } .therapie-quote::before { top: -10px; left: 10px; color: rgba(139, 186, 224, 0.3); content: '"'; position: absolute; font-size: 4rem; font-family: Georgia, serif; line-height: 1; } .therapie-image-wrapper::after { inset: 0; content: ""; opacity: 0; position: absolute; background: linear-gradient(135deg, rgba(139, 186, 224, 0.1) 0%, rgba(198, 167, 254, 0.1) 100%); transition: opacity 0.4s ease; } .home-therapie-card-content { gap: var(--dl-layout-space-fourunits); display: grid; align-items: center; grid-template-columns: 400px 1fr; } .therapie-card-reverse1 .therapie-card-content { grid-template-columns: 1fr 400px; } .about-me-section { width: 100%; padding: 120px 20px; overflow: hidden; position: relative; background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 50%, #f0f4f8 100%); font-family: Inter, sans-serif; scroll-margin-top: 80px; } .about-me-bg-accent { top: -150px; right: -100px; width: 600px; height: 600px; z-index: 1; position: absolute; animation: float-slow 20s ease-in-out infinite; background: radial-gradient(circle, rgba(139, 171, 165, 0.08) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .about-me-bg-gradient { left: -100px; width: 500px; bottom: -100px; height: 500px; z-index: 1; position: absolute; animation: float-slow 25s ease-in-out infinite reverse; background: radial-gradient(circle, rgba(108, 142, 158, 0.06) 0%, transparent 70%); border-radius: 50%; } .about-me-container { margin: 0 auto; z-index: 3; position: relative; max-width: 1200px; } .about-me-header { gap: 30px; display: flex; position: relative; text-align: center; align-items: center; margin-bottom: 80px; justify-content: center; } .about-me-intro-wrapper { position: relative; margin-bottom: 100px; } .about-me-cv-section { position: relative; } .about-me-header-line { width: 120px; height: 2px; transform: translateY(-10px); background: linear-gradient(90deg, transparent 0%, #8baba5 100%); } .about-me-title { color: #2c3e50; margin: 0; position: relative; font-size: 56px; background: linear-gradient(135deg, #2c3e50 0%, #6c8e9e 100%); font-family: "PT Serif", serif; font-weight: 600; letter-spacing: -0.5px; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .about-me-header-decoration { color: #8baba5; opacity: 0.15; transform: translateY(10px); } .about-me-intro-card { gap: 60px; display: grid; padding: 50px; overflow: hidden; position: relative; background: white; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.04); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); align-items: center; border-radius: 24px; grid-template-columns: 400px 1fr; } .about-me-cv-header { position: relative; text-align: center; margin-bottom: 70px; } .about-me-cv-grid { gap: 50px; display: grid; position: relative; grid-template-columns: 1.3fr 0.7fr; } .about-me-intro-image { height: 100%; overflow: hidden; position: relative; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); min-height: 450px; border-radius: 16px; } .about-me-text-content { z-index: 2; position: relative; } .about-me-cv-title { color: #2c3e50; margin: 0 0 15px 0; font-size: 42px; font-family: "PT Serif", serif; font-weight: 600; letter-spacing: -0.5px; } .about-me-cv-subtitle { color: #718096; outline: none; font-size: 18px; font-weight: 400; } .about-me-cv-column { padding: 45px 40px; position: relative; background: white; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06); transition: all 0.3s ease; border-radius: 20px; } .about-me-cv-column-education { display: flex; flex-direction: column; } .about-me-image-overlay { top: 0; left: 0; width: 100%; height: 100%; z-index: 2; position: absolute; background: linear-gradient(180deg, transparent 0%, rgba(44, 62, 80, 0.3) 100%); } .about-me-text { color: #4a5568; margin: 0; outline: none; padding: 20px; font-size: 18px; transition: all 0.3s ease; line-height: 1.9; border-radius: 12px; } .about-me-cv-column-header { gap: 15px; display: flex; align-items: center; border-bottom: 2px solid #f0f4f8; margin-bottom: 40px; padding-bottom: 25px; } .about-me-timeline { gap: 35px; display: flex; position: relative; padding-left: 30px; flex-direction: column; } .about-me-education-card { border: 2px solid #e2e8f0; outline: none; padding: 40px 35px; overflow: hidden; position: relative; background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 16px; } .about-me-cv-icon { color: white; width: 56px; height: 56px; display: flex; background: linear-gradient(135deg, #8baba5 0%, #6c8e9e 100%); box-shadow: 0 8px 20px rgba(139, 171, 165, 0.3); transition: all 0.3s ease; align-items: center; border-radius: 14px; justify-content: center; } .about-me-cv-column-title { color: #2c3e50; margin: 0; outline: none; font-size: 26px; font-family: "PT Serif", serif; font-weight: 600; } .about-me-timeline-item { outline: none; position: relative; transition: all 0.3s ease; padding-left: 20px; } .about-me-education-badge { display: inline-flex; align-items: center; margin-bottom: 25px; justify-content: center; } .about-me-education-content { z-index: 2; position: relative; } .about-me-education-decoration { right: -30px; width: 150px; bottom: -30px; height: 150px; z-index: 1; position: absolute; background: radial-gradient(circle, rgba(139, 171, 165, 0.1) 0%, transparent 70%); border-radius: 50%; } .about-me-timeline-dot { top: 8px; left: -23px; width: 16px; border: 3px solid #8baba5; height: 16px; z-index: 2; position: absolute; background: white; box-shadow: 0 0 0 4px rgba(139, 171, 165, 0.1); transition: all 0.3s ease; border-radius: 50%; } .about-me-timeline-content { padding: 20px 24px; background: #f8fafc; transition: all 0.3s ease; border-left: 3px solid #e2e8f0; border-radius: 12px; } .about-me-education-badge-year { color: white; padding: 12px 28px; font-size: 20px; background: linear-gradient(135deg, #8baba5 0%, #6c8e9e 100%); box-shadow: 0 6px 20px rgba(139, 171, 165, 0.3); font-weight: 700; border-radius: 10px; letter-spacing: 1px; } .about-me-education-degree { color: #2c3e50; margin: 0 0 10px 0; font-size: 28px; font-family: "PT Serif", serif; font-weight: 600; line-height: 1.3; } .about-me-education-field { color: #718096; margin: 0; font-size: 18px; font-weight: 400; } .about-me-timeline-date { gap: 8px; color: #8baba5; display: flex; font-size: 14px; align-items: center; font-weight: 600; margin-bottom: 10px; letter-spacing: 0.5px; text-transform: uppercase; } .about-me-timeline-title { color: #2c3e50; font-size: 17px; font-weight: 600; line-height: 1.5; margin-bottom: 6px; } .about-me-timeline-instructor { color: #718096; font-size: 15px; font-style: italic; } .about-me-intro-card::before { top: 0; left: 0; width: 100%; height: 5px; content: ""; position: absolute; animation: gradient-slide 3s ease infinite; background: linear-gradient(90deg, #8baba5 0%, #6c8e9e 50%, #8baba5 100%); background-size: 200% 100%; } .about-me-intro-card:hover { transform: translateY(-5px); box-shadow: 0 25px 70px rgba(0, 0, 0, 0.12), 0 12px 30px rgba(0, 0, 0, 0.06); } .about-me-intro-card:hover .about-me-intro-image img { transform: scale(1.05); } .about-me-intro-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .about-me-text:focus { background: rgba(139, 171, 165, 0.05); border-left: 4px solid #8baba5; padding-left: 24px; } .about-me-cv-grid::before { top: 80px; left: 50%; width: 2px; bottom: 40px; content: ""; position: absolute; transform: translateX(-50%); background: linear-gradient(180deg, transparent 0%, #e2e8f0 10%, #e2e8f0 90%, transparent 100%); } .about-me-cv-column:hover { transform: translateY(-3px); box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1); } .about-me-cv-column:hover .about-me-cv-icon { transform: rotate(5deg) scale(1.05); box-shadow: 0 12px 28px rgba(139, 171, 165, 0.4); } .about-me-timeline::before { top: 15px; left: 7px; width: 2px; bottom: 15px; content: ""; position: absolute; background: linear-gradient(180deg, #8baba5 0%, #e2e8f0 100%); } .about-me-timeline-item:hover { transform: translateX(5px); } .about-me-timeline-item:hover .about-me-timeline-dot { transform: scale(1.2); box-shadow: 0 0 0 6px rgba(139, 171, 165, 0.2); border-color: #6c8e9e; } .about-me-timeline-item:hover .about-me-timeline-content { background: white; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); border-left-color: #8baba5; } .about-me-timeline-date svg { color: #8baba5; } .about-me-education-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(139, 171, 165, 0.15); border-color: #8baba5; } .home-about-me-title { color: #8baba5; margin: 0; position: relative; font-size: 48px; font-family: "PT Serif", serif; font-weight: 500; letter-spacing: -0.5px; } .home-about-me-cv-title { color: #8baba5; margin: 0 0 15px 0; font-size: 48px; font-family: "PT Serif", serif; font-weight: 500; letter-spacing: -0.5px; } .home-about-me-education-card { border: 2px solid #e2e8f0; outline: none; padding: 20px 24px; overflow: hidden; position: relative; background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 12px; margin-bottom: 35px; } .home-about-me-education-badge { display: inline-flex; align-items: center; margin-bottom: 12px; justify-content: center; } .home-about-me-education-badge-year { color: #8baba5; padding: 0; font-size: 14px; background: transparent; box-shadow: none; font-weight: 600; border-radius: 0; letter-spacing: 0.5px; text-transform: uppercase; } .home-about-me-education-degree { color: #2c3e50; margin: 0 0 6px 0; font-size: 17px; font-family: "PT Serif", serif; font-weight: 600; line-height: 1.5; } .home-about-me-education-field { color: #718096; margin: 0; font-size: 15px; font-style: italic; font-weight: 400; } .home-about-me-education-card:last-child { margin-bottom: 0; } .home-about-me-education-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(139, 171, 165, 0.15); border-color: #8baba5; } .preise-section { width: 100%; display: flex; padding: var(--dl-layout-space-fiveunits) var(--dl-layout-space-threeunits); overflow: hidden; position: relative; background: linear-gradient(135deg, rgba(108, 142, 158, 0.03) 0%, rgba(139, 171, 165, 0.05) 100%); align-items: center; justify-content: center; } .preise-container { gap: var(--dl-layout-space-threeunits); width: 100%; display: flex; position: relative; max-width: 1400px; flex-direction: column; } .preise-header { gap: var(--dl-layout-space-unit); display: flex; position: relative; align-items: center; flex-direction: column; } .preise-content-grid { gap: var(--dl-layout-space-twounits); display: grid; z-index: 2; position: relative; grid-template-columns: repeat(2, 1fr); } .preise-bg-decoration { opacity: 0.4; z-index: 1; position: absolute; border-radius: 50%; pointer-events: none; } .preise-bg-decoration-1 { top: -80px; right: -80px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(108, 142, 158, 0.12) 0%, transparent 70%); } .preise-bg-decoration-2 { left: -60px; width: 250px; bottom: -60px; height: 250px; background: radial-gradient(circle, rgba(139, 171, 165, 0.12) 0%, transparent 70%); } .preise-title { color: var(--dl-color-stillebewegung-background); margin: 0; font-size: 2.5rem; text-align: center; font-family: "PT Serif", serif; font-weight: 700; letter-spacing: -0.5px; } .preise-title-line { width: 80px; height: 4px; background: linear-gradient(90deg, transparent, #6c8e9e, transparent); border-radius: 2px; } .preise-pricing-card { gap: var(--dl-layout-space-twounits); border: 2px solid rgba(108, 142, 158, 0.2); height: 100%; display: flex; padding: var(--dl-layout-space-threeunits); overflow: hidden; position: relative; background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%); box-shadow: 0 8px 32px rgba(108, 142, 158, 0.15), 0 2px 8px rgba(108, 142, 158, 0.1); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 20px; flex-direction: column; } .preise-insurance-card { gap: var(--dl-layout-space-twounits); border: 2px solid rgba(108, 142, 158, 0.2); height: 100%; display: flex; padding: var(--dl-layout-space-threeunits); overflow: hidden; position: relative; background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%); box-shadow: 0 8px 32px rgba(108, 142, 158, 0.15), 0 2px 8px rgba(108, 142, 158, 0.1); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 20px; flex-direction: column; } .preise-card-header { gap: var(--dl-layout-space-unit); width: 100%; display: flex; align-items: center; } .preise-card-body { gap: var(--dl-layout-space-unit); display: flex; flex-direction: column; } .preise-info-list { gap: var(--dl-layout-space-twounits); height: 100%; display: grid; justify-content: center; grid-template-columns: repeat(2, 1fr); } .preise-card-decoration-secondary { background: radial-gradient(circle at top right, rgba(139, 171, 165, 0.08) 0%, transparent 70%); } .preise-icon-wrapper { width: 52px; height: 52px; display: flex; position: relative; background: linear-gradient(135deg, #6c8e9e 0%, #8baba5 100%); box-shadow: 0 4px 16px rgba(108, 142, 158, 0.3); transition: all 0.3s ease; align-items: center; flex-shrink: 0; border-radius: 14px; justify-content: center; } .preise-card-title { color: var(--dl-color-stillebewegung-background); margin: 0; font-size: 1.5rem; font-family: "PT Serif", serif; font-weight: 700; } .preise-duration { color: #4a5568; margin: 0; font-size: 1rem; font-family: "Inter", sans-serif; font-weight: 500; letter-spacing: 0.2px; } .preise-amount-wrapper { gap: 4px; display: flex; align-items: baseline; } .preise-icon-wrapper-secondary { background: linear-gradient(135deg, #8baba5 0%, #6c8e9e 100%); } .preise-info-item { gap: var(--dl-layout-space-unit); display: flex; align-items: flex-start; } .preise-icon { color: white; width: 28px; height: 28px; } .preise-currency { color: #6c8e9e; font-size: 1.25rem; font-family: "PT Serif", serif; font-weight: 700; } .preise-amount { color: var(--dl-color-stillebewegung-background); font-size: 3rem; font-family: "PT Serif", serif; font-weight: 700; line-height: 1; letter-spacing: -1px; } .preise-decimal { color: #6c8e9e; font-size: 1.25rem; font-family: "PT Serif", serif; font-weight: 700; } .preise-bullet { width: 28px; height: 28px; display: flex; background: linear-gradient(135deg, rgba(139, 171, 165, 0.15) 0%, rgba(108, 142, 158, 0.15) 100%); align-items: center; flex-shrink: 0; border-radius: 8px; justify-content: center; } .preise-info-text { flex: 1; color: #4a5568; margin: 0; font-size: 1.05rem; font-family: "Inter", sans-serif; line-height: 1.7; } .preise-bullet-icon { color: #6c8e9e; width: 20px; height: 20px; } .preise-badge { color: white; display: inline-block; padding: 4px 12px; font-size: 0.875rem; background: linear-gradient(135deg, #6c8e9e 0%, #8baba5 100%); box-shadow: 0 2px 8px rgba(108, 142, 158, 0.25); font-weight: 600; margin-left: 8px; border-radius: 12px; letter-spacing: 0.3px; } .preise-pricing-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(108, 142, 158, 0.2), 0 4px 12px rgba(108, 142, 158, 0.15); border-color: rgba(108, 142, 158, 0.4); } .preise-pricing-card:hover .preise-icon-wrapper { transform: scale(1.05) rotate(5deg); box-shadow: 0 6px 20px rgba(108, 142, 158, 0.4); } .preise-insurance-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(108, 142, 158, 0.2), 0 4px 12px rgba(108, 142, 158, 0.15); border-color: rgba(108, 142, 158, 0.4); } .preise-insurance-card:hover .preise-icon-wrapper { transform: scale(1.05) rotate(5deg); box-shadow: 0 6px 20px rgba(108, 142, 158, 0.4); } .contact-section { padding: 120px 20px; overflow: hidden; position: relative; background: linear-gradient(135deg, #f8fafa 0%, #ffffff 100%); font-family: "Inter", sans-serif; scroll-margin-top: 80px; } .contact-bg-accent { top: -200px; right: -200px; width: 500px; height: 500px; z-index: 1; position: absolute; background: radial-gradient(circle, rgba(139, 171, 165, 0.08) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .contact-bg-gradient { left: -150px; width: 400px; bottom: -150px; height: 400px; z-index: 1; position: absolute; background: radial-gradient(circle, rgba(108, 142, 158, 0.06) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .contact-container { margin: 0 auto; z-index: 2; position: relative; max-width: 1200px; } .contact-header { position: relative; text-align: center; margin-bottom: 80px; } .contact-content-wrapper { gap: 60px; display: grid; align-items: start; grid-template-columns: 1fr 1.2fr; } .contact-header-decoration { width: 80px; height: 3px; margin: 0 auto 20px; animation: slideDown 0.6s ease-out; transform: translateY(0); background: linear-gradient(90deg, #8baba5 0%, #6c8e9e 100%); border-radius: 2px; } .contact-header-title { color: #2c3e50; margin: 0 0 20px 0; animation: fadeIn 0.8s ease-out 0.2s both; font-size: 2.5rem; font-family: "PT Serif", serif; font-weight: 600; line-height: 1.2; } .contact-header-line { width: 200px; height: 2px; margin: 0 auto; animation: expandWidth 0.8s ease-out 0.4s both; background: linear-gradient(90deg, transparent 0%, #8baba5 50%, transparent 100%); } .contact-info-column { position: relative; } .contact-form-column { position: relative; } .contact-info-card { padding: 40px; overflow: hidden; position: relative; background: #ffffff; box-shadow: 0 10px 30px rgba(0,0,0,0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; border-radius: 20px; margin-bottom: 30px; } .contact-info-decoration { right: 20px; width: 150px; bottom: -30px; height: 150px; position: absolute; background: radial-gradient(circle, rgba(139, 171, 165, 0.1) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .contact-form-card { padding: 50px; overflow: hidden; position: relative; background: #ffffff; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border-radius: 20px; } .contact-location-card { padding: 40px; overflow: hidden; position: relative; background: #ffffff; box-shadow: 0 10px 30px rgba(0,0,0,0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; border-radius: 20px; } .contact-info-title { color: #2c3e50; margin: 0 0 30px 0; font-size: 1.5rem; text-align: center; font-family: "PT Serif", serif; font-weight: 600; } .contact-info-items { gap: 20px; display: flex; flex-direction: column; } .contact-form-title { color: #2c3e50; margin: 0 0 10px 0; z-index: 2; position: relative; font-size: 1.5rem; font-family: "PT Serif", serif; font-weight: 600; } .contact-form-subtitle { color: #7f8c8d; margin: 0 0 40px 0; z-index: 2; position: relative; font-size: 16px; } .contact-form { z-index: 2; position: relative; } .contact-location-list { gap: 40px; display: flex; flex-direction: column; } .contact-info-item { gap: 20px; border: 2px solid transparent; display: flex; padding: 20px; background: #f8fafa; transition: all 0.3s ease; align-items: center; border-radius: 12px; text-decoration: none; } .contact-form-group { margin-bottom: 25px; } .contact-form-submit { gap: 10px; color: #ffffff; width: 100%; border: none; cursor: pointer; display: flex; padding: 18px 40px; overflow: hidden; position: relative; font-size: 16px; background: #8baba5; margin-top: 10px; transition: all 0.3s ease; align-items: center; font-family: "Inter", sans-serif; font-weight: 600; border-radius: 12px; justify-content: center; } .contact-form-message { gap: 12px; display: none; padding: 16px 20px; animation: slideUp 0.4s ease-out; font-size: 15px; margin-top: 20px; align-items: center; font-weight: 500; border-radius: 12px; } .contact-form-message-success { color: #155724; border: 2px solid #c3e6cb; background: #d4edda; } .contact-form-message-error { color: #721c24; border: 2px solid #f5c6cb; background: #f8d7da; } .contact-location-item-wrapper { gap: 15px; display: flex; flex-direction: column; } .contact-icon-wrapper { width: 50px; height: 50px; display: flex; background: linear-gradient(135deg, #8baba5 0%, #6c8e9e 100%); transition: transform 0.3s ease; align-items: center; flex-shrink: 0; border-radius: 12px; justify-content: center; } .contact-info-details { gap: 4px; display: flex; flex-direction: column; } .contact-form-label { gap: 8px; color: #2c3e50; display: flex; font-size: 14px; align-items: center; font-weight: 600; margin-bottom: 10px; letter-spacing: 0.5px; text-transform: uppercase; } .contact-form-input { color: #2c3e50; width: 100%; border: 2px solid #e8ecec; outline: none; padding: 16px 20px; font-size: 16px; background: #f8fafa; box-sizing: border-box; transition: all 0.3s ease; font-family: "Inter", sans-serif; border-radius: 12px; } .contact-form-textarea { color: #2c3e50; width: 100%; border: 2px solid #e8ecec; resize: vertical; outline: none; padding: 16px 20px; font-size: 16px; background: #f8fafa; box-sizing: border-box; min-height: 120px; transition: all 0.3s ease; font-family: "Inter", sans-serif; border-radius: 12px; } .contact-form-submit-text { z-index: 1; position: relative; } .contact-form-submit-icon { width: 20px; height: 20px; z-index: 1; position: relative; transition: transform 0.3s ease; } .contact-location-item { gap: 20px; display: flex; text-align: center; align-items: center; flex-direction: row; justify-content: center; } .contact-location-map { width: 100%; height: 200px; overflow: hidden; border-radius: 12px; } .contact-icon { color: #ffffff; width: 24px; height: 24px; } .contact-info-label { color: #7f8c8d; font-size: 13px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; } .contact-info-value { color: #2c3e50; font-size: 18px; font-weight: 600; } .contact-form-icon { color: #8baba5; width: 18px; height: 18px; } .contact-location-icon-wrapper { width: 50px; height: 50px; display: flex; background: linear-gradient(135deg, #6c8e9e 0%, #8baba5 100%); align-items: center; flex-shrink: 0; border-radius: 12px; justify-content: center; } .contact-location-content { flex: 1; display: flex; text-align: center; align-items: center; flex-direction: column; justify-content: center; } .contact-location-icon { color: #ffffff; width: 24px; height: 24px; } .contact-location-status-badge { display: inline-block; padding: 4px 10px; font-size: 11px; font-weight: 700; border-radius: 4px; margin-bottom: 8px; letter-spacing: 0.5px; text-transform: uppercase; } .badge-warning { color: #856404; border: 1px solid #ffeeba; background-color: #fff3cd; } .contact-location-placeholder { color: #2c3e50; margin: 0 0 8px 0; font-size: 18px; font-weight: 600; } .contact-location-note { color: #7f8c8d; margin: 0; font-size: 14px; font-style: italic; } .badge-success { color: #155724; border: 1px solid #c3e6cb; background-color: #d4edda; } .contact-info-card:hover { transform: translateY(-5px); box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12); } .contact-info-card::before { top: 0; left: 0; width: 5px; height: 100%; content: ""; z-index: 1; position: absolute; background: linear-gradient(180deg, #8baba5 0%, #6c8e9e 100%); } .contact-info-item:hover { transform: translateX(8px); background: #ffffff; box-shadow: 0 5px 20px rgba(139, 171, 165, 0.15); border-color: #8baba5; } .contact-info-item:hover .contact-icon-wrapper { transform: rotate(10deg) scale(1.1); } .contact-location-card:hover { transform: translateY(-5px); box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12); } .contact-location-card::before { top: 0; left: 0; width: 5px; height: 100%; content: ""; z-index: 1; position: absolute; background: linear-gradient(180deg, #6c8e9e 0%, #8baba5 100%); } .contact-form-card::before { top: 0; right: 0; width: 200px; height: 200px; content: ""; z-index: 1; position: absolute; background: radial-gradient(circle, rgba(108, 142, 158, 0.06) 0%, transparent 70%); border-radius: 50%; } .contact-form-input:focus { background: #ffffff; box-shadow: 0 0 0 4px rgba(139, 171, 165, 0.1); border-color: #8baba5; } .contact-form-input:hover { border-color: #d0d8d8; } .contact-form-textarea:focus { background: #ffffff; box-shadow: 0 0 0 4px rgba(139, 171, 165, 0.1); border-color: #8baba5; } .contact-form-textarea:hover { border-color: #d0d8d8; } .contact-form-submit::before { top: 50%; left: 50%; width: 0; height: 0; content: ""; position: absolute; transform: translate(-50%, -50%); background: rgba(255, 255, 255, 0.2); transition: width 0.6s ease, height 0.6s ease; border-radius: 50%; } .contact-form-submit:hover::before { width: 300px; height: 300px; } .contact-form-submit:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(139, 171, 165, 0.3); } .contact-form-submit:active { transform: translateY(-1px); } .contact-form-submit:disabled { cursor: not-allowed; opacity: 0.6; transform: none; } .contact-form-submit:hover .contact-form-submit-icon { transform: translateX(5px); } .contact-form-submit.loading .contact-form-submit-text::after { width: 14px; border: 2px solid #ffffff; height: 14px; content: ""; display: inline-block; animation: spin 0.6s linear infinite; margin-left: 10px; border-radius: 50%; border-top-color: transparent; } .contact-form-message.show { display: flex; } .home-contact-section { padding: 120px 20px; overflow: hidden; position: relative; background: linear-gradient(135deg, #f8fafa 0%, #ffffff 100%); font-family: "Inter", sans-serif; } .home-contact-content-wrapper { gap: 40px; display: grid; align-items: start; grid-template-columns: 1fr 1fr; } .home-contact-info-column { gap: 30px; display: flex; flex-direction: column; } .home-contact-form-column { gap: 30px; display: flex; position: relative; flex-direction: column; } .home-contact-info-decoration { right: 20px; width: 150px; bottom: -30px; position: absolute; } .home-contact-location-list { gap: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .home-contact-info-item { gap: 20px; border: 2px solid transparent; display: flex; padding: 20px; background: #f8fafa; transition: all 0.3s ease; align-items: center; border-radius: 12px; text-decoration: none; } .home-contact-info-item:hover { transform: translateX(8px); background: #ffffff; box-shadow: 0 5px 20px rgba(139, 171, 165, 0.15); border-color: #8baba5; } .home-contact-info-item:hover .contact-icon-wrapper { transform: rotate(10deg) scale(1.1); } .home-contact-section1 { padding: 120px 20px; overflow: hidden; position: relative; background: linear-gradient(135deg, #f8fafa 0%, #ffffff 100%); font-family: "Inter", sans-serif; } .home-contact-content-wrapper1 { gap: 40px; display: grid; align-items: start; grid-template-columns: 1fr 1fr; } .home-contact-info-column1 { gap: 30px; display: flex; flex-direction: column; } .home-contact-form-column1 { gap: 30px; display: flex; position: relative; flex-direction: column; } .home-contact-info-decoration1 { right: 20px; width: 150px; bottom: -30px; position: absolute; } .home-contact-location-list1 { gap: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .home-contact-info-item1 { gap: 20px; border: 2px solid transparent; display: flex; padding: 20px; background: #f8fafa; transition: all 0.3s ease; align-items: center; border-radius: 12px; text-decoration: none; } .home-contact-info-item1:hover { transform: translateX(8px); background: #ffffff; box-shadow: 0 5px 20px rgba(139, 171, 165, 0.15); border-color: #8baba5; } .home-contact-info-item1:hover .contact-icon-wrapper { transform: rotate(10deg) scale(1.1); } .home-contact-content-wrapper2 { gap: 40px; display: grid; align-items: start; grid-template-columns: 1fr 1fr; } .contact-left-column { gap: 30px; display: flex; flex-direction: column; } .contact-right-column { display: flex; flex-direction: column; } .home-contact-info-card { padding: 40px; overflow: hidden; position: relative; background: #ffffff; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; border-radius: 20px; } .thq-contact-location-card-elm { border: 1px solid #e8ecec; padding: 30px; box-shadow: none; } .home-contact-location-card { height: 100%; padding: 40px; overflow: hidden; position: relative; background: #ffffff; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; border-radius: 20px; } .thq-contact-info-title-elm2 { font-size: 22px; margin-bottom: 30px; } .contact-location-grid { gap: 30px; display: flex; flex-direction: column; } .thq-contact-form-submit-text-elm { z-index: 1; position: relative; } .thq-contact-form-submit-icon-elm { width: 20px; height: 20px; z-index: 1; position: relative; transition: transform 0.3s ease; } .thq-contact-form-icon-elm1 { color: #8baba5; width: 18px; height: 18px; } .thq-contact-form-icon-elm2 { color: #8baba5; width: 18px; height: 18px; } .thq-contact-form-icon-elm3 { color: #8baba5; width: 18px; height: 18px; } .thq-contact-form-icon-elm4 { color: #8baba5; width: 18px; height: 18px; } .iframe2 { border: 0; border-radius: 12px; } .iframe3 { border: 0; border-radius: 12px; } .iframe1 { border: 0; border-radius: 12px; } .home-contact-info-card:hover { transform: translateY(-5px); box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12); } .home-contact-info-card::before { top: 0; left: 0; width: 5px; height: 100%; content: ""; z-index: 1; position: absolute; background: linear-gradient(180deg, #8baba5 0%, #6c8e9e 100%); } .home-contact-location-card:hover { transform: translateY(-5px); box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12); } .home-contact-location-card::before { top: 0; left: 0; width: 5px; height: 100%; content: ""; z-index: 1; position: absolute; background: linear-gradient(180deg, #6c8e9e 0%, #8baba5 100%); } .home-contact-content-wrapper3 { gap: 40px; display: grid; align-items: start; grid-template-columns: 1fr 1fr; } .home-contact-info-card1 { padding: 40px; overflow: hidden; position: relative; background: #ffffff; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; border-radius: 20px; } .home-contact-location-card1 { height: 100%; padding: 40px; overflow: hidden; position: relative; background: #ffffff; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; border-radius: 20px; } .home-contact-info-card1:hover { transform: translateY(-5px); box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12); } .home-contact-info-card1::before { top: 0; left: 0; width: 5px; height: 100%; content: ""; z-index: 1; position: absolute; background: linear-gradient(180deg, #8baba5 0%, #6c8e9e 100%); } .home-contact-location-card1:hover { transform: translateY(-5px); box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12); } .home-contact-location-card1::before { top: 0; left: 0; width: 5px; height: 100%; content: ""; z-index: 1; position: absolute; background: linear-gradient(180deg, #6c8e9e 0%, #8baba5 100%); } .home-contact-content-wrapper4 { gap: 40px; display: grid; margin-top: 60px; align-items: start; grid-template-columns: 1fr 1fr; } .home-contact-info-card2 { padding: 40px; overflow: hidden; position: relative; background: #ffffff; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; border-radius: 20px; } .home-contact-location-card2 { height: 100%; padding: 40px; overflow: hidden; position: relative; background: #ffffff; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; border-radius: 20px; } .home-contact-info-card2:hover { transform: translateY(-5px); box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12); } .home-contact-info-card2::before { top: 0; left: 0; width: 5px; height: 100%; content: ""; z-index: 1; position: absolute; background: linear-gradient(180deg, #8baba5 0%, #6c8e9e 100%); } .home-contact-location-card2:hover { transform: translateY(-5px); box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12); } .home-contact-location-card2::before { top: 0; left: 0; width: 5px; height: 100%; content: ""; z-index: 1; position: absolute; background: linear-gradient(180deg, #6c8e9e 0%, #8baba5 100%); } .home-contact-location-grid { gap: 30px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .thq-thq-contact-form-submit-text-elm-elm { z-index: 1; position: relative; } .thq-thq-contact-form-submit-icon-elm-elm { width: 20px; height: 20px; z-index: 1; position: relative; transition: transform 0.3s ease; } .thq-thq-contact-form-icon-elm1-elm { color: #8baba5; width: 18px; height: 18px; } .thq-thq-contact-form-icon-elm2-elm { color: #8baba5; width: 18px; height: 18px; } .thq-thq-contact-form-icon-elm3-elm { color: #8baba5; width: 18px; height: 18px; } .thq-thq-contact-form-icon-elm4-elm { color: #8baba5; width: 18px; height: 18px; } .home-contact-location-grid1 { gap: 30px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .booking-section { padding: 120px 20px; overflow: hidden; position: relative; font-family: Inter, sans-serif; background-color: #f8f9fa; scroll-margin-top: 80px; } .booking-bg-gradient { top: 0; left: 0; width: 100%; height: 100%; z-index: 1; position: absolute; background: linear-gradient(135deg, rgba(139, 171, 165, 0.05) 0%, rgba(108, 142, 158, 0.08) 50%, rgba(139, 171, 165, 0.05) 100%); pointer-events: none; } .booking-bg-accent { top: -100px; right: -100px; width: 400px; height: 400px; z-index: 1; position: absolute; background: radial-gradient(circle, rgba(139, 171, 165, 0.15) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .booking-container { margin: 0 auto; z-index: 2; position: relative; max-width: 1200px; } .booking-header { position: relative; text-align: center; margin-bottom: 30px; padding-bottom: 25px; } .booking-intro-text { color: #5a6c7d; margin: 0 auto 60px; font-size: 1.125rem; max-width: 700px; text-align: center; line-height: 1.8; } .booking-benefits { gap: 30px; display: grid; margin-bottom: 60px; grid-template-columns: repeat(3, 1fr); } .booking-calendar-card { overflow: hidden; background: white; box-shadow: 0 10px 50px rgba(0, 0, 0, 0.08); transition: all 0.4s ease; border-radius: 24px; margin-bottom: 50px; } .booking-info-section { gap: 30px; display: grid; grid-template-columns: repeat(3, 1fr); } .booking-header-decoration { top: -15px; left: 50%; width: 80px; height: 3px; position: absolute; transform: translateX(-50%); background: linear-gradient(90deg, transparent 0%, #8baba5 50%, transparent 100%); border-radius: 2px; } .booking-header-title { color: #2c3e50; margin: 0; display: inline-block; padding: 0; position: relative; font-size: 2.5rem; font-family: "PT Serif", serif; font-weight: 600; letter-spacing: -0.5px; } .booking-header-line { left: 50%; width: 120px; bottom: 0; height: 3px; position: absolute; transform: translateX(-50%); background: linear-gradient(90deg, #8baba5 0%, #6c8e9e 100%); border-radius: 2px; } .booking-benefit-card { padding: 35px 25px; overflow: hidden; position: relative; background: white; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); text-align: center; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 16px; } .booking-calendar-header { gap: 20px; display: flex; padding: 30px 40px; background: linear-gradient(135deg, #8baba5 0%, #6c8e9e 100%); align-items: center; } .booking-calendar-wrapper { padding: 0; background: #f8f9fa; } .booking-calendar-footer { padding: 25px 40px; background: linear-gradient(135deg, rgba(139, 171, 165, 0.08) 0%, rgba(108, 142, 158, 0.08) 100%); border-top: 2px solid rgba(139, 171, 165, 0.15); } .booking-info-card { padding: 30px; background: white; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); transition: all 0.3s ease; border-left: 4px solid #8baba5; border-radius: 16px; } .booking-benefit-icon { color: white; width: 70px; height: 70px; margin: 0 auto 20px; display: flex; background: linear-gradient(135deg, #8baba5 0%, #6c8e9e 100%); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); align-items: center; border-radius: 50%; justify-content: center; } .booking-benefit-title { color: #2c3e50; margin: 0 0 10px; font-size: 1.5rem; font-family: "PT Serif", serif; font-weight: 600; } .booking-benefit-text { color: #5a6c7d; margin: 0; font-size: 0.95rem; line-height: 1.6; } .booking-calendar-icon-wrapper { color: white; width: 50px; height: 50px; display: flex; background: rgba(255, 255, 255, 0.25); align-items: center; border-radius: 12px; backdrop-filter: blur(10px); justify-content: center; } .booking-calendar-title { color: white; margin: 0; font-size: 1.75rem; font-family: "PT Serif", serif; font-weight: 600; letter-spacing: -0.3px; } .booking-iframe-container { width: 100%; position: relative; background: white; min-height: 800px; } .booking-footer-text { color: #5a6c7d; margin: 0; font-size: 0.95rem; line-height: 1.7; } .booking-info-title { color: #2c3e50; margin: 0 0 15px; font-size: 1.5rem; font-family: "PT Serif", serif; font-weight: 600; } .booking-info-description { color: #5a6c7d; margin: 0 0 10px; font-size: 0.95rem; line-height: 1.7; } .booking-iframe { width: 100%; border: none; height: 800px; display: block; background: white; } .booking-benefit-card::before { top: 0; left: 0; width: 100%; height: 4px; content: ""; position: absolute; transform: scaleX(0); background: linear-gradient(90deg, #8baba5 0%, #6c8e9e 100%); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); transform-origin: left; } .booking-benefit-card:hover { transform: translateY(-8px); box-shadow: 0 12px 40px rgba(139, 171, 165, 0.2); } .booking-benefit-card:hover::before { transform: scaleX(1); } .booking-benefit-card:hover .booking-benefit-icon { transform: scale(1.1) rotate(5deg); } .booking-benefit-icon svg { width: 32px; height: 32px; } .booking-calendar-card:hover { box-shadow: 0 20px 70px rgba(139, 171, 165, 0.15); } .booking-calendar-icon-wrapper svg { width: 28px; height: 28px; } .booking-footer-text strong { color: #6c8e9e; font-weight: 600; } .booking-info-card:hover { transform: translateX(5px); box-shadow: 0 8px 30px rgba(139, 171, 165, 0.15); border-left-color: #6c8e9e; } .booking-info-description:last-child { margin-bottom: 0; } .testimonials-section { padding: 120px 20px; overflow: hidden; position: relative; background: linear-gradient(135deg, #f8faf9 0%, #ffffff 100%); scroll-margin-top: 80px; } .testimonials-bg-accent { top: -10%; right: -5%; width: 600px; height: 600px; z-index: 1; position: absolute; background: radial-gradient(circle, rgba(139, 171, 165, 0.08) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .testimonials-bg-gradient { left: -5%; width: 500px; bottom: -15%; height: 500px; z-index: 1; position: absolute; background: radial-gradient(circle, rgba(108, 142, 158, 0.06) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .testimonials-container { margin: 0 auto; z-index: 3; position: relative; max-width: 1400px; } .testimonials-header { position: relative; text-align: center; margin-bottom: 80px; } .testimonials-grid { gap: 32px; display: grid; margin-top: 60px; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); } .testimonials-header-decoration { display: flex; align-items: center; margin-bottom: 24px; justify-content: center; } .testimonials-header-title { color: #1a1a1a; margin: 0 0 16px 0; font-size: 48px; font-family: "PT Serif", serif; font-weight: 700; line-height: 1.2; } .testimonials-header-subtitle { color: #666; margin: 0 auto; font-size: 18px; max-width: 700px; font-family: "Inter", sans-serif; line-height: 1.6; } .testimonial-card { border: 1px solid rgba(139, 171, 165, 0.1); padding: 40px 36px; overflow: hidden; position: relative; background: #ffffff; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04); transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); border-radius: 16px; } .testimonials-header-line { width: 80px; height: 3px; position: relative; background: linear-gradient(90deg, #8baba5, #6c8e9e); border-radius: 2px; } .testimonial-quote-icon { color: #8baba5; width: 60px; height: 60px; display: flex; background: linear-gradient(135deg, rgba(139, 171, 165, 0.1), rgba(108, 142, 158, 0.1)); transition: all 0.3s ease; align-items: center; border-radius: 12px; margin-bottom: 24px; justify-content: center; } .testimonial-text { color: #333; margin: 0 0 28px 0; position: relative; font-size: 16px; font-style: italic; font-family: "Inter", sans-serif; line-height: 1.7; } .testimonial-footer { border-top: 1px solid rgba(139, 171, 165, 0.15); padding-top: 20px; } .testimonial-author { color: #1a1a1a; font-size: 17px; font-family: "Inter", sans-serif; font-weight: 600; margin-bottom: 6px; } .testimonial-therapy { color: #8baba5; font-size: 14px; font-family: "Inter", sans-serif; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; } .testimonials-header-line::before { top: 50%; left: -20px; width: 8px; height: 8px; content: ""; position: absolute; transform: translateY(-50%); background: #8baba5; border-radius: 50%; } .testimonials-header-line::after { top: 50%; right: -20px; width: 8px; height: 8px; content: ""; position: absolute; transform: translateY(-50%); background: #6c8e9e; border-radius: 50%; } .testimonial-card::before { top: 0; left: 0; right: 0; height: 4px; content: ""; position: absolute; transform: scaleX(0); background: linear-gradient(90deg, #8baba5, #6c8e9e); transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); transform-origin: left; } .testimonial-card:hover { transform: translateY(-8px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08); border-color: rgba(139, 171, 165, 0.2); } .testimonial-card:hover::before { transform: scaleX(1); } .testimonial-card:hover .testimonial-quote-icon { transform: rotate(-5deg) scale(1.05); background: linear-gradient(135deg, rgba(139, 171, 165, 0.15), rgba(108, 142, 158, 0.15)); } .testimonials-grid-wrapper { cursor: grab; padding: 20px 0 40px 0; margin-top: 40px; overflow-x: auto; scrollbar-color: #8baba5 rgba(139, 171, 165, 0.1); scrollbar-width: thin; } .home-testimonials-grid { gap: 32px; width: max-content; display: flex; padding: 0 20px; flex-direction: row; } .home-testimonial-card { width: 400px; border: 1px solid rgba(139, 171, 165, 0.1); padding: 40px 36px; overflow: hidden; position: relative; background: #ffffff; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04); transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); flex-shrink: 0; border-radius: 16px; } .testimonials-grid-wrapper::-webkit-scrollbar { height: 6px; } .testimonials-grid-wrapper::-webkit-scrollbar-track { background: rgba(139, 171, 165, 0.1); border-radius: 10px; } .testimonials-grid-wrapper::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #8baba5; } .home-testimonial-card::before { top: 0; left: 0; right: 0; height: 4px; content: ""; position: absolute; transform: scaleX(0); background: linear-gradient(90deg, #8baba5, #6c8e9e); transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); transform-origin: left; } .home-testimonial-card:hover { transform: translateY(-8px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08); border-color: rgba(139, 171, 165, 0.2); } .home-testimonial-card:hover::before { transform: scaleX(1); } .home-testimonial-card:hover .testimonial-quote-icon { transform: rotate(-5deg) scale(1.05); background: linear-gradient(135deg, rgba(139, 171, 165, 0.15), rgba(108, 142, 158, 0.15)); } .home-thq-therapie-elm { width: 100%; display: flex; padding: var(--dl-layout-space-sixunits) var(--dl-layout-space-threeunits); overflow: hidden; position: relative; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); min-height: 100vh; align-items: center; flex-direction: column; scroll-margin-top: 80px; } .home-therapie-header { z-index: 1; position: relative; text-align: center; margin-bottom: var(--dl-layout-space-fiveunits); } .home-therapie-content-wrapper { gap: var(--dl-layout-space-fiveunits); width: 100%; display: flex; z-index: 1; position: relative; max-width: 1400px; flex-direction: column; } .home-preise-section { width: 100%; display: flex; padding: var(--dl-layout-space-fiveunits) var(--dl-layout-space-threeunits); overflow: hidden; position: relative; background: linear-gradient(135deg, rgba(108, 142, 158, 0.03) 0%, rgba(139, 171, 165, 0.05) 100%); align-items: center; justify-content: center; scroll-margin-top: 80px; } .home-therapie-main-title { color: var(--dl-color-stillebewegung-background); margin: 0; display: inline-block; position: relative; font-size: 3.5rem; font-family: "Playfair Display", serif; font-weight: 700; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); letter-spacing: -0.5px; } .home-therapie-card { padding: var(--dl-layout-space-fourunits); overflow: hidden; position: relative; background: rgba(255, 255, 255, 0.95); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 24px; } .home-preise-container { gap: var(--dl-layout-space-threeunits); width: 100%; display: flex; position: relative; max-width: 1400px; flex-direction: column; } .home-therapie-card-content1 { gap: var(--dl-layout-space-fourunits); display: grid; align-items: center; grid-template-columns: 1fr 400px; } .home-therapie-text-section { gap: var(--dl-layout-space-oneandhalfunits); display: flex; flex-direction: column; } .home-preise-title { color: var(--dl-color-stillebewegung-background); margin: 0; font-size: 2.5rem; text-align: center; font-family: "PT Serif", serif; font-weight: 700; letter-spacing: -0.5px; } .home-preise-pricing-card { gap: var(--dl-layout-space-twounits); border: 2px solid rgba(108, 142, 158, 0.2); height: 100%; display: flex; padding: var(--dl-layout-space-threeunits); overflow: hidden; position: relative; background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%); box-shadow: 0 8px 32px rgba(108, 142, 158, 0.15), 0 2px 8px rgba(108, 142, 158, 0.1); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 20px; flex-direction: column; } .home-preise-insurance-card { gap: var(--dl-layout-space-twounits); border: 2px solid rgba(108, 142, 158, 0.2); height: 100%; display: flex; padding: var(--dl-layout-space-threeunits); overflow: hidden; position: relative; background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%); box-shadow: 0 8px 32px rgba(108, 142, 158, 0.15), 0 2px 8px rgba(108, 142, 158, 0.1); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 20px; flex-direction: column; } .home-therapie-card-title { color: var(--dl-color-stillebewegung-background); width: fit-content; margin: 0 0 var(--dl-layout-space-unit) 0; display: inline-block; position: relative; font-size: 2.25rem; font-family: "Inter", sans-serif; font-weight: 700; letter-spacing: -0.3px; } .home-therapie-card-description { color: #4a5568; font-size: 1.05rem; font-family: "Inter", sans-serif; line-height: 1.8; } .home-therapie-image-wrapper { width: 100%; height: 450px; overflow: hidden; position: relative; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 20px; } .home-preise-info-list { gap: var(--dl-layout-space-twounits); height: 100%; display: grid; justify-content: center; grid-template-columns: repeat(2, 1fr); } .home-therapie-quote { color: #2d3748; margin: var(--dl-layout-space-oneandhalfunits) 0; padding: var(--dl-layout-space-oneandhalfunits); position: relative; font-size: 1rem; background: linear-gradient(135deg, rgba(139, 186, 224, 0.08) 0%, rgba(198, 167, 254, 0.08) 100%); font-style: italic; border-left: 4px solid #8bbae0; line-height: 1.7; border-radius: 0 12px 12px 0; } .home-therapie-translation { color: #5a6c7d; font-style: italic; border-left: 3px solid #c6a7fe; padding-left: var(--dl-layout-space-oneandhalfunits); } .home-preise-icon-wrapper { width: 52px; height: 52px; display: flex; position: relative; background: linear-gradient(135deg, #6c8e9e 0%, #8baba5 100%); box-shadow: 0 4px 16px rgba(108, 142, 158, 0.3); transition: all 0.3s ease; align-items: center; flex-shrink: 0; border-radius: 14px; justify-content: center; } .home-preise-card-title { color: var(--dl-color-stillebewegung-background); margin: 0; font-size: 1.5rem; font-family: "PT Serif", serif; font-weight: 700; } .home-preise-duration { color: #4a5568; margin: 0; font-size: 1rem; font-family: "Inter", sans-serif; font-weight: 500; letter-spacing: 0.2px; } .home-preise-icon-wrapper-secondary { background: linear-gradient(135deg, #8baba5 0%, #6c8e9e 100%); } .home-preise-icon { color: white; width: 28px; height: 28px; } .home-preise-currency { color: #6c8e9e; font-size: 1.25rem; font-family: "PT Serif", serif; font-weight: 700; } .home-preise-decimal { color: #6c8e9e; font-size: 1.25rem; font-family: "PT Serif", serif; font-weight: 700; } .home-preise-bullet { width: 28px; height: 28px; display: flex; background: linear-gradient(135deg, rgba(139, 171, 165, 0.15) 0%, rgba(108, 142, 158, 0.15) 100%); align-items: center; flex-shrink: 0; border-radius: 8px; justify-content: center; } .home-preise-info-text { flex: 1; color: #4a5568; margin: 0; font-size: 1.05rem; font-family: "Inter", sans-serif; line-height: 1.7; } .home-preise-bullet-icon { color: #6c8e9e; width: 20px; height: 20px; } .thq-preise-badge-elm { color: white; display: inline-block; padding: 4px 12px; font-size: 0.875rem; background: linear-gradient(135deg, #6c8e9e 0%, #8baba5 100%); box-shadow: 0 2px 8px rgba(108, 142, 158, 0.25); font-weight: 600; margin-left: 8px; border-radius: 12px; letter-spacing: 0.3px; } .home-thq-therapie-elm::before { top: -50%; right: -10%; width: 600px; height: 600px; content: ""; position: absolute; background: radial-gradient(circle, rgba(198, 167, 254, 0.15) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .home-thq-therapie-elm::after { left: -5%; width: 500px; bottom: -30%; height: 500px; content: ""; position: absolute; background: radial-gradient(circle, rgba(139, 186, 224, 0.15) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .home-therapie-main-title::after { left: 50%; width: 80px; bottom: -15px; height: 4px; content: ""; position: absolute; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--dl-color-stillebewegung-background), transparent); border-radius: 2px; } .home-therapie-card::before { top: 0; left: 0; right: 0; height: 5px; content: ""; opacity: 0; position: absolute; background: linear-gradient(90deg, #8bbae0, #c6a7fe); transition: opacity 0.4s ease; } .home-therapie-card:hover { transform: translateY(-8px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12); } .home-therapie-card:hover::before { opacity: 1; } .home-therapie-card:hover .therapie-image-wrapper { transform: scale(1.03); } .home-therapie-card:hover .therapie-image-wrapper::after { opacity: 1; } .home-therapie-card-title::after { left: 0; width: 50px; bottom: -8px; height: 3px; content: ""; position: absolute; background: linear-gradient(90deg, #8bbae0, #c6a7fe); border-radius: 2px; } .home-therapie-card-description p { margin: 0 0 var(--dl-layout-space-unit) 0; } .home-therapie-quote::before { top: -10px; left: 10px; color: rgba(139, 186, 224, 0.3); content: '"'; position: absolute; font-size: 4rem; font-family: Georgia, serif; line-height: 1; } .home-therapie-image-wrapper::after { inset: 0; content: ""; opacity: 0; position: absolute; background: linear-gradient(135deg, rgba(139, 186, 224, 0.1) 0%, rgba(198, 167, 254, 0.1) 100%); transition: opacity 0.4s ease; } .home-preise-pricing-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(108, 142, 158, 0.2), 0 4px 12px rgba(108, 142, 158, 0.15); border-color: rgba(108, 142, 158, 0.4); } .home-preise-pricing-card:hover .preise-icon-wrapper { transform: scale(1.05) rotate(5deg); box-shadow: 0 6px 20px rgba(108, 142, 158, 0.4); } .home-preise-insurance-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(108, 142, 158, 0.2), 0 4px 12px rgba(108, 142, 158, 0.15); border-color: rgba(108, 142, 158, 0.4); } .home-preise-insurance-card:hover .preise-icon-wrapper { transform: scale(1.05) rotate(5deg); box-shadow: 0 6px 20px rgba(108, 142, 158, 0.4); } .carousel-nav-btn { top: 50%; width: 48px; border: none; cursor: pointer; height: 48px; display: flex; z-index: 10; position: absolute; transform: translateY(-50%); box-shadow: 0 4px 12px rgba(139, 171, 165, 0.25); transition: all 0.3s ease; align-items: center; border-radius: 50%; justify-content: center; background-color: #8baba5; } .carousel-prev-btn { left: -24px; } .carousel-nav-icon { color: #ffffff; width: 24px; height: 24px; stroke: #ffffff; transition: transform 0.2s ease; } .carousel-nav-btn:hover:not(:disabled) { transform: translateY(-50%) scale(1.08); box-shadow: 0 6px 20px rgba(108, 142, 158, 0.35); background-color: #6c8e9e; } .carousel-nav-btn:active:not(:disabled) { transform: translateY(-50%) scale(0.95); box-shadow: 0 2px 8px rgba(139, 171, 165, 0.3); } .carousel-nav-btn:disabled { cursor: not-allowed; opacity: 0.4; box-shadow: 0 2px 6px rgba(139, 171, 165, 0.15); background-color: #8baba5; } .carousel-nav-btn:hover:not(:disabled) .carousel-nav-icon { transform: translateX(-2px); } .carousel-nav-btn:disabled .carousel-nav-icon { color: rgba(255, 255, 255, 0.6); stroke: rgba(255, 255, 255, 0.6); } .testimonial-nav-btn { top: 50%; color: #ffffff; width: 48px; border: none; cursor: pointer; height: 48px; display: flex; outline: none; z-index: 10; position: absolute; transform: translateY(-50%); box-shadow: 0 4px 12px rgba(139, 171, 165, 0.25); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); align-items: center; border-radius: 50%; justify-content: center; background-color: #8baba5; } .testimonial-nav-next { right: -20px; } .testimonial-nav-icon { width: 24px; height: 24px; transition: transform 0.3s ease; } .testimonial-nav-btn:hover:not(:disabled) { transform: translateY(-50%) scale(1.08); box-shadow: 0 6px 20px rgba(108, 142, 158, 0.4); background-color: #6c8e9e; } .testimonial-nav-btn:active:not(:disabled) { transform: translateY(-50%) scale(0.95); } .testimonial-nav-btn:disabled { cursor: not-allowed; opacity: 0.4; box-shadow: 0 2px 6px rgba(139, 171, 165, 0.15); background-color: #8baba5; } .testimonial-nav-btn:hover:not(:disabled) .testimonial-nav-icon { transform: translateX(3px); } .testimonial-dots-navigation { gap: 10px; display: flex; padding: 16px 0; margin-top: 32px; align-items: center; justify-content: center; } .testimonial-dot { width: 12px; border: none; cursor: pointer; height: 12px; outline: none; padding: 0; position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 50%; background-color: rgba(139, 171, 165, 0.3); } .testimonial-dot::before { top: 50%; left: 50%; width: 24px; height: 24px; content: ""; opacity: 0; position: absolute; transform: translate(-50%, -50%); transition: opacity 0.3s ease; border-radius: 50%; } .testimonial-dot:hover { transform: scale(1.2); background-color: rgba(139, 171, 165, 0.5); } .testimonial-dot:hover::before { opacity: 0.1; background-color: #8baba5; } .testimonial-dot:focus { outline: 2px solid rgba(139, 171, 165, 0.5); outline-offset: 3px; } .testimonial-dot.active { transform: scale(1.15); box-shadow: 0 0 0 3px rgba(139, 171, 165, 0.2); background-color: #8baba5; } .testimonial-dot.active:hover { transform: scale(1.25); box-shadow: 0 0 0 4px rgba(139, 171, 165, 0.25); } .testimonial-dot:active { transform: scale(0.95); } .testimonial-section-wrapper { width: 100%; margin: 0 auto; padding: 20px; position: relative; max-width: 800px; } .testimonial-content-container { display: flex; position: relative; align-items: center; justify-content: center; } .home-testimonial-dots-navigation { gap: 10px; display: flex; padding: 16px 0; margin-top: 32px; align-items: center; justify-content: center; } .testimonial-slider { width: 100%; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); border-radius: 16px; background-color: var(--dl-color-theme-neutral-light); } .testimonial-arrow-btn { top: 50%; color: #8baba5; width: 40px; border: 1px solid rgba(139, 171, 165, 0.2); cursor: pointer; height: 40px; display: flex; z-index: 10; position: absolute; transform: translateY(-50%); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; align-items: center; border-radius: 50%; justify-content: center; background-color: white; } .home-testimonial-dot { width: 12px; border: none; cursor: pointer; height: 12px; outline: none; padding: 0; position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 50%; background-color: rgba(139, 171, 165, 0.3); } .testimonial-track { display: flex; transition: transform 0.5s ease-in-out; } .home-testimonial-card1 { display: flex; padding: 40px 60px; min-width: 100%; box-sizing: border-box; text-align: center; align-items: center; flex-direction: column; } .home-testimonial-quote-icon { color: #8baba5; width: 40px; height: 40px; opacity: 0.5; margin-bottom: 20px; } .home-testimonial-text { color: var(--dl-color-theme-neutral-dark); font-size: 1.25rem; font-style: italic; font-family: Inter; line-height: 1.6; margin-bottom: 24px; } .home-testimonial-footer { gap: 4px; display: flex; flex-direction: column; } .home-testimonial-author { color: var(--dl-color-theme-neutral-dark); font-weight: 600; } .home-testimonial-therapy { color: #8baba5; font-size: 0.875rem; letter-spacing: 1px; text-transform: uppercase; } .testimonial-arrow-btn svg { width: 24px; height: 24px; } .testimonial-arrow-btn:hover { color: white; transform: translateY(-50%) scale(1.1); background-color: #8baba5; } .testimonial-arrow-btn.prev { left: -20px; } .testimonial-arrow-btn.next { right: -20px; } .home-testimonial-dot.active { transform: scale(1.15); box-shadow: 0 0 0 3px rgba(139, 171, 165, 0.2); background-color: #8baba5; } .carousel-dot { width: 12px; cursor: pointer; height: 12px; margin: 0 6px; transition: background-color 0.3s ease; flex-shrink: 0; border-radius: 50%; background-color: rgba(139, 171, 165, 0.3); } .carousel-dot:hover { background-color: rgba(139, 171, 165, 0.6); } .carousel-dot.active { background-color: #8baba5; } .about-me-header::after { left: 50%; width: 80px; bottom: -15px; height: 3px; content: ""; position: absolute; transform: translateX(-50%); background: linear-gradient(90deg, #8baba5, #6c8e9e); border-radius: 2px; } .about-me-cv-header::after { left: 50%; width: 80px; bottom: -15px; height: 3px; content: ""; position: absolute; transform: translateX(-50%); background: linear-gradient(90deg, #8baba5, #6c8e9e); border-radius: 2px; } .testimonial-slider::before { top: 0; left: 0; right: 0; height: 5px; content: ""; z-index: 5; position: absolute; background: linear-gradient(90deg, #8baba5, #6c8e9e); } .thq-termin-buchen-elm:hover { transform: scale(1.05); } .thq-register-elm { fill: var(--dl-color-stillebewegung-background); color: var(--dl-color-stillebewegung-background); transition: transform 0.3s ease; border-color: var(--dl-color-stillebewegung-textmenu); background-color: var(--dl-color-stillebewegung-textmenu); } .thq-register-elm:hover { transform: scale(1.05); } .thq-link-elm { fill: var(--dl-color-stillebewegung-textmenu); color: var(--dl-color-stillebewegung-textmenu); transition: 0.3s; text-decoration: none; } .thq-link-elm:hover { opacity: 0.6; } .link { fill: var(--dl-color-stillebewegung-textmenu); color: var(--dl-color-stillebewegung-textmenu); transition: 0.3s; text-decoration: none; } .link:hover { opacity: 0.6; } .text1 { fill: var(--dl-color-stillebewegung-textmenu); color: var(--dl-color-stillebewegung-textmenu); transition: 0.3s; font-family: "Inter"; } .text1:hover { opacity: 0.6; } .text2 { color: var(--dl-color-stillebewegung-textmenu); } .text2:hover { opacity: 0.6; } .text3 { color: var(--dl-color-stillebewegung-textmenu); } .text3:hover { opacity: 0.6; } .st-footer { color: #2c4a3c; padding: 80px 0 40px 0; overflow: hidden; position: relative; border-top: 1px solid rgba(44, 74, 60, 0.08); font-family: "Inter", sans-serif; background-color: #f9fbf9; scroll-margin-top: 80px; } .st-footer-grid { gap: 60px; display: grid; margin-bottom: 80px; grid-template-columns: 1.5fr 1fr 1fr; } .st-footer-bottom { display: flex; border-top: 1px solid rgba(44, 74, 60, 0.05); align-items: center; padding-top: 30px; justify-content: space-between; } .st-footer-legal { gap: 24px; display: flex; align-items: center; } .st-scroll-top { color: #5a8266; width: 40px; border: 1px solid rgba(90, 130, 102, 0.1); cursor: pointer; height: 40px; display: flex; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); transition: all 0.3s ease; align-items: center; border-radius: 50%; justify-content: center; background-color: white; } .st-footer-logo { font-size: 2rem; font-family: "Playfair Display", serif; font-weight: 700; margin-bottom: 0; letter-spacing: -0.02em; } .st-footer-tagline { opacity: 0.8; font-size: 1rem; max-width: 300px; line-height: 1.6; margin-bottom: 24px; } .st-social-links { gap: 12px; display: flex; } .st-footer-heading { position: relative; font-size: 1.25rem; font-family: "Playfair Display", serif; font-weight: 600; margin-bottom: 24px; } .st-contact-list { gap: 16px; display: flex; flex-direction: column; } .st-practitioner-name { font-size: 1.1rem; font-weight: 600; margin-bottom: 4px; } .st-practitioner-role { opacity: 0.7; font-size: 0.9rem; letter-spacing: 0.05em; text-transform: uppercase; } .st-footer-accent-line { width: 100%; height: 1px; background: linear-gradient(to right, #5a8266, transparent); margin-top: 20px; } .st-copyright { opacity: 0.6; font-size: 0.85rem; } .st-legal-link { color: inherit; opacity: 0.6; font-size: 0.85rem; transition: opacity 0.3s ease; text-decoration: none; } .st-accent-text { color: #5a8266; font-style: italic; font-weight: 400; } .st-social-icon { color: #5a8266; width: 36px; border: 1px solid rgba(90, 130, 102, 0.2); height: 36px; display: flex; transition: all 0.3s ease; align-items: center; border-radius: 50%; justify-content: center; } .st-contact-item { gap: 12px; display: flex; transition: transform 0.3s ease; align-items: center; } .st-contact-icon { color: #5a8266; display: flex; align-items: center; justify-content: center; } .st-contact-link { color: inherit; font-size: 0.95rem; transition: color 0.3s ease; text-decoration: none; } .st-contact-text { opacity: 0.9; font-size: 0.95rem; } .st-footer-heading::after { left: 0; width: 24px; bottom: -8px; height: 2px; content: ""; position: absolute; background-color: #5a8266; } .st-contact-link:hover { color: #5a8266; } .st-social-icon:hover { color: white; transform: translateY(-3px); background-color: #5a8266; } .st-legal-link:hover { opacity: 1; } .st-scroll-top:hover { color: white; transform: translateY(-5px); background-color: #5a8266; } .welcome-section { width: 100%; display: flex; padding: 80px 20px; overflow: hidden; position: relative; min-height: 80vh; align-items: center; justify-content: center; background-color: #f8f9f5; } .welcome-container { gap: 60px; width: 100%; display: grid; z-index: 3; position: relative; max-width: 1200px; align-items: center; grid-template-columns: 1fr 1.2fr; } .welcome-visual-layer { height: 500px; display: flex; position: relative; align-items: center; justify-content: center; } .welcome-content-card { gap: 24px; display: flex; flex-direction: column; } .welcome-blob-1 { top: -10%; left: -10%; width: 300px; filter: blur(40px); height: 300px; position: absolute; animation: welcome-float 15s infinite alternate; background: radial-gradient(circle, rgba(163, 177, 138, 0.2) 0%, transparent 70%); border-radius: 50%; } .welcome-blob-2 { right: -5%; width: 250px; bottom: -5%; filter: blur(30px); height: 250px; position: absolute; animation: welcome-float 12s infinite alternate-reverse; background: radial-gradient(circle, rgba(212, 163, 115, 0.15) 0%, transparent 70%); border-radius: 50%; } .welcome-image-wrapper { width: 100%; height: 100%; z-index: 2; overflow: hidden; position: relative; transform: scale(1.01); box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.15); border-radius: 20px 20px 20px 20px; } .welcome-badge { gap: 8px; color: #588157; width: fit-content; display: inline-flex; padding: 8px 16px; font-size: 0.85rem; background: rgba(163, 177, 138, 0.1); align-items: center; font-weight: 500; border-radius: 100px; letter-spacing: 0.05em; text-transform: uppercase; } .welcome-title { color: #344e41; font-size: 3.5rem; font-family: "Playfair Display", serif; font-weight: 600; line-height: 1.1; } .welcome-divider { gap: 15px; margin: 10px 0; display: flex; align-items: center; } .welcome-subtitle { color: #3a5a40; opacity: 0.9; font-size: 1.15rem; max-width: 500px; line-height: 1.6; } .welcome-actions { gap: 16px; display: flex; margin-top: 10px; } .welcome-hero-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); } .welcome-hero-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left center; transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); border-radius: 30px; background-color: transparent; /* Stelle sicher, dass es transparent ist */ } .welcome-image-overlay { top: 0; left: 0; width: 100%; height: 100%; position: absolute; background: linear-gradient(to bottom, transparent 60%, rgba(125, 143, 121, 0.2)); pointer-events: none; } .welcome-highlight { color: #588157; display: inline-block; position: relative; font-style: italic; } .welcome-line { height: 1px; flex-grow: 1; max-width: 60px; background: #a3b18a; } .welcome-dot { color: #a3b18a; display: flex; align-items: center; } .welcome-btn-primary { color: white; padding: 14px 32px; box-shadow: 0 10px 20px -5px rgba(88, 129, 87, 0.3); transition: all 0.3s ease; font-weight: 500; border-radius: 4px; text-decoration: none; background-color: #588157; } .welcome-btn-secondary { color: #588157; border: 1px solid #588157; padding: 14px 32px; transition: all 0.3s ease; font-weight: 500; border-radius: 4px; text-decoration: none; background-color: transparent; } .welcome-image-wrapper:hover .welcome-hero-image { transform: scale(1.05) rotate(2deg); border-radius: 30px; } .welcome-highlight::after { left: 0; width: 100%; bottom: 5px; height: 8px; content: ""; z-index: -1; position: absolute; background: rgba(163, 177, 138, 0.2); } .welcome-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 15px 25px -5px rgba(88, 129, 87, 0.4); background-color: #3a5a40; } .welcome-btn-secondary:hover { transform: translateY(-2px); background-color: rgba(88, 129, 87, 0.05); } /*Hier die fertigen CSS-Regeln — Bild links nimmt ~55% der Breite, rechts bleibt ~45% für Content; bei kleinen Bildschirmen wird das Layout einspaltig.*/ .welcome-container { display: grid; grid-template-columns: 55vw 1fr; /* Bild nimmt 55vw, Inhalt den Rest (≈45vw) */ gap: 20px; width: 100%; z-index: 3; position: relative; /*max-width: 100vw; /* erlaubt full-bleed Wirkung */ align-items: center; padding: 0 20px; } .welcome-visual-layer { height: 570px; display: flex; position: relative; align-items: center; justify-content: flex-start; /* Bild links ausrichten */ } .welcome-image-wrapper { position: relative; width: 55vw; min-width: 55vw; height: 100%; z-index: 2; overflow: hidden; transform: scale(1.03); box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.15); border-radius: 30px; /*margin-left: calc(-1 * ((100vw - 100%) / 2)); / schiebt wrapper bis zum linken Viewport-Rand */ } .welcome-image-wrapper { position: relative; width: 55vw; min-width: 55vw; height: 100%; z-index: 2; contain: paint; /* ← Statt overflow: hidden */ transform: scale(1.03); box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.15); border-radius: 30px; } /* Füllt den Wrapper und fokussiert links */ .welcome-hero-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left center; transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); border-radius: 30px; /*transform: scale(1.05); /* Minimal reingezoomt */ /*margin-left: calc(-1 * ((100vw - 100%) / 2)); /* schiebt wrapper bis zum linken Viewport-Rand */ } .welcome-content-card { gap: 24px; display: flex; flex-direction: column; padding: 40px; box-sizing: border-box; width: 100%; max-width: 45vw; } /* Falls deine ursprüngliche max-width:1200px gewünscht ist, entferne die folgende Zeile oben oder passe Werte accordingly */ @media (max-width: 1200px) { .welcome-container { grid-template-columns: 55vw 1fr; max-width: 100%; } } /* Mobile: Bild über gesamte Breite oberhalb des Content */ @media (max-width: 768px) { .welcome-container { display: grid; grid-template-columns: 1fr; gap: 24px; padding: 20px; max-width: 100%; } .welcome-visual-layer, .welcome-image-wrapper { width: 100%; min-width: 100%; height: auto; margin-left: 0; border-radius: 20px; transform: none; } .welcome-hero-image { height: 300px; object-position: center center; } .welcome-content-card { max-width: 100%; padding: 24px; } } .Menu { font-size: 20px; font-family: "Inter"; font-weight: 600; text-transform: none; text-decoration: none; } .buttonText { font-size: 20px; font-family: "Inter"; font-weight: 600; text-transform: capitalize; text-decoration: none; } .Titel1 { font-size: 40px; font-family: "Inter"; font-weight: 600; text-transform: none; text-decoration: none; } .Content { font-size: 16px; font-family: Inter; font-weight: 400; line-height: 1.15; text-transform: none; text-decoration: none; } .Titel2 { font-size: 30px; font-family: "Inter"; font-weight: 600; text-transform: none; text-decoration: none; } @media(max-width: 1600px) { .thq-therapie-elm { padding: var(--dl-layout-space-fiveunits) var(--dl-layout-space-twounits); } .therapie-main-title { font-size: 3rem; } .therapie-card-content { gap: var(--dl-layout-space-threeunits); grid-template-columns: 1fr 350px; } .preise-section { padding: var(--dl-layout-space-fourunits) var(--dl-layout-space-twounits); } .preise-title { font-size: 2.25rem; } .preise-info-list { gap: var(--dl-layout-space-unit); grid-template-columns: 1fr; } .thq-contact-content-wrapper-elm { height: 1118px; } } @media(max-width: 1200px) { .thq-therapie-elm { padding: var(--dl-layout-space-fourunits) var(--dl-layout-space-oneandhalfunits); } .therapie-main-title { font-size: 2.5rem; } .therapie-card-content { gap: var(--dl-layout-space-twounits); grid-template-columns: 1fr; } .preise-section { padding: var(--dl-layout-space-threeunits) var(--dl-layout-space-oneandhalfunits); } .preise-title { font-size: 2rem; } .preise-pricing-card { padding: var(--dl-layout-space-twounits); } .preise-insurance-card { padding: var(--dl-layout-space-twounits); } .welcome-title { font-size: 3rem; } } @media(max-width: 991px) { .thq-grid-4 { grid-template-columns: 1fr 1fr 1fr; } .thq-therapie-elm { padding: var(--dl-layout-space-threeunits) var(--dl-layout-space-unit); } .therapie-header { margin-bottom: var(--dl-layout-space-threeunits); } .therapie-content-wrapper { gap: var(--dl-layout-space-threeunits); } .therapie-main-title { font-size: 2rem; } .therapie-quote { padding: var(--dl-layout-space-unit); font-size: 0.95rem; } .about-me-title { font-size: 42px; } .preise-section { padding: var(--dl-layout-space-twounits) var(--dl-layout-space-unit); } .preise-title { font-size: 1.875rem; } .preise-info-list { gap: var(--dl-layout-space-unit); grid-template-columns: 1fr; } .contact-content-wrapper { gap: 40px; grid-template-columns: 1fr; } .home-contact-content-wrapper { gap: 40px; grid-template-columns: 1fr; } .home-contact-info-item { min-width: 100%; } .home-contact-content-wrapper1 { gap: 40px; grid-template-columns: 1fr; } .home-contact-info-item1 { min-width: 100%; } .home-contact-content-wrapper2 { gap: 40px; grid-template-columns: 1fr; } .home-contact-info-card { padding: 30px; } .home-contact-location-card { padding: 30px; } .home-contact-content-wrapper3 { gap: 40px; grid-template-columns: 1fr; } .home-contact-info-card1 { padding: 30px; } .home-contact-location-card1 { padding: 30px; } .home-contact-location-grid { gap: 25px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .home-contact-location-grid1 { gap: 25px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .testimonials-grid { gap: 24px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .testimonial-card { padding: 32px 28px; } .testimonials-grid-wrapper { margin-top: 30px; } .home-testimonials-grid { gap: 24px; padding: 0 10px; } .home-testimonial-card { width: 340px; padding: 32px 28px; } .welcome-container { gap: 40px; text-align: center; grid-template-columns: 1fr; } .welcome-visual-layer { order: 2; height: 400px; } .welcome-content-card { order: 1; align-items: center; } .welcome-image-wrapper { width: 80%; margin: 0 auto; } .welcome-subtitle { margin: 0 auto; } .welcome-actions { justify-content: center; } } @media(max-width: 767px) { .thq-section-padding { padding: var(--dl-layout-space-threeunits); } .thq-flex-column { gap: var(--dl-layout-space-oneandhalfunits); } .thq-flex-row { gap: var(--dl-layout-space-oneandhalfunits); } .thq-grid-6 { grid-gap: var(--dl-layout-space-oneandhalfunits); grid-template-columns: 1fr 1fr 1fr; } .thq-grid-5 { grid-gap: var(--dl-layout-space-oneandhalfunits); grid-template-columns: 1fr 1fr 1fr; } .thq-card { padding: var(--dl-layout-space-oneandhalfunits); } .thq-grid-3 { grid-gap: var(--dl-layout-space-oneandhalfunits); grid-template-columns: 1fr 1fr; } .thq-grid-4 { grid-gap: var(--dl-layout-space-oneandhalfunits); flex-direction: row; grid-template-columns: 1fr 1fr; } .thq-grid-2 { grid-gap: var(--dl-layout-space-oneandhalfunits); grid-template-columns: 1fr; } .thq-img-scale { width: 100%; } .thq-therapie-elm { padding: var(--dl-layout-space-twounits) var(--dl-layout-space-unit); } .therapie-content-wrapper { gap: var(--dl-layout-space-twounits); } .therapie-main-title { font-size: 1.75rem; } .therapie-quote { font-size: 0.9rem; } .about-me-title { font-size: 36px; } .about-me-cv-title { font-size: 32px; } .preise-section { padding: var(--dl-layout-space-oneandhalfunits) var(--dl-layout-space-unit); } .preise-title { font-size: 1.75rem; } .preise-pricing-card { padding: var(--dl-layout-space-oneandhalfunits); } .preise-insurance-card { padding: var(--dl-layout-space-oneandhalfunits); } .preise-icon-wrapper { width: 52px; height: 52px; } .preise-icon { width: 28px; height: 28px; } .preise-currency { font-size: 1.25rem; } .preise-decimal { font-size: 1.25rem; } .preise-info-text { font-size: 1rem; } .contact-section { margin-bottom: 40px; } .contact-content-wrapper { gap: 30px; } .contact-location-card { min-height: auto; } .contact-location-list { gap: 30px; } .contact-location-icon-wrapper { width: 45px; height: 45px; } .contact-location-icon { width: 22px; height: 22px; } .home-contact-section { padding: 60px 16px; } .home-contact-content-wrapper { gap: 30px; } .contact-location-section { margin-bottom: 40px; padding-bottom: 50px; } .home-contact-location-list { gap: 30px; } .home-contact-info-item { padding: 16px; } .home-contact-section1 { padding: 60px 16px; } .home-contact-content-wrapper1 { gap: 30px; } .home-contact-location-list1 { gap: 30px; } .home-contact-info-item1 { padding: 16px; } .home-contact-content-wrapper2 { gap: 30px; } .home-contact-info-card { padding: 25px; border-radius: 16px; } .home-contact-location-card { padding: 25px; border-radius: 16px; } .contact-location-grid { margin-bottom: 20px; } .home-contact-content-wrapper3 { gap: 30px; } .home-contact-info-card1 { padding: 25px; border-radius: 16px; } .home-contact-location-card1 { padding: 25px; border-radius: 16px; } .home-contact-location-card2 { min-height: auto; } .thq-contact-content-wrapper-elm { height: auto; } .home-contact-location-grid { gap: 20px; grid-template-columns: 1fr; } .home-contact-location-grid1 { gap: 20px; grid-template-columns: 1fr; } .testimonials-grid { gap: 20px; grid-template-columns: 1fr; } .testimonial-card { padding: 28px 24px; } .home-testimonials-grid { gap: 20px; } .home-testimonial-card { width: 300px; padding: 28px 24px; } .carousel-nav-btn { left: -12px; width: 40px; height: 40px; } .carousel-prev-btn { left: -12px; } .carousel-nav-icon { width: 20px; height: 20px; } .testimonial-nav-btn { right: -10px; width: 40px; height: 40px; } .testimonial-nav-next { right: -10px; } .testimonial-nav-icon { width: 20px; height: 20px; } .testimonial-dots-navigation { gap: 8px; padding: 12px 0; margin-top: 24px; } .testimonial-dot { width: 10px; height: 10px; } .welcome-section { padding: 60px 20px; } .welcome-title { font-size: 2.5rem; } } @media(max-width: 479px) { .thq-section-padding { padding: var(--dl-layout-space-oneandhalfunits); } .thq-flex-column { gap: var(--dl-layout-space-unit); } .thq-flex-row { gap: var(--dl-layout-space-unit); } .thq-grid-6 { grid-gap: var(--dl-layout-space-unit); grid-template-columns: 1fr 1fr; } .thq-grid-5 { grid-gap: var(--dl-layout-space-unit); grid-template-columns: 1fr 1fr; } .thq-grid-3 { grid-gap: var(--dl-layout-space-unit); align-items: center; grid-template-columns: 1fr; } .thq-grid-4 { grid-gap: var(--dl-layout-space-unit); align-items: center; flex-direction: column; grid-template-columns: 1fr; } .thq-grid-2 { grid-gap: var(--dl-layout-space-unit); } .thq-grid-auto-300 { grid-template-columns: 1fr; } .therapie-main-title { font-size: 1.5rem; } .about-me-title { font-size: 32px; } .preise-title { font-size: 1.5rem; } .preise-pricing-card { padding: var(--dl-layout-space-unit); } .preise-insurance-card { padding: var(--dl-layout-space-unit); } .preise-icon-wrapper { width: 48px; height: 48px; } .preise-duration { font-size: 1rem; } .preise-icon-wrapper-secondary { width: 40px; height: 40px; } .preise-info-text { font-size: 0.95rem; } .preise-badge { width: fit-content; display: block; margin-top: 8px; margin-left: 0; } .preise-info-title { font-size: 1.25rem; } .home-contact-info-card { padding: 20px; } .home-contact-location-card { padding: 20px; } .home-contact-info-card1 { padding: 20px; } .home-contact-location-card1 { padding: 20px; } .testimonial-card { padding: 24px 20px; } .home-testimonial-card { padding: 24px 20px; } .thq-preise-badge-elm { width: fit-content; display: block; padding: 6px 12px; font-size: 0.875rem; margin-top: 8px; margin-left: 0; } .carousel-nav-btn { left: 4px; width: 36px; height: 36px; } .carousel-prev-btn { left: 4px; } .testimonial-nav-btn { right: 0; width: 36px; height: 36px; } .testimonial-nav-next { right: 0; } .welcome-title { font-size: 2rem; } .welcome-actions { width: 100%; flex-direction: column; } .welcome-btn-primary { text-align: center; } .welcome-btn-secondary { text-align: center; } } /* ===== CSS Variables ===== */ :root { --dl-color-stillebewegung-background: #8baba5; --dl-color-stillebewegung-textmenu: #ffffff; --dl-layout-space-unit: 16px; --dl-layout-space-halfunit: 8px; --dl-layout-space-oneandhalfunits: 24px; --dl-layout-space-twounits: 32px; --dl-layout-space-threeunits: 48px; --dl-layout-space-fourunits: 64px; --dl-layout-space-fiveunits: 80px; --dl-layout-space-sixunits: 96px; } /* ===== Therapie Section ===== */ .home-thq-therapie-elm { width: 100%; display: flex; padding: var(--dl-layout-space-sixunits) var(--dl-layout-space-threeunits); overflow: hidden; position: relative; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); min-height: 100vh; align-items: center; flex-direction: column; scroll-margin-top: 80px; } .home-therapie-header { z-index: 1; position: relative; text-align: center; margin-bottom: var(--dl-layout-space-fiveunits); } .home-thq-therapie-main-title-elm { color: var(--dl-color-stillebewegung-background); margin: 0; display: inline-block; position: relative; font-size: 3.5rem; font-family: "Playfair Display", serif; font-weight: 700; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); letter-spacing: -0.5px; } .home-therapie-content-wrapper { gap: var(--dl-layout-space-fiveunits); width: 100%; display: flex; z-index: 1; position: relative; max-width: 1400px; flex-direction: column; } /* ===== Therapie Cards ===== */ .home-therapie-card { padding: var(--dl-layout-space-fourunits); overflow: hidden; position: relative; background: rgba(255, 255, 255, 0.95); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 24px; } .home-therapie-card::before { top: 0; left: 0; right: 0; height: 5px; content: ""; opacity: 0; position: absolute; background: linear-gradient(90deg, #8bbae0, #c6a7fe); transition: opacity 0.4s ease; } .home-therapie-card:hover { transform: translateY(-8px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12); } .home-therapie-card:hover::before { opacity: 1; } .home-therapie-card:hover .home-therapie-image-wrapper { transform: scale(1.03); } .home-therapie-card:hover .home-therapie-image-wrapper::after { opacity: 1; } .home-therapie-card-content1 { gap: var(--dl-layout-space-fourunits); display: grid; align-items: center; grid-template-columns: 1fr 400px; } .therapie-card-reverse .home-therapie-card-content1 { grid-template-columns: 400px 1fr; } .therapie-text-section { gap: var(--dl-layout-space-oneandhalfunits); display: flex; flex-direction: column; } .home-therapie-text-section { gap: var(--dl-layout-space-oneandhalfunits); display: flex; flex-direction: column; } .therapie-image-section { position: relative; } .home-therapie-card-title { color: var(--dl-color-stillebewegung-background); width: fit-content; margin: 0 0 var(--dl-layout-space-unit) 0; display: inline-block; position: relative; font-size: 2.25rem; font-family: "Inter", sans-serif; font-weight: 700; letter-spacing: -0.3px; } .home-therapie-card-title::after { left: 0; width: 50px; bottom: -8px; height: 3px; content: ""; position: absolute; background: linear-gradient(90deg, #8bbae0, #c6a7fe); border-radius: 2px; } .home-therapie-card-description { color: #4a5568; font-size: 1.05rem; font-family: "Inter", sans-serif; line-height: 1.8; } .home-therapie-card-description p { margin: 0 0 var(--dl-layout-space-unit) 0; } .home-therapie-image-wrapper { width: 100%; height: 450px; overflow: hidden; position: relative; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 20px; } .home-therapie-image-wrapper::after { inset: 0; content: ""; opacity: 0; position: absolute; background: linear-gradient(135deg, rgba(139, 186, 224, 0.1) 0%, rgba(198, 167, 254, 0.1) 100%); transition: opacity 0.4s ease; } .therapie-image { width: 100%; height: 100%; display: block; object-fit: cover; } .home-therapie-quote { color: #2d3748; margin: var(--dl-layout-space-oneandhalfunits) 0; padding: var(--dl-layout-space-oneandhalfunits); position: relative; font-size: 1rem; background: linear-gradient(135deg, rgba(139, 186, 224, 0.08) 0%, rgba(198, 167, 254, 0.08) 100%); font-style: italic; border-left: 4px solid #8bbae0; line-height: 1.7; border-radius: 0 12px 12px 0; } .home-therapie-quote::before { top: -10px; left: 10px; color: rgba(139, 186, 224, 0.3); content: '"'; position: absolute; font-size: 4rem; font-family: Georgia, serif; line-height: 1; } .therapie-translation-label { color: var(--dl-color-stillebewegung-background); margin-top: var(--dl-layout-space-unit); font-weight: 600; } .home-therapie-translation { color: #8baba5; font-style: italic; border-left: 3px solid #c6a7fe; padding-left: var(--dl-layout-space-oneandhalfunits); } /* ===== Preise Section ===== */ .home-preise-section { width: 100%; display: flex; padding: var(--dl-layout-space-fiveunits) var(--dl-layout-space-threeunits); overflow: hidden; position: relative; background: linear-gradient(135deg, rgba(108, 142, 158, 0.03) 0%, rgba(139, 171, 165, 0.05) 100%); align-items: center; justify-content: center; scroll-margin-top: 80px; margin-top: var(--dl-layout-space-fiveunits); border-radius: 24px; } .home-preise-container { gap: var(--dl-layout-space-threeunits); width: 100%; display: flex; position: relative; max-width: 1400px; flex-direction: column; } .preise-header { gap: var(--dl-layout-space-unit); display: flex; position: relative; align-items: center; flex-direction: column; } .home-preise-title { color: var(--dl-color-stillebewegung-background); margin: 0; font-size: 2.5rem; text-align: center; font-family: "PT Serif", serif; font-weight: 700; letter-spacing: -0.5px; } .preise-title-line { width: 80px; height: 4px; background: linear-gradient(90deg, transparent, #6c8e9e, transparent); border-radius: 2px; } .preise-content-grid { gap: var(--dl-layout-space-twounits); display: grid; z-index: 2; position: relative; grid-template-columns: repeat(2, 1fr); } .home-preise-pricing-card { gap: var(--dl-layout-space-twounits); border: 2px solid rgba(108, 142, 158, 0.2); height: 100%; display: flex; padding: var(--dl-layout-space-threeunits); overflow: hidden; position: relative; background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%); box-shadow: 0 8px 32px rgba(108, 142, 158, 0.15), 0 2px 8px rgba(108, 142, 158, 0.1); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 20px; flex-direction: column; } .home-preise-insurance-card { gap: var(--dl-layout-space-twounits); border: 2px solid rgba(108, 142, 158, 0.2); height: 100%; display: flex; padding: var(--dl-layout-space-threeunits); overflow: hidden; position: relative; background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%); box-shadow: 0 8px 32px rgba(108, 142, 158, 0.15), 0 2px 8px rgba(108, 142, 158, 0.1); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 20px; flex-direction: column; } .home-preise-pricing-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(108, 142, 158, 0.2), 0 4px 12px rgba(108, 142, 158, 0.15); border-color: rgba(108, 142, 158, 0.4); } .home-preise-pricing-card:hover .home-preise-icon-wrapper { transform: scale(1.05) rotate(5deg); box-shadow: 0 6px 20px rgba(108, 142, 158, 0.4); } .home-preise-insurance-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(108, 142, 158, 0.2), 0 4px 12px rgba(108, 142, 158, 0.15); border-color: rgba(108, 142, 158, 0.4); } .home-preise-insurance-card:hover .home-preise-icon-wrapper { transform: scale(1.05) rotate(5deg); box-shadow: 0 6px 20px rgba(108, 142, 158, 0.4); } .preise-card-header { gap: var(--dl-layout-space-unit); width: 100%; display: flex; align-items: center; } .preise-card-body { gap: var(--dl-layout-space-unit); display: flex; flex-direction: column; } .home-preise-icon-wrapper { width: 52px; height: 52px; display: flex; position: relative; background: linear-gradient(135deg, #6c8e9e 0%, #8baba5 100%); box-shadow: 0 4px 16px rgba(108, 142, 158, 0.3); transition: all 0.3s ease; align-items: center; flex-shrink: 0; border-radius: 14px; justify-content: center; } .home-preise-icon-wrapper-secondary { background: linear-gradient(135deg, #8baba5 0%, #6c8e9e 100%); } .home-preise-icon { color: white; width: 28px; height: 28px; } .home-preise-card-title { color: var(--dl-color-stillebewegung-background); margin: 0; font-size: 1.5rem; font-family: "PT Serif", serif; font-weight: 700; } .home-preise-duration { color: #4a5568; margin: 0; font-size: 1rem; font-family: "Inter", sans-serif; font-weight: 500; letter-spacing: 0.2px; } .preise-amount-wrapper { gap: 4px; display: flex; align-items: baseline; } .home-preise-info-list { gap: var(--dl-layout-space-twounits); height: 100%; display: grid; justify-content: center; grid-template-columns: repeat(2, 1fr); } .preise-info-item { gap: var(--dl-layout-space-unit); display: flex; align-items: flex-start; } .home-preise-bullet { width: 28px; height: 28px; display: flex; background: linear-gradient(135deg, rgba(139, 171, 165, 0.15) 0%, rgba(108, 142, 158, 0.15) 100%); align-items: center; flex-shrink: 0; border-radius: 8px; justify-content: center; } .home-preise-bullet-icon { color: #6c8e9e; width: 20px; height: 20px; } .home-preise-info-text { flex: 1; color: #4a5568; margin: 0; font-size: 1.05rem; font-family: "Inter", sans-serif; line-height: 1.7; } .home-text32 { color: white; display: inline-block; padding: 4px 12px; font-size: 0.875rem; background: linear-gradient(135deg, #6c8e9e 0%, #8baba5 100%); box-shadow: 0 2px 8px rgba(108, 142, 158, 0.25); font-weight: 600; margin-left: 8px; border-radius: 12px; letter-spacing: 0.3px; } .preise-card-decoration { background: radial-gradient(circle at top right, rgba(139, 171, 165, 0.08) 0%, transparent 70%); } .preise-card-decoration-secondary { background: radial-gradient(circle at top right, rgba(139, 171, 165, 0.08) 0%, transparent 70%); } .preise-bg-decoration { opacity: 0.4; z-index: 1; position: absolute; border-radius: 50%; pointer-events: none; } .preise-bg-decoration-1 { top: -80px; right: -80px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(108, 142, 158, 0.12) 0%, transparent 70%); } .preise-bg-decoration-2 { left: -60px; width: 250px; bottom: -60px; height: 250px; background: radial-gradient(circle, rgba(139, 171, 165, 0.12) 0%, transparent 70%); } /* ===== Animations ===== */ @keyframes float-slow { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } } @keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ===== Responsive ===== */ @media (max-width: 1200px) { .home-thq-therapie-elm { padding: var(--dl-layout-space-fiveunits) var(--dl-layout-space-twounits); } .home-thq-therapie-main-title-elm { font-size: 3rem; } .home-therapie-card-content1 { gap: var(--dl-layout-space-threeunits); grid-template-columns: 1fr; } .therapie-card-reverse .home-therapie-card-content1 { grid-template-columns: 1fr; } .home-preise-section { padding: var(--dl-layout-space-fourunits) var(--dl-layout-space-twounits); } .home-preise-title { font-size: 2.25rem; } .preise-content-grid { grid-template-columns: 1fr; } } @media (max-width: 991px) { .home-thq-therapie-elm { padding: var(--dl-layout-space-fourunits) var(--dl-layout-space-oneandhalfunits); min-height: auto; } .home-thq-therapie-main-title-elm { font-size: 2.5rem; } .home-therapie-card { padding: var(--dl-layout-space-twounits); } .home-therapie-card-content1 { gap: var(--dl-layout-space-twounits); } .home-preise-section { padding: var(--dl-layout-space-threeunits) var(--dl-layout-space-oneandhalfunits); } .home-preise-title { font-size: 2rem; } .preise-content-grid { grid-template-columns: 1fr; } .home-preise-pricing-card { padding: var(--dl-layout-space-twounits); } .home-preise-insurance-card { padding: var(--dl-layout-space-twounits); } .home-preise-info-list { grid-template-columns: 1fr; } } @media (max-width: 767px) { .home-thq-therapie-elm { padding: var(--dl-layout-space-threeunits) var(--dl-layout-space-unit); } .home-therapie-header { margin-bottom: var(--dl-layout-space-threeunits); } .home-thq-therapie-main-title-elm { font-size: 2rem; } .home-therapie-content-wrapper { gap: var(--dl-layout-space-threeunits); } .home-therapie-card { padding: var(--dl-layout-space-oneandhalfunits); } .home-therapie-card-content1 { gap: var(--dl-layout-space-oneandhalfunits); } .home-therapie-card-title { font-size: 1.75rem; } .home-therapie-card-description { font-size: 0.95rem; } .home-therapie-quote { padding: var(--dl-layout-space-unit); font-size: 0.9rem; } .home-therapie-image-wrapper { height: 300px; } .preise-header { margin-bottom: var(--dl-layout-space-twounits); } .home-preise-section { padding: var(--dl-layout-space-twounits) var(--dl-layout-space-unit); margin-top: var(--dl-layout-space-threeunits); } .home-preise-title { font-size: 1.75rem; } .home-preise-pricing-card { padding: var(--dl-layout-space-oneandhalfunits); } .home-preise-insurance-card { padding: var(--dl-layout-space-oneandhalfunits); } .home-preise-info-list { gap: var(--dl-layout-space-unit); } .preise-info-item { gap: 8px; } .home-preise-info-text { font-size: 0.95rem; } } @media (max-width: 479px) { .home-thq-therapie-elm { padding: var(--dl-layout-space-twounits) var(--dl-layout-space-unit); } .home-thq-therapie-main-title-elm { font-size: 1.5rem; } .home-therapie-card { padding: var(--dl-layout-space-unit); } .home-therapie-card-content1 { gap: var(--dl-layout-space-unit); } .home-therapie-card-title { font-size: 1.5rem; margin-bottom: 8px; } .home-therapie-card-description { font-size: 0.9rem; line-height: 1.6; } .home-therapie-quote { padding: 12px; font-size: 0.85rem; margin: 12px 0; } .home-therapie-image-wrapper { height: 250px; } .home-preise-section { padding: var(--dl-layout-space-oneandhalfunits) var(--dl-layout-space-unit); margin-top: var(--dl-layout-space-twounits); } .home-preise-title { font-size: 1.5rem; } .home-preise-pricing-card { padding: var(--dl-layout-space-unit); } .home-preise-insurance-card { padding: var(--dl-layout-space-unit); } .home-preise-card-title { font-size: 1.25rem; } .home-preise-duration { font-size: 0.9rem; } .home-preise-info-list { gap: 12px; } .preise-info-item { gap: 6px; } .home-preise-info-text { font-size: 0.85rem; line-height: 1.5; } .home-text32 { padding: 2px 8px; font-size: 0.75rem; margin-left: 4px; } } /* === Inhalt von styles.css === */ /* ===== CSS Variables ===== */ :root { --dl-color-stillebewegung-background: #8baba5; --dl-color-stillebewegung-textmenu: #ffffff; --dl-layout-space-unit: 16px; --dl-layout-space-halfunit: 8px; --dl-layout-space-oneandhalfunits: 24px; --dl-layout-space-twounits: 32px; --dl-layout-space-threeunits: 48px; --dl-layout-space-fourunits: 64px; --dl-layout-space-fiveunits: 80px; --dl-layout-space-sixunits: 96px; } /* ===== Therapie Section ===== */ .home-thq-therapie-elm { width: 100%; display: flex; padding: var(--dl-layout-space-sixunits) var(--dl-layout-space-threeunits); overflow: hidden; position: relative; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); min-height: 100vh; align-items: center; flex-direction: column; scroll-margin-top: 80px; } .home-therapie-header { z-index: 1; position: relative; text-align: center; margin-bottom: var(--dl-layout-space-fiveunits); } .home-thq-therapie-main-title-elm { color: var(--dl-color-stillebewegung-background); margin: 0; display: inline-block; position: relative; font-size: 3.5rem; font-family: "Playfair Display", serif; font-weight: 700; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); letter-spacing: -0.5px; } .home-therapie-content-wrapper { gap: var(--dl-layout-space-fiveunits); width: 100%; display: flex; z-index: 1; position: relative; max-width: 1400px; flex-direction: column; } /* ===== Therapie Cards ===== */ .home-therapie-card { padding: var(--dl-layout-space-fourunits); overflow: hidden; position: relative; background: rgba(255, 255, 255, 0.95); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 24px; } .home-therapie-card::before { top: 0; left: 0; right: 0; height: 5px; content: ""; opacity: 0; position: absolute; background: linear-gradient(90deg, #8bbae0, #c6a7fe); transition: opacity 0.4s ease; } .home-therapie-card:hover { transform: translateY(-8px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12); } .home-therapie-card:hover::before { opacity: 1; } .home-therapie-card:hover .home-therapie-image-wrapper { transform: scale(1.03); } .home-therapie-card:hover .home-therapie-image-wrapper::after { opacity: 1; } .home-therapie-card-content1 { gap: var(--dl-layout-space-fourunits); display: grid; align-items: center; grid-template-columns: 1fr 400px; } .therapie-card-reverse .home-therapie-card-content1 { grid-template-columns: 400px 1fr; } .therapie-text-section { gap: var(--dl-layout-space-oneandhalfunits); display: flex; flex-direction: column; } .home-therapie-text-section { gap: var(--dl-layout-space-oneandhalfunits); display: flex; flex-direction: column; } .therapie-image-section { position: relative; } .home-therapie-card-title { color: var(--dl-color-stillebewegung-background); width: fit-content; margin: 0 0 var(--dl-layout-space-unit) 0; display: inline-block; position: relative; font-size: 2.25rem; font-family: "Inter", sans-serif; font-weight: 700; letter-spacing: -0.3px; } .home-therapie-card-title::after { left: 0; width: 50px; bottom: -8px; height: 3px; content: ""; position: absolute; background: linear-gradient(90deg, #8bbae0, #c6a7fe); border-radius: 2px; } .home-therapie-card-description { color: #4a5568; font-size: 1.05rem; font-family: "Inter", sans-serif; line-height: 1.8; } .home-therapie-card-description p { margin: 0 0 var(--dl-layout-space-unit) 0; } .home-therapie-image-wrapper { width: 100%; height: 450px; overflow: hidden; position: relative; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 20px; } .home-therapie-image-wrapper::after { inset: 0; content: ""; opacity: 0; position: absolute; background: linear-gradient(135deg, rgba(139, 186, 224, 0.1) 0%, rgba(198, 167, 254, 0.1) 100%); transition: opacity 0.4s ease; } .therapie-image { width: 100%; height: 100%; display: block; object-fit: cover; } .home-therapie-quote { color: #2d3748; margin: var(--dl-layout-space-oneandhalfunits) 0; padding: var(--dl-layout-space-oneandhalfunits); position: relative; font-size: 1rem; background: linear-gradient(135deg, rgba(139, 186, 224, 0.08) 0%, rgba(198, 167, 254, 0.08) 100%); font-style: italic; border-left: 4px solid #8bbae0; line-height: 1.7; border-radius: 0 12px 12px 0; } .home-therapie-quote::before { top: -10px; left: 10px; color: rgba(139, 186, 224, 0.3); content: '"'; position: absolute; font-size: 4rem; font-family: Georgia, serif; line-height: 1; } .therapie-translation-label { color: var(--dl-color-stillebewegung-background); margin-top: var(--dl-layout-space-unit); font-weight: 600; } .home-therapie-translation { color: #8baba5; font-style: italic; border-left: 3px solid #c6a7fe; padding-left: var(--dl-layout-space-oneandhalfunits); } /* ===== Preise Section ===== */ .home-preise-section { width: 100%; display: flex; padding: var(--dl-layout-space-fiveunits) var(--dl-layout-space-threeunits); overflow: hidden; position: relative; background: linear-gradient(135deg, rgba(108, 142, 158, 0.03) 0%, rgba(139, 171, 165, 0.05) 100%); align-items: center; justify-content: center; scroll-margin-top: 80px; margin-top: var(--dl-layout-space-fiveunits); border-radius: 24px; } .home-preise-container { gap: var(--dl-layout-space-threeunits); width: 100%; display: flex; position: relative; max-width: 1400px; flex-direction: column; } .preise-header { gap: var(--dl-layout-space-unit); display: flex; position: relative; align-items: center; flex-direction: column; } .home-preise-title { color: var(--dl-color-stillebewegung-background); margin: 0; font-size: 2.5rem; text-align: center; font-family: "PT Serif", serif; font-weight: 700; letter-spacing: -0.5px; } .preise-title-line { width: 80px; height: 4px; background: linear-gradient(90deg, transparent, #6c8e9e, transparent); border-radius: 2px; } .preise-content-grid { gap: var(--dl-layout-space-twounits); display: grid; z-index: 2; position: relative; grid-template-columns: repeat(2, 1fr); } .home-preise-pricing-card { gap: var(--dl-layout-space-twounits); border: 2px solid rgba(108, 142, 158, 0.2); height: 100%; display: flex; padding: var(--dl-layout-space-threeunits); overflow: hidden; position: relative; background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%); box-shadow: 0 8px 32px rgba(108, 142, 158, 0.15), 0 2px 8px rgba(108, 142, 158, 0.1); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 20px; flex-direction: column; } .home-preise-insurance-card { gap: var(--dl-layout-space-twounits); border: 2px solid rgba(108, 142, 158, 0.2); height: 100%; display: flex; padding: var(--dl-layout-space-threeunits); overflow: hidden; position: relative; background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%); box-shadow: 0 8px 32px rgba(108, 142, 158, 0.15), 0 2px 8px rgba(108, 142, 158, 0.1); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 20px; flex-direction: column; } .home-preise-pricing-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(108, 142, 158, 0.2), 0 4px 12px rgba(108, 142, 158, 0.15); border-color: rgba(108, 142, 158, 0.4); } .home-preise-pricing-card:hover .home-preise-icon-wrapper { transform: scale(1.05) rotate(5deg); box-shadow: 0 6px 20px rgba(108, 142, 158, 0.4); } .home-preise-insurance-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(108, 142, 158, 0.2), 0 4px 12px rgba(108, 142, 158, 0.15); border-color: rgba(108, 142, 158, 0.4); } .home-preise-insurance-card:hover .home-preise-icon-wrapper { transform: scale(1.05) rotate(5deg); box-shadow: 0 6px 20px rgba(108, 142, 158, 0.4); } .preise-card-header { gap: var(--dl-layout-space-unit); width: 100%; display: flex; align-items: center; } .preise-card-body { gap: var(--dl-layout-space-unit); display: flex; flex-direction: column; } .home-preise-icon-wrapper { width: 52px; height: 52px; display: flex; position: relative; background: linear-gradient(135deg, #6c8e9e 0%, #8baba5 100%); box-shadow: 0 4px 16px rgba(108, 142, 158, 0.3); transition: all 0.3s ease; align-items: center; flex-shrink: 0; border-radius: 14px; justify-content: center; } .home-preise-icon-wrapper-secondary { background: linear-gradient(135deg, #8baba5 0%, #6c8e9e 100%); } .home-preise-icon { color: white; width: 28px; height: 28px; } .home-preise-card-title { color: var(--dl-color-stillebewegung-background); margin: 0; font-size: 1.5rem; font-family: "PT Serif", serif; font-weight: 700; } .home-preise-duration { color: #4a5568; margin: 0; font-size: 1rem; font-family: "Inter", sans-serif; font-weight: 500; letter-spacing: 0.2px; } .preise-amount-wrapper { gap: 4px; display: flex; align-items: baseline; } .home-preise-info-list { gap: var(--dl-layout-space-twounits); height: 100%; display: grid; justify-content: center; grid-template-columns: repeat(2, 1fr); } .preise-info-item { gap: var(--dl-layout-space-unit); display: flex; align-items: flex-start; } .home-preise-bullet { width: 28px; height: 28px; display: flex; background: linear-gradient(135deg, rgba(139, 171, 165, 0.15) 0%, rgba(108, 142, 158, 0.15) 100%); align-items: center; flex-shrink: 0; border-radius: 8px; justify-content: center; } .home-preise-bullet-icon { color: #6c8e9e; width: 20px; height: 20px; } .home-preise-info-text { flex: 1; color: #4a5568; margin: 0; font-size: 1.05rem; font-family: "Inter", sans-serif; line-height: 1.7; } .home-text32 { color: white; display: inline-block; padding: 6px 12px; font-size: 0.875rem; background: linear-gradient(135deg, #6c8e9e 0%, #8baba5 100%); box-shadow: 0 2px 8px rgba(108, 142, 158, 0.25); font-weight: 600; margin: 20px 0px 0px 20px; border-radius: 12px; letter-spacing: 0.3px; } .preise-card-decoration { background: radial-gradient(circle at top right, rgba(139, 171, 165, 0.08) 0%, transparent 70%); } .preise-card-decoration-secondary { background: radial-gradient(circle at top right, rgba(139, 171, 165, 0.08) 0%, transparent 70%); } .preise-bg-decoration { opacity: 0.4; z-index: 1; position: absolute; border-radius: 50%; pointer-events: none; } .preise-bg-decoration-1 { top: -80px; right: -80px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(108, 142, 158, 0.12) 0%, transparent 70%); } .preise-bg-decoration-2 { left: -60px; width: 250px; bottom: -60px; height: 250px; background: radial-gradient(circle, rgba(139, 171, 165, 0.12) 0%, transparent 70%); } /* ===== Animations ===== */ @keyframes float-slow { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } } @keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ===== Responsive ===== */ @media (max-width: 1200px) { .home-thq-therapie-elm { padding: var(--dl-layout-space-fiveunits) var(--dl-layout-space-twounits); } .home-thq-therapie-main-title-elm { font-size: 3rem; } .home-therapie-card-content1 { gap: var(--dl-layout-space-threeunits); grid-template-columns: 1fr; } .therapie-card-reverse .home-therapie-card-content1 { grid-template-columns: 1fr; } .home-preise-section { padding: var(--dl-layout-space-fourunits) var(--dl-layout-space-twounits); } .home-preise-title { font-size: 2.25rem; } .preise-content-grid { grid-template-columns: 1fr; } } @media (max-width: 991px) { .home-thq-therapie-elm { padding: var(--dl-layout-space-fourunits) var(--dl-layout-space-oneandhalfunits); min-height: auto; } .home-thq-therapie-main-title-elm { font-size: 2.5rem; } .home-therapie-card { padding: var(--dl-layout-space-twounits); } .home-therapie-card-content1 { gap: var(--dl-layout-space-twounits); } .home-preise-section { padding: var(--dl-layout-space-threeunits) var(--dl-layout-space-oneandhalfunits); } .home-preise-title { font-size: 2rem; } .preise-content-grid { grid-template-columns: 1fr; } .home-preise-pricing-card { padding: var(--dl-layout-space-twounits); } .home-preise-insurance-card { padding: var(--dl-layout-space-twounits); } .home-preise-info-list { grid-template-columns: 1fr; } } [data-thq="thq-burger-menu"] { cursor: pointer; } @media (max-width: 767px) { [data-thq="thq-burger-menu"] { display: block; } } @media (max-width: 767px) { .home-thq-therapie-elm { padding: var(--dl-layout-space-threeunits) var(--dl-layout-space-unit); } .home-therapie-header { margin-bottom: var(--dl-layout-space-threeunits); } .home-thq-therapie-main-title-elm { font-size: 2rem; } .home-therapie-content-wrapper { gap: var(--dl-layout-space-threeunits); } .home-therapie-card { padding: var(--dl-layout-space-oneandhalfunits); } .home-therapie-card-content1 { gap: var(--dl-layout-space-oneandhalfunits); } .home-therapie-card-title { font-size: 1.75rem; } .home-therapie-card-description { font-size: 0.95rem; } .home-therapie-quote { padding: var(--dl-layout-space-unit); font-size: 0.9rem; } .home-therapie-image-wrapper { height: 300px; } .preise-header { margin-bottom: var(--dl-layout-space-twounits); } .home-preise-section { padding: var(--dl-layout-space-twounits) var(--dl-layout-space-unit); margin-top: var(--dl-layout-space-threeunits); } .home-preise-title { font-size: 1.75rem; } .home-preise-pricing-card { padding: var(--dl-layout-space-oneandhalfunits); } .home-preise-insurance-card { padding: var(--dl-layout-space-oneandhalfunits); } .home-preise-info-list { gap: var(--dl-layout-space-unit); } .preise-info-item { gap: 8px; } .home-preise-info-text { font-size: 0.95rem; } } @media (max-width: 479px) { .home-thq-therapie-elm { padding: var(--dl-layout-space-twounits) var(--dl-layout-space-unit); } .home-thq-therapie-main-title-elm { font-size: 1.5rem; } .home-therapie-card { padding: var(--dl-layout-space-unit); } .home-therapie-card-content1 { gap: var(--dl-layout-space-unit); } .home-therapie-card-title { font-size: 1.5rem; margin-bottom: 8px; } .home-therapie-card-description { font-size: 0.9rem; line-height: 1.6; } .home-therapie-quote { padding: 12px; font-size: 0.85rem; margin: 12px 0; } .home-therapie-image-wrapper { height: 250px; } .home-preise-section { padding: var(--dl-layout-space-oneandhalfunits) var(--dl-layout-space-unit); margin-top: var(--dl-layout-space-twounits); } .home-preise-title { font-size: 1.5rem; } .home-preise-pricing-card { padding: var(--dl-layout-space-unit); } .home-preise-insurance-card { padding: var(--dl-layout-space-unit); } .home-preise-card-title { font-size: 1.25rem; } .home-preise-duration { font-size: 0.9rem; } .home-preise-info-list { gap: 12px; } .preise-info-item { gap: 6px; } .home-preise-info-text { font-size: 0.85rem; line-height: 1.5; } .home-text32 { padding: 2px 8px; font-size: 0.75rem; margin-left: 4px; } } /* ===== About Me Section ===== */ .about-me-section { width: 100%; padding: 120px 20px; overflow: hidden; position: relative; background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 50%, #f0f4f8 100%); font-family: Inter, sans-serif; scroll-margin-top: 80px; } .about-me-bg-accent { top: -150px; right: -100px; width: 600px; height: 600px; z-index: 1; position: absolute; animation: float-slow 20s ease-in-out infinite; background: radial-gradient(circle, rgba(139, 171, 165, 0.08) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .about-me-bg-gradient { left: -100px; width: 500px; bottom: -100px; height: 500px; z-index: 1; position: absolute; animation: float-slow 25s ease-in-out infinite reverse; background: radial-gradient(circle, rgba(108, 142, 158, 0.06) 0%, transparent 70%); border-radius: 50%; } .about-me-container { margin: 0 auto; z-index: 3; position: relative; max-width: 1200px; } /* ===== Header ===== */ .about-me-header { gap: 30px; display: flex; position: relative; text-align: center; align-items: center; margin-bottom: 80px; justify-content: center; } .about-me-header-line { width: 120px; height: 2px; transform: translateY(-10px); background: linear-gradient(90deg, transparent 0%, #8baba5 100%); } .home-about-me-title { color: #2c3e50; margin: 0; position: relative; font-size: 56px; background: linear-gradient(135deg, #2c3e50 0%, #6c8e9e 100%); font-family: "PT Serif", serif; font-weight: 600; letter-spacing: -0.5px; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .about-me-header-decoration { color: #8baba5; opacity: 0.15; transform: translateY(10px); } .about-me-header-decoration svg { width: 32px; height: 32px; } /* ===== Intro Section ===== */ .about-me-intro-wrapper { position: relative; margin-bottom: 100px; } .about-me-intro-card { gap: 60px; display: grid; padding: 50px; overflow: hidden; position: relative; background: white; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.04); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); align-items: center; border-radius: 24px; grid-template-columns: 400px 1fr; } .about-me-intro-card::before { top: 0; left: 0; width: 100%; height: 5px; content: ""; position: absolute; animation: gradient-slide 3s ease infinite; background: linear-gradient(90deg, #8baba5 0%, #6c8e9e 50%, #8baba5 100%); background-size: 200% 100%; } .about-me-intro-card:hover { transform: translateY(-5px); box-shadow: 0 25px 70px rgba(0, 0, 0, 0.12), 0 12px 30px rgba(0, 0, 0, 0.06); } .about-me-intro-card:hover .about-me-intro-image img { transform: scale(1.05); } .about-me-intro-image { height: 100%; overflow: hidden; position: relative; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); min-height: 450px; border-radius: 16px; } .about-me-intro-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .about-me-image-overlay { top: 0; left: 0; width: 100%; height: 100%; z-index: 2; position: absolute; background: linear-gradient(180deg, transparent 0%, rgba(44, 62, 80, 0.3) 100%); } .about-me-text-content { z-index: 2; position: relative; } .about-me-text { color: #4a5568; margin: 0; outline: none; padding: 20px; font-size: 18px; transition: all 0.3s ease; line-height: 1.9; border-radius: 12px; } .about-me-text:focus { background: rgba(139, 171, 165, 0.05); border-left: 4px solid #8baba5; padding-left: 24px; } /* ===== CV Section ===== */ .about-me-cv-section { position: relative; } .about-me-cv-header { position: relative; text-align: center; margin-bottom: 70px; } .about-me-cv-header::after { left: 50%; width: 80px; bottom: -15px; height: 3px; content: ""; position: absolute; transform: translateX(-50%); background: linear-gradient(90deg, #8baba5, #6c8e9e); border-radius: 2px; } .home-about-me-cv-title { color: #8baba5; margin: 0 0 15px 0; font-size: 48px; font-family: "PT Serif", serif; font-weight: 500; letter-spacing: -0.5px; } .about-me-cv-subtitle { color: #718096; outline: none; font-size: 18px; font-weight: 400; } .about-me-cv-grid { gap: 50px; display: grid; position: relative; grid-template-columns: 1.3fr 0.7fr; } .about-me-cv-grid::before { top: 80px; left: 50%; width: 2px; bottom: 40px; content: ""; position: absolute; transform: translateX(-50%); background: linear-gradient(180deg, transparent 0%, #e2e8f0 10%, #e2e8f0 90%, transparent 100%); } .about-me-cv-column { padding: 45px 40px; position: relative; background: white; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06); transition: all 0.3s ease; border-radius: 20px; } .about-me-cv-column:hover { transform: translateY(-3px); box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1); } .about-me-cv-column-header { gap: 15px; display: flex; align-items: center; border-bottom: 2px solid #f0f4f8; margin-bottom: 40px; padding-bottom: 25px; } .about-me-cv-icon { color: white; width: 56px; height: 56px; display: flex; background: linear-gradient(135deg, #8baba5 0%, #6c8e9e 100%); box-shadow: 0 8px 20px rgba(139, 171, 165, 0.3); transition: all 0.3s ease; align-items: center; border-radius: 14px; justify-content: center; flex-shrink: 0; } .about-me-cv-column:hover .about-me-cv-icon { transform: rotate(5deg) scale(1.05); box-shadow: 0 12px 28px rgba(139, 171, 165, 0.4); } .about-me-cv-column-title { color: #2c3e50; margin: 0; outline: none; font-size: 26px; font-family: "PT Serif", serif; font-weight: 600; } /* ===== Timeline ===== */ .about-me-timeline { gap: 35px; display: flex; position: relative; padding-left: 30px; flex-direction: column; } .about-me-timeline::before { top: 15px; left: 7px; width: 2px; bottom: 15px; content: ""; position: absolute; background: linear-gradient(180deg, #8baba5 0%, #e2e8f0 100%); } .about-me-timeline-item { outline: none; position: relative; transition: all 0.3s ease; padding-left: 20px; } .about-me-timeline-item:hover { transform: translateX(5px); } .about-me-timeline-item:hover .about-me-timeline-dot { transform: scale(1.2); box-shadow: 0 0 0 6px rgba(139, 171, 165, 0.2); border-color: #6c8e9e; } .about-me-timeline-item:hover .about-me-timeline-content { background: white; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); border-left-color: #8baba5; } .about-me-timeline-dot { top: 8px; left: -23px; width: 16px; border: 3px solid #8baba5; height: 16px; z-index: 2; position: absolute; background: white; box-shadow: 0 0 0 4px rgba(139, 171, 165, 0.1); transition: all 0.3s ease; border-radius: 50%; } .about-me-timeline-content { padding: 20px 24px; background: #f8fafc; transition: all 0.3s ease; border-left: 3px solid #e2e8f0; border-radius: 12px; } .about-me-timeline-date { gap: 8px; color: #8baba5; display: flex; font-size: 14px; align-items: center; font-weight: 600; margin-bottom: 10px; letter-spacing: 0.5px; text-transform: uppercase; } .about-me-timeline-date svg { color: #8baba5; } .about-me-timeline-title { color: #2c3e50; font-size: 17px; font-weight: 600; line-height: 1.5; margin-bottom: 6px; } .about-me-timeline-instructor { color: #718096; font-size: 15px; font-style: italic; } /* ===== Education Cards ===== */ .about-me-cv-column-education { display: flex; flex-direction: column; } .home-about-me-education-card { border: 2px solid #e2e8f0; outline: none; padding: 20px 24px; overflow: hidden; position: relative; background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 12px; margin-bottom: 35px; } .home-about-me-education-card:last-child { margin-bottom: 0; } .home-about-me-education-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(139, 171, 165, 0.15); border-color: #8baba5; } .about-me-education-badge { display: inline-flex; align-items: center; margin-bottom: 12px; justify-content: center; } .home-about-me-education-badge-year { color: #8baba5; padding: 0; font-size: 14px; background: transparent; box-shadow: none; font-weight: 600; border-radius: 0; letter-spacing: 0.5px; text-transform: uppercase; } .about-me-education-content { z-index: 2; position: relative; } .home-about-me-education-degree { color: #2c3e50; margin: 0 0 6px 0; font-size: 17px; font-family: "PT Serif", serif; font-weight: 600; line-height: 1.5; } .home-about-me-education-field { color: #718096; margin: 0; font-size: 15px; font-style: italic; font-weight: 400; } .about-me-education-decoration { right: -30px; width: 150px; bottom: -30px; height: 150px; z-index: 1; position: absolute; background: radial-gradient(circle, rgba(139, 171, 165, 0.1) 0%, transparent 70%); border-radius: 50%; } /* ===== Animations ===== */ @keyframes float-slow { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } } @keyframes gradient-slide { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes expandWidth { from { width: 0; } to { width: 200px; } } @keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes spin { to { transform: rotate(360deg); } } /* ===== Responsive ===== */ @media (max-width: 1200px) { .about-me-intro-card { gap: 40px; grid-template-columns: 1fr; padding: 40px; } .about-me-cv-grid { gap: 30px; grid-template-columns: 1fr; } .about-me-cv-grid::before { display: none; } .home-about-me-cv-title { font-size: 42px; } } @media (max-width: 991px) { .about-me-section { padding: 80px 20px; } .about-me-header { margin-bottom: 60px; } .home-about-me-title { font-size: 42px; } .about-me-intro-card { gap: 30px; padding: 30px; grid-template-columns: 1fr; } .about-me-intro-image { min-height: 350px; } .about-me-intro-wrapper { margin-bottom: 60px; } .about-me-cv-header { margin-bottom: 50px; } .about-me-cv-column { padding: 30px; } } @media (max-width: 767px) { .about-me-section { padding: 60px 16px; } .about-me-header { flex-direction: column; margin-bottom: 40px; gap: 15px; } .home-about-me-title { font-size: 36px; } .about-me-header-line { display: none; } .about-me-header-decoration { display: none; } .about-me-intro-card { gap: 20px; padding: 25px; } .about-me-intro-image { min-height: 300px; } .about-me-text { font-size: 16px; padding: 15px; } .about-me-intro-wrapper { margin-bottom: 40px; } .about-me-cv-header { margin-bottom: 30px; } .home-about-me-cv-title { font-size: 32px; } .about-me-cv-column { padding: 25px; } .about-me-cv-column-header { margin-bottom: 25px; padding-bottom: 15px; } .about-me-cv-icon { width: 48px; height: 48px; } .about-me-timeline { padding-left: 20px; } .home-about-me-education-card { padding: 18px 20px; margin-bottom: 20px; } } @media (max-width: 479px) { .about-me-section { padding: 40px 16px; } .home-about-me-title { font-size: 28px; } .about-me-intro-card { gap: 15px; padding: 20px; } .about-me-intro-image { min-height: 250px; } .about-me-text { font-size: 15px; padding: 12px; line-height: 1.7; } .about-me-intro-wrapper { margin-bottom: 30px; } .home-about-me-cv-title { font-size: 26px; } .about-me-cv-subtitle { font-size: 16px; } .about-me-cv-column { padding: 20px; } .about-me-cv-column-header { gap: 10px; margin-bottom: 20px; padding-bottom: 15px; } .about-me-cv-icon { width: 44px; height: 44px; } .about-me-cv-column-title { font-size: 22px; } .about-me-timeline { gap: 20px; padding-left: 15px; } .about-me-timeline-item { padding-left: 15px; } .about-me-timeline-dot { width: 14px; height: 14px; left: -20px; top: 5px; } .about-me-timeline-content { padding: 15px 16px; } .about-me-timeline-title { font-size: 15px; } .home-about-me-education-card { padding: 15px 16px; margin-bottom: 15px; } .home-about-me-education-degree { font-size: 15px; } .home-about-me-education-field { font-size: 13px; } } /* ===== Contact Section ===== */ .contact-section { padding: 120px 20px; overflow: hidden; position: relative; background: linear-gradient(135deg, #f8fafa 0%, #ffffff 100%); font-family: "Inter", sans-serif; scroll-margin-top: 80px; } .contact-bg-accent { top: -200px; right: -200px; width: 500px; height: 500px; z-index: 1; position: absolute; background: radial-gradient(circle, rgba(139, 171, 165, 0.08) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .contact-bg-gradient { left: -150px; width: 400px; bottom: -150px; height: 400px; z-index: 1; position: absolute; background: radial-gradient(circle, rgba(108, 142, 158, 0.06) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .contact-container { margin: 0 auto; z-index: 2; position: relative; max-width: 1200px; } /* ===== Header ===== */ .contact-header { position: relative; text-align: center; margin-bottom: 80px; } .contact-header-decoration { width: 80px; height: 3px; margin: 0 auto 20px; animation: slideDown 0.6s ease-out; transform: translateY(0); background: linear-gradient(90deg, #8baba5 0%, #6c8e9e 100%); border-radius: 2px; } .contact-header-title { color: #2c3e50; margin: 0 0 20px 0; animation: fadeIn 0.8s ease-out 0.2s both; font-size: 2.5rem; font-family: "PT Serif", serif; font-weight: 600; line-height: 1.2; } .contact-header-line { width: 200px; height: 2px; margin: 0 auto; animation: expandWidth 0.8s ease-out 0.4s both; background: linear-gradient(90deg, transparent 0%, #8baba5 50%, transparent 100%); } /* ===== Content Wrapper ===== */ .home-contact-content-wrapper4 { gap: 40px; display: grid; margin-top: 60px; align-items: start; grid-template-columns: 1fr 1fr; } .contact-left-column { gap: 30px; display: flex; flex-direction: column; } .contact-right-column { display: flex; flex-direction: column; } /* ===== Info Card ===== */ .home-contact-info-card2 { padding: 40px; overflow: hidden; position: relative; background: #ffffff; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; border-radius: 20px; } .home-contact-info-card2:hover { transform: translateY(-5px); box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12); } .home-contact-info-card2::before { top: 0; left: 0; width: 5px; height: 100%; content: ""; z-index: 1; position: absolute; background: linear-gradient(180deg, #8baba5 0%, #6c8e9e 100%); } .contact-info-title { color: #2c3e50; margin: 0 0 30px 0; font-size: 1.5rem; text-align: center; font-family: "PT Serif", serif; font-weight: 600; } .contact-info-items { gap: 20px; display: flex; flex-direction: column; } .contact-info-item { gap: 20px; border: 2px solid transparent; display: flex; padding: 20px; background: #f8fafa; transition: all 0.3s ease; align-items: center; border-radius: 12px; text-decoration: none; color: inherit; } .contact-info-item:hover, .contact-location-directions:hover { transform: translateX(8px); background: #ffffff; box-shadow: 0 5px 20px rgba(139, 171, 165, 0.15); border-color: #8baba5; } .contact-info-item:hover .contact-icon-wrapper { transform: rotate(10deg) scale(1.1); } .contact-icon-wrapper { width: 50px; height: 50px; display: flex; background: linear-gradient(135deg, #8baba5 0%, #6c8e9e 100%); transition: transform 0.3s ease; align-items: center; flex-shrink: 0; border-radius: 12px; justify-content: center; } .contact-info-details { gap: 4px; display: flex; flex-direction: column; padding-left: 30px } .contact-icon { color: #ffffff; width: 24px; height: 24px; } .contact-info-label { color: #7f8c8d; font-size: 13px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; } .contact-info-value { color: #2c3e50; font-size: 18px; font-weight: 600; } /* ===== Form Card ===== */ .contact-form-card { padding: 50px; overflow: hidden; position: relative; background: #ffffff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); border-radius: 20px; } .contact-form-card::before { top: 0; right: 0; width: 200px; height: 200px; content: ""; z-index: 1; position: absolute; background: radial-gradient(circle, rgba(108, 142, 158, 0.06) 0%, transparent 70%); border-radius: 50%; } .contact-form-title { color: #2c3e50; margin: 0 0 10px 0; z-index: 2; position: relative; font-size: 1.5rem; font-family: "PT Serif", serif; font-weight: 600; } .contact-form-subtitle { color: #7f8c8d; margin: 0 0 40px 0; z-index: 2; position: relative; font-size: 16px; } .contact-form { z-index: 2; position: relative; } .contact-form-group { margin-bottom: 25px; } .contact-form-label { gap: 8px; color: #2c3e50; display: flex; font-size: 14px; align-items: center; font-weight: 600; margin-bottom: 10px; letter-spacing: 0.5px; text-transform: uppercase; } .contact-form-input { color: #2c3e50; width: 100%; border: 2px solid #e8ecec; outline: none; padding: 16px 20px; font-size: 16px; background: #f8fafa; box-sizing: border-box; transition: all 0.3s ease; font-family: "Inter", sans-serif; border-radius: 12px; } .contact-form-input:focus { background: #ffffff; box-shadow: 0 0 0 4px rgba(139, 171, 165, 0.1); border-color: #8baba5; } .contact-form-input:hover { border-color: #d0d8d8; } .contact-form-textarea { color: #2c3e50; width: 100%; border: 2px solid #e8ecec; resize: vertical; outline: none; padding: 16px 20px; font-size: 16px; background: #f8fafa; box-sizing: border-box; min-height: 120px; transition: all 0.3s ease; font-family: "Inter", sans-serif; border-radius: 12px; } .contact-form-textarea:focus { background: #ffffff; box-shadow: 0 0 0 4px rgba(139, 171, 165, 0.1); border-color: #8baba5; } .contact-form-textarea:hover { border-color: #d0d8d8; } .contact-form-submit { gap: 10px; color: #ffffff; width: 100%; border: none; cursor: pointer; display: flex; padding: 18px 40px; overflow: hidden; position: relative; font-size: 16px; background: #8baba5; margin-top: 10px; transition: all 0.3s ease; align-items: center; font-family: "Inter", sans-serif; font-weight: 600; border-radius: 12px; justify-content: center; } .contact-form-submit::before { top: 50%; left: 50%; width: 0; height: 0; content: ""; position: absolute; transform: translate(-50%, -50%); background: rgba(255, 255, 255, 0.2); transition: width 0.6s ease, height 0.6s ease; border-radius: 50%; } .contact-form-submit:hover::before { width: 300px; height: 300px; } .contact-form-submit:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(139, 171, 165, 0.3); } .contact-form-submit:active { transform: translateY(-1px); } .contact-form-submit:disabled { cursor: not-allowed; opacity: 0.6; transform: none; } .home-thq-thq-contact-form-submit-text-elm-elm { z-index: 1; position: relative; } .home-thq-thq-contact-form-submit-icon-elm-elm { width: 20px; height: 20px; z-index: 1; position: relative; transition: transform 0.3s ease; } .contact-form-submit:hover .home-thq-thq-contact-form-submit-icon-elm-elm { transform: translateX(5px); } .contact-form-submit.loading .home-thq-thq-contact-form-submit-text-elm-elm::after { width: 14px; border: 2px solid #ffffff; height: 14px; content: ""; display: inline-block; animation: spin 0.6s linear infinite; margin-left: 10px; border-radius: 50%; border-top-color: transparent; } .contact-form-message { gap: 12px; display: none; padding: 16px 20px; animation: slideUp 0.4s ease-out; font-size: 15px; margin-top: 20px; align-items: center; font-weight: 500; border-radius: 12px; } .contact-form-message.show { display: flex; } .contact-form-message-success { color: #155724; border: 2px solid #c3e6cb; background: #d4edda; } .contact-form-message-error { color: #721c24; border: 2px solid #f5c6cb; background: #f8d7da; } .home-thq-thq-contact-form-icon-elm1-elm { color: #8baba5; width: 18px; height: 18px; } .home-thq-thq-contact-form-icon-elm2-elm { color: #8baba5; width: 18px; height: 18px; } .home-thq-thq-contact-form-icon-elm3-elm { color: #8baba5; width: 18px; height: 18px; } .home-thq-thq-contact-form-icon-elm4-elm { color: #8baba5; width: 18px; height: 18px; } /* ===== Location Card ===== */ .contact-location-card { padding: 40px; overflow: hidden; position: relative; background: #ffffff; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; border-radius: 20px; height: 100%; } .contact-location-card:hover { transform: translateY(-5px); box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12); } .contact-location-card::before { top: 0; left: 0; width: 5px; height: 100%; content: ""; z-index: 1; position: absolute; background: linear-gradient(180deg, #6c8e9e 0%, #8baba5 100%); } .thq-contact-info-title-elm2 { font-size: 1.5rem; margin-bottom: 30px; } .contact-location-grid { gap: 30px; display: flex; flex-direction: column; } .contact-location-item-wrapper { gap: 15px; display: flex; flex-direction: column; } .contact-location-item { gap: 20px; display: flex; text-align: center; align-items: center; flex-direction: row; justify-content: center; } .contact-location-content { flex: 1; display: flex; text-align: center; align-items: center; flex-direction: column; justify-content: center; } .contact-location-placeholder { color: #2c3e50; margin: 0 0 8px 0; font-size: 18px; font-weight: 600; } .contact-location-note { color: #7f8c8d; margin: 0; font-size: 14px; font-style: italic; } .contact-location-map { width: 100%; height: 350px; overflow: hidden; border-radius: 12px; } .iframe2, .iframe3 { border: 0; border-radius: 12px; } /* ===== Responsive ===== */ @media (max-width: 1200px) { .contact-header-title { font-size: 2rem; } .home-contact-content-wrapper4 { gap: 30px; grid-template-columns: 1fr; } .contact-form-card { padding: 40px; } } @media (max-width: 991px) { .contact-section { padding: 80px 20px; } .contact-header { margin-bottom: 60px; } .contact-header-title { font-size: 1.75rem; } .home-contact-content-wrapper4 { gap: 30px; grid-template-columns: 1fr; } .contact-form-card { padding: 35px; } .contact-location-map { height: 300px; } } @media (max-width: 767px) { .contact-section { padding: 60px 16px; } .contact-header-title { font-size: 1.5rem; } .contact-header { margin-bottom: 40px; } .home-contact-content-wrapper4 { gap: 20px; } .contact-left-column { gap: 20px; } .home-contact-info-card2 { padding: 30px; } .contact-form-card { padding: 25px; } .contact-form-title { font-size: 1.25rem; } .contact-form-group { margin-bottom: 20px; } .contact-location-card { padding: 30px; } .contact-location-map { height: 300px; } .contact-info-item { padding: 15px; } .contact-form-input, .contact-form-textarea { font-size: 16px; } } @media (max-width: 479px) { .contact-section { padding: 40px 16px; } .contact-header-title { font-size: 1.35rem; } .contact-header { margin-bottom: 30px; } .contact-info-title { font-size: 1.25rem; margin-bottom: 20px; } .contact-form-title { font-size: 1.1rem; } .contact-form-subtitle { font-size: 14px; } .contact-form-card { padding: 20px; } .contact-form-label { font-size: 12px; } .contact-form-input, .contact-form-textarea { padding: 12px 16px; font-size: 14px; } .contact-form-submit { padding: 14px 24px; font-size: 14px; } .home-contact-info-card2 { padding: 25px; } .contact-location-card { padding: 25px; } .contact-location-placeholder { font-size: 16px; } .contact-location-note { font-size: 13px; } .contact-location-map { height: 300px; } .contact-info-item { padding: 12px; flex-direction: column; text-align: center; } .contact-icon-wrapper { width: 45px; height: 45px; } .contact-icon { width: 20px; height: 20px; } } /* ===== Booking Section ===== */ .booking-section { padding: 120px 20px; overflow: hidden; position: relative; font-family: Inter, sans-serif; background-color: #f8f9fa; scroll-margin-top: 80px; } .booking-bg-gradient { top: 0; left: 0; width: 100%; height: 100%; z-index: 1; position: absolute; background: linear-gradient( 135deg, rgba(139, 171, 165, 0.05) 0%, rgba(108, 142, 158, 0.08) 50%, rgba(139, 171, 165, 0.05) 100% ); pointer-events: none; } .booking-bg-accent { top: -100px; right: -100px; width: 400px; height: 400px; z-index: 1; position: absolute; background: radial-gradient( circle, rgba(139, 171, 165, 0.15) 0%, transparent 70% ); border-radius: 50%; pointer-events: none; } .booking-container { margin: 0 auto; z-index: 2; position: relative; max-width: 1200px; } /* ===== Header ===== */ .booking-header { position: relative; text-align: center; margin-bottom: 30px; padding-bottom: 25px; } .booking-header-decoration { top: -15px; left: 50%; width: 80px; height: 3px; position: absolute; transform: translateX(-50%); background: linear-gradient(90deg, transparent 0%, #8baba5 50%, transparent 100%); border-radius: 2px; } .booking-header-title { color: #2c3e50; margin: 0; display: inline-block; padding: 0; position: relative; font-size: 2.5rem; font-family: "PT Serif", serif; font-weight: 600; letter-spacing: -0.5px; } .booking-header-line { left: 50%; width: 120px; bottom: 0; height: 3px; position: absolute; transform: translateX(-50%); background: linear-gradient(90deg, #8baba5 0%, #6c8e9e 100%); border-radius: 2px; } /* ===== Intro Text ===== */ .booking-intro-text { color: #5a6c7d; margin: 0 auto 60px; font-size: 1.125rem; max-width: 700px; text-align: center; line-height: 1.8; } /* ===== Benefits Grid ===== */ .booking-benefits { gap: 30px; display: grid; margin-bottom: 60px; grid-template-columns: repeat(3, 1fr); } .booking-benefit-card { padding: 35px 25px; overflow: hidden; position: relative; background: white; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); text-align: center; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 16px; } .booking-benefit-card::before { top: 0; left: 0; width: 100%; height: 4px; content: ""; position: absolute; transform: scaleX(0); background: linear-gradient(90deg, #8baba5 0%, #6c8e9e 100%); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); transform-origin: left; } .booking-benefit-card:hover { transform: translateY(-8px); box-shadow: 0 12px 40px rgba(139, 165, 171, 0.2); } .booking-benefit-card:hover::before { transform: scaleX(1); } .booking-benefit-card:hover .booking-benefit-icon { transform: scale(1.1) rotate(5deg); } .booking-benefit-icon { color: white; width: 70px; height: 70px; margin: 0 auto 20px; display: flex; background: linear-gradient(135deg, #8baba5 0%, #6c8e9e 100%); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); align-items: center; border-radius: 50%; justify-content: center; } .booking-benefit-icon svg { width: 32px; height: 32px; } .booking-benefit-title { color: #2c3e50; margin: 0 0 10px; font-size: 1.5rem; font-family: "PT Serif", serif; font-weight: 600; } .booking-benefit-text { color: #5a6c7d; margin: 0; font-size: 0.95rem; line-height: 1.6; } /* ===== Info Section ===== */ .booking-info-section { gap: 30px; display: grid; margin-bottom: 100px; grid-template-columns: repeat(3, 1fr); } .booking-info-card { padding: 30px; background: white; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); transition: all 0.3s ease; border-left: 4px solid #8baba5; border-radius: 16px; } .booking-info-card:hover { transform: translateX(5px); box-shadow: 0 8px 30px rgba(139, 171, 165, 0.15); border-left-color: #6c8e9e; } .booking-info-title { color: #2c3e50; margin: 0 0 15px; font-size: 1.5rem; font-family: "PT Serif", serif; font-weight: 600; } .booking-info-description { color: #5a6c7d; margin: 0 0 10px; font-size: 0.95rem; line-height: 1.7; } .booking-info-description:last-child { margin-bottom: 0; } /* ===== Calendar Card ===== */ .booking-calendar-card { overflow: hidden; background: white; box-shadow: 0 10px 50px rgba(0, 0, 0, 0.08); transition: all 0.4s ease; border-radius: 24px; margin-bottom: 50px; display: flex; flex-direction: column; height: auto; min-height: 1400px; } .booking-calendar-card:hover { box-shadow: 0 20px 70px rgba(139, 171, 165, 0.15); } .booking-calendar-header { gap: 20px; display: flex; padding: 30px 40px; background: linear-gradient(135deg, #8baba5 0%, #6c8e9e 100%); align-items: center; flex-shrink: 0; } .booking-calendar-icon-wrapper { color: white; width: 50px; height: 50px; display: flex; background: rgba(255, 255, 255, 0.25); align-items: center; border-radius: 12px; backdrop-filter: blur(10px); justify-content: center; flex-shrink: 0; } .booking-calendar-icon-wrapper svg { width: 28px; height: 28px; } .booking-calendar-title { color: white; margin: 0; font-size: 1.75rem; font-family: "PT Serif", serif; font-weight: 600; letter-spacing: -0.3px; } .booking-calendar-wrapper { padding: 0; background: #f8f9fa; flex: 1; overflow: visible; } .booking-iframe-container { width: 100%; height: 100%; position: relative; background: white; } .booking-iframe { width: 100%; border: none; height: 1200px; display: block; background: white; } .booking-calendar-footer { padding: 25px 40px; background: linear-gradient( 135deg, rgba(139, 171, 165, 0.08) 0%, rgba(108, 142, 158, 0.08) 100% ); border-top: 2px solid rgba(139, 171, 165, 0.15); flex-shrink: 0; } .booking-footer-text { color: #5a6c7d; margin: 0; font-size: 0.95rem; line-height: 1.7; } .booking-footer-text strong { color: #6c8e9e; font-weight: 600; } /* ===== Responsive ===== */ @media (max-width: 1200px) { .booking-benefits { gap: 20px; grid-template-columns: repeat(3, 1fr); } .booking-info-section { gap: 20px; grid-template-columns: repeat(3, 1fr); margin-bottom: 80px; } .booking-header-title { font-size: 2rem; } .booking-calendar-card { min-height: 1350px; } .booking-iframe { height: 1150px; } } @media (max-width: 991px) { .booking-section { margin-bottom: 80px; padding-bottom: 120px; } .booking-calendar-card { min-height: 1450px; } .booking-iframe { height: 1300px; } } @media (max-width: 767px) { .booking-section { padding: 60px 16px; } .booking-benefits { gap: 15px; grid-template-columns: 1fr; margin-bottom: 40px; } .booking-info-section { gap: 15px; grid-template-columns: 1fr; margin-bottom: 80px; } .booking-header-title { font-size: 1.75rem; } .booking-calendar-card { min-height: 1250px; margin-bottom: 30px; } .booking-calendar-header { flex-direction: column; text-align: center; padding: 25px 20px; } .booking-calendar-footer { padding: 20px; } .booking-iframe { height: 1100px; } } @media (max-width: 479px) { .booking-section { padding: 40px 16px; } .booking-header-title { font-size: 1.5rem; } .booking-benefit-card { padding: 20px 15px; } .booking-benefit-icon { width: 60px; height: 60px; margin: 0 auto 15px; } .booking-benefit-title { font-size: 1.25rem; } .booking-info-card { padding: 20px; } .booking-info-section { margin-bottom: 60px; } .booking-calendar-card { min-height: 1050px; border-radius: 16px; margin-bottom: 20px; } .booking-iframe { height: 900px; } } /* 1. Basis-Zustand: Menü ist versteckt */ .home-thq-mobile-menu-elm { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: white; z-index: 999; overflow-y: auto; } /* 2. Sichtbarer Zustand: Wenn JS die Klasse 'is-visible' hinzufügt */ .home-thq-mobile-menu-elm.is-visible { display: flex; flex-direction: column; /* Die anderen Eigenschaften (position, z-index, etc.) werden vom Basis-Zustand übernommen */ } .home-thq-nav-elm { display: flex; flex-direction: column; width: 100%; } .home-thq-top-elm { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid #e0e0e0; } .home-thq-close-menu-elm { cursor: pointer; width: 32px; height: 32px; } .home-thq-links-elm2 { display: flex; flex-direction: column; padding: 20px; gap: 15px; } .home-thq-links-elm2 a { text-decoration: none; color: inherit; padding: 12px 0; border-bottom: 1px solid #f0f0f0; cursor: pointer; } .home-thq-buttons-elm2 { padding: 20px; } .home-thq-buttons-elm2 button { width: 100%; } /* === NEUER CODE FÜR MOBILE MENÜ === */ [data-thq="thq-mobile-menu"] { display: none; } [data-thq="thq-mobile-menu"].open { display: flex; flex-direction: column; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: white; z-index: 999; overflow-y: auto; } [data-thq="thq-burger-menu"] { cursor: pointer; } @media (max-width: 767px) { [data-thq="thq-burger-menu"] { display: block; } [data-thq="thq-navbar-nav"] { display: none; } } /* Fügen Sie dies am Ende Ihrer main.css hinzu */ [data-thq="thq-mobile-menu"].open { display: flex !important; transform: translateX(0) !important; } /* Sicherstellen, dass das Menü standardmäßig ausgeblendet ist auf Desktop */ @media (min-width: 768px) { [data-thq="thq-mobile-menu"] { display: none !important; } } /* ========================================= MOBILE MENÜ ANPASSUNGEN ========================================= */ /* 1. Hintergrundfarbe des gesamten mobilen Menüs Wir nutzen die gleiche Variable wie im Desktop-Header */ [data-thq="thq-mobile-menu"] { background-color: var(--dl-color-stillebewegung-background) !important; /* Das ist Ihr #8baba5 Grün */ } /* 2. Schriftfarbe für ALLE Links und Texte im mobilen Menü Damit sie weiß sind wie im Desktop-Menü */ [data-thq="thq-mobile-menu"] a, [data-thq="thq-mobile-menu"] span, [data-thq="thq-mobile-menu"] .home-text13, [data-thq="thq-mobile-menu"] .home-text14, [data-thq="thq-mobile-menu"] .home-text16, [data-thq="thq-mobile-menu"] .home-thq-text6-elm { color: var(--dl-color-stillebewegung-textmenu) !important; /* Das ist Weiß */ text-decoration: none; } /* Optional: Eine leichte Unterstreichung oder Transparenz beim Drüberfahren (Hover) */ [data-thq="thq-mobile-menu"] a:hover { opacity: 0.8; } /* 3. Trennlinie zwischen den Links (optional, aber sieht oft besser aus) */ .home-thq-links-elm2 a { border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Weiße, halbtransparente Linie */ display: block; /* Damit die Linie die ganze Breite hat */ padding: 15px 0; /* Etwas mehr Abstand oben/unten */ } /* Die letzte Linie entfernen */ .home-thq-links-elm2 a:last-child { border-bottom: none; } /* 4. Der "Termin buchen" Button im mobilen Menü Damit er aussieht wie der weiße Button im Desktop-Menü */ .home-thq-links-elm2 a[href="#termin-buchen"], [data-thq="thq-mobile-menu"] .thq-termin-buchen-elm { background-color: var(--dl-color-stillebewegung-textmenu) !important; /* Weißer Hintergrund */ color: var(--dl-color-stillebewegung-background) !important; /* Grüner Text */ font-weight: 700; /* Fettschrift */ text-align: center; padding: 12px 20px !important; border-radius: 8px; /* Abgerundete Ecken */ margin-top: 20px; /* Abstand zum letzten Link */ display: inline-block; width: auto; /* Nicht über die ganze Breite, sondern nur so breit wie der Text */ border: none; box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Leichter Schatten */ } /* Hover-Effekt für den Button */ .home-thq-links-elm2 a[href="#termin-buchen"]:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0,0,0,0.15); opacity: 1; /* Kein Verblassen wie bei den Text-Links */ } /* Anpassung für den oberen Bereich (Logo und Schließen-Button) */ .home-thq-top-elm { background-color: var(--dl-color-stillebewegung-background); border-bottom: 1px solid rgba(255,255,255,0.2); } /* Logo Textfarbe im mobilen Menü sicherstellen */ .home-text12 { color: var(--dl-color-stillebewegung-textmenu) !important; } /* ========================================= NAVBAR HÖHENANPASSUNG (NUR HEIGHT & LOGO) ========================================= */ /* 1. Basis-Zustand: Höhere Navbar beim Start */ .home-thq-navbar-interactive-elm { /* Erhöhtes Padding für mehr Höhe (oben und unten) */ padding-top: 1.8rem !important; padding-bottom: 1.8rem !important; transition: padding-top 0.6s ease, padding-bottom 0.6s ease, box-shadow 0.6s ease; } /* Logo im Ausgangszustand etwas größer */ .home-thq-navbar-interactive-elm .home-icon100 { width: 48px; /* Etwas größer als die Standard-40px */ height: 48px; transition: width 0.3s ease, height 0.3s ease; } /* 2. Zustand beim Scrollen (.scrolled Klasse) */ .home-thq-navbar-interactive-elm.scrolled { /* Reduziertes Padding für kompakte Höhe */ padding-top: 0.8rem !important; padding-bottom: 0.8rem !important; /* Optional: Schatten hinzufügen, damit sie sich vom Inhalt abhebt */ box-shadow: 0 4px 12px rgba(0,0,0,0.08); } /* Logo im gescrollten Zustand auf Originalgröße */ .home-thq-navbar-interactive-elm.scrolled .home-icon100 { width: 40px; height: 40px; } /* WICHTIG: Sicherstellen, dass Textausrichtung immer mittig bleibt */ .home-thq-navbar-interactive-elm, .home-thq-navbar-interactive-elm .home-container11, .home-thq-navbar-interactive-elm .home-thq-desktop-menu-elm { align-items: center !important; } /* Anfahrts-Text bei Standorten*/ .contact-location-directions { gap: 20px; border: 2px solid transparent; display: grid; padding: 20px; background: #f8fafa; transition: all 0.3s ease; align-items: center; border-radius: 12px; text-decoration: none; color: inherit; margin-bottom: 50px; } .contact-directions-title { font-size: 1.1rem; font-weight: 600; color: #2c3e50; margin-bottom: 16px; } .contact-directions-item { display: table-cell; /*gap: 12px; margin-bottom: 40px;*/ } /*.contact-directions-icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background-color: #f0f4f3; display: flex; align-items: center; justify-content: center; color: #2c3e50; }*/ .contact-directions-content { flex: 1; } .contact-directions-label { margin: 0 0 4px 0; font-size: 0.95rem; font-weight: bold; color: #2c3e50; } .contact-directions-text { margin: 0; font-size: 0.9rem; color: #2c3e50; line-height: 1.4; } /* ========================================= FOOTER STYLES ========================================= */ .st-footer { color: #2c3e50; padding: 80px 0 40px 0; background-color: #f9fbf9; /* Sehr helles Grün/Grau, passend zum Hintergrund */ border-top: 1px solid rgba(44, 74, 60, 0.08); font-family: "Inter", sans-serif; margin-top: 80px; } .st-footer-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .st-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr; gap: 60px; margin-bottom: 60px; } /* --- Branding --- */ .st-footer-logo { font-size: 2rem; font-family: "Playfair Display", serif; font-weight: 700; margin: 0 0 15px 0; color: #2c3e50; letter-spacing: -0.02em; } .st-footer-accent { color: #5a8266; /* Ihr helles Grün */ font-style: italic; font-weight: 400; } .st-footer-tagline { color: #5a6c7d; font-size: 1rem; line-height: 1.6; margin-bottom: 20px; max-width: 300px; } .st-social-links { display: flex; gap: 12px; } .st-social-icon { color: #5a8266; width: 36px; height: 36px; border: 1px solid rgba(90, 130, 102, 0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; text-decoration: none; } .st-social-icon:hover { background-color: #5a8266; color: white; transform: translateY(-3px); } /* --- Links & Kontakt --- */ .st-footer-heading { font-size: 1.25rem; font-family: "Playfair Display", serif; font-weight: 600; color: #2c3e50; margin: 0 0 24px 0; position: relative; } .st-footer-heading::after { content: ""; position: absolute; left: 0; bottom: -8px; width: 24px; height: 2px; background-color: #5a8266; } .st-footer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .st-footer-list a { color: #5a6c7d; text-decoration: none; transition: color 0.3s ease; font-size: 1rem; } .st-footer-list a:hover { color: #5a8266; } .st-contact-list { display: flex; flex-direction: column; gap: 16px; } .st-practitioner-name { font-weight: 600; color: #2c3e50; margin-bottom: 4px; font-size: 1.1rem; } .st-contact-item { display: flex; align-items: center; gap: 12px; } .st-contact-icon { color: #5a8266; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .st-contact-link { color: #5a6c7d; text-decoration: none; font-size: 0.95rem; transition: color 0.3s ease; } .st-contact-link:hover { color: #5a8266; } .st-contact-text { color: #5a6c7d; font-size: 0.95rem; line-height: 1.5; } /* --- Bottom Bar --- */ .st-footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 30px; border-top: 1px solid rgba(44, 74, 60, 0.05); flex-wrap: wrap; gap: 20px; } .st-footer-legal { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; } .st-copyright { color: #8baba5; font-size: 0.85rem; } .st-legal-link { color: #5a6c7d; font-size: 0.85rem; text-decoration: none; transition: opacity 0.3s ease; } .st-legal-link:hover { opacity: 1; color: #5a8266; } /* Scroll Top Button */ .st-scroll-top { width: 40px; height: 40px; border: 1px solid rgba(90, 130, 102, 0.2); background-color: white; color: #5a8266; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); } .st-scroll-top:hover { background-color: #5a8266; color: white; transform: translateY(-5px); border-color: #5a8266; } /* --- Responsive --- */ @media (max-width: 991px) { .st-footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; } .st-footer-brand { grid-column: 1 / -1; } } @media (max-width: 767px) { .st-footer { padding: 60px 0 30px 0; } .st-footer-grid { grid-template-columns: 1fr; gap: 30px; } .st-footer-bottom { flex-direction: column; text-align: center; justify-content: center; } .st-footer-legal { justify-content: center; } .st-footer-tagline { max-width: 100%; } } /* ========================================= BERN LOCATION SECTION (PARALLAX) ========================================= */ .bern-location-section { position: relative; width: 100%; height: 60vh; min-height: 400px; overflow: hidden; display: flex; align-items: center; justify-content: center; margin-top: 0; } .bern-parallax-wrapper { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; /* Text zentriert */ overflow: hidden; } /* Das Hintergrundbild */ .bern-bg-image { position: absolute; /* WICHTIG: Anker nach unten setzen, nicht nach oben! */ bottom: 0; left: 0; width: 100%; /* Höher als der Container für den Parallax-Spielraum */ height: 140%; object-fit: cover; z-index: 1; transform: translateZ(0); will-change: transform; /* Sicherstellen, dass das Bild den unteren Fokus behält */ object-position: center bottom; } /* Dunkler Overlay */ .bern-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(44, 62, 80, 0.3), rgba(44, 62, 80, 0.8)); z-index: 2; } .bern-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(44, 62, 80, 0.15), rgba(44, 62, 80, 0.4)); z-index: 2; } .bern-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(150, 160, 170, 0.3), rgba(100, 120, 140, 0.5)); z-index: 2; } .bern-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(44, 62, 80, 0.1), rgba(44, 62, 80, 0.2)); z-index: 2; } /* Der Text */ .bern-content { position: relative; z-index: 3; text-align: center; color: white; max-width: 800px; padding: 0 20px; opacity: 0; transform: translateY(20px); animation: bernFadeIn 1s ease-out forwards; animation-delay: 0.3s; } .bern-title { font-family: "Playfair Display", serif; font-size: 3.5rem; margin-bottom: 1rem; text-shadow: 0 4px 10px rgba(0,0,0,0.5); color: #ffffff; } .bern-text { font-family: "Inter", sans-serif; font-size: 1.25rem; line-height: 1.6; color: #f0f0f0; text-shadow: 0 2px 4px rgba(0,0,0,0.5); } @keyframes bernFadeIn { to { opacity: 1; transform: translateY(0); } } /* Responsive */ @media (max-width: 767px) { .bern-location-section { height: 50vh; min-height: 300px; } .bern-title { font-size: 2.5rem; } .bern-text { font-size: 1rem; } .bern-bg-image { height: 130%; } }