.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-8978 .elementor-element.elementor-element-63491da .elementor-heading-title{font-family:"More Sugar", Sans-serif;color:#385363;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-8978 .elementor-element.elementor-element-fcab2d3{font-family:"Lora", Sans-serif;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-201766d *//* ========================================== FREIRAUM LANDINGPAGE – BUBBLE 1 WAS WILL ICH? ========================================== */ .bubble-will { /* ===== HIER KANNST DU DIE BUBBLE STEUERN ===== */ --bubble-breite: 166px; --bubble-hoehe: 166px; --bubble-rechts: 89%; --bubble-oben: 98px; /* ===== POSITION ===== */ position: absolute !important; top: var(--bubble-oben); right: var(--bubble-rechts); width: var(--bubble-breite); height: var(--bubble-hoehe); z-index: 10; /* ===== FORM ===== */ border-radius: 50%; /* ===== GLAS / WASSER ===== */ background: radial-gradient( circle at 30% 23%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.72) 28%, rgba(255, 255, 255, 0.48) 52%, rgba(255, 255, 255, 0.22) 72%, rgba(255, 255, 255, 0.06) 88%, rgba(255, 255, 255, 0) 100% ); border: 1px solid rgba(255, 255, 255, 0.72); box-shadow: inset 10px 10px 24px rgba(255, 255, 255, 0.52), inset -10px -12px 22px rgba(2, 55, 112, 0.05), 0 10px 30px rgba(2, 55, 112, 0.08); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); /* ===== LEICHTE TIEFE ===== */ box-shadow: inset 8px 8px 20px rgba(255, 255, 255, 0.38), inset -10px -12px 22px rgba(2, 55, 112, 0.08), 0 10px 30px rgba(2, 55, 112, 0.10); /* ===== INHALT ZENTRIEREN ===== */ display: flex; align-items: center; justify-content: center; text-align: center; cursor: pointer; overflow: hidden; transition: width 0.6s ease, height 0.6s ease, border-radius 0.6s ease, transform 0.4s ease, box-shadow 0.4s ease; } /* ========================================== TITEL – ORANGE MIT WEICHEM LICHT ========================================== */ .bubble-will-titel { font-family: "Libre Baskerville", serif !important; color: #CC4E00 !important; font-size: 20px; font-weight: 400; line-height: 1.3; padding: 20px; transition: color 0.4s ease, text-shadow 0.4s ease, transform 0.4s ease; text-shadow: 0 0 8px rgba(255, 255, 255, 0.95), 0 0 18px rgba(255, 255, 255, 0.75), 0 0 32px rgba(255, 255, 255, 0.45); position: relative; z-index: 2; } /* ========================================== INHALT – ZUNÄCHST UNSICHTBAR ========================================== */ .bubble-will-inhalt { position: absolute; top: 85px; left: 40px; right: 40px; opacity: 0; visibility: hidden; transform: translateY(15px); transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s, visibility 0s linear 0.7s; font-family: "Open Sans", sans-serif !important; color: #023770; text-align: left; font-size: 15px; line-height: 1.7; padding-bottom: 30px; } /* ===== ABSÄTZE ===== */ .bubble-will-inhalt p { margin: 0 0 22px 0; } /* ===== AUF ALLEN EBENEN ===== */ .bubble-will-highlight { font-family: "Libre Baskerville", serif !important; color: #CC4E00 !important; font-size: 19px; text-align: left; margin: 28px 0 !important; } /* ========================================== GEÖFFNETE BUBBLE ========================================== */ .bubble-will.is-open { z-index: 9999 !important; width: 520px; height: 620px; border-radius: 55px 70px 60px 75px; align-items: flex-start; justify-content: flex-start; overflow: hidden; transform: translateY(-5px); box-shadow: inset 10px 10px 25px rgba(255, 255, 255, 0.42), inset -10px -12px 25px rgba(2, 55, 112, 0.06), 0 18px 45px rgba(2, 55, 112, 0.14); } /* ===== TITEL BEIM ÖFFNEN ===== */ .bubble-will.is-open .bubble-will-titel { position: absolute !important; top: 25px; left: 40px; padding: 0; color: #CC4E00 !important; font-size: 22px; z-index: 20; pointer-events: none; } /* ===== SCHLIESSEN-X ===== */ .bubble-will-schliessen { position: absolute; top: 18px; right: 40px; font-family: "Open Sans", sans-serif !important; font-size: 26px; font-weight: 300; line-height: 1; color: #023770; z-index: 30; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; } /* X nur anzeigen, wenn geöffnet */ .bubble-will.is-open .bubble-will-schliessen { opacity: 1; } /* leichtes Aufleuchten */ .bubble-will.is-open:hover .bubble-will-schliessen { color: #CC4E00; } /* ===== TEXT EINBLENDEN ===== */ .bubble-will.is-open .bubble-will-inhalt { opacity: 1; visibility: visible; transform: translateY(0); position: relative; top: auto; left: auto; right: auto; margin-top: 75px; margin-left: 40px; margin-right: 40px; max-height: calc(100% - 95px); overflow-y: auto; padding-top: 10px; padding-bottom: 30px; } /* ========================================== HOVER ========================================== */ .bubble-will:hover:not(.is-open) { transform: translateY(-5px); box-shadow: inset 8px 8px 22px rgba(255, 255, 255, 0.44), inset -10px -12px 22px rgba(2, 55, 112, 0.06), 0 16px 38px rgba(2, 55, 112, 0.14); } .bubble-will:hover:not(.is-open) .bubble-will-titel { color: #023770 !important; text-shadow: 0 0 8px rgba(255, 255, 255, 1), 0 0 20px rgba(255, 255, 255, 0.9), 0 0 38px rgba(255, 255, 255, 0.65); } /* ========================================== FOKUS ========================================== */ .bubble-will:focus-visible { outline: 2px solid #CC4E00; outline-offset: 5px; } /* ========================================== MOBILE ========================================== */ @media (max-width: 767px) { .bubble-will { --bubble-breite: 155px; --bubble-hoehe: 155px; --bubble-rechts: 10%; --bubble-oben: 50px; } .bubble-will-titel { font-size: 17px; } /* ===== MOBILE GEÖFFNET ===== */ .bubble-will.is-open { width: 82vw; height: 72vh; min-height: 520px; border-radius: 42px 55px 48px 60px; right: 9%; transform: none; } .bubble-will.is-open .bubble-will-titel { top: 24px; left: 28px; font-size: 19px; } .bubble-will.is-open .bubble-will-schliessen { top: 18px; right: 20px; font-size: 24px; } .bubble-will.is-open .bubble-will-inhalt { margin-top: 68px; margin-left: 28px; margin-right: 28px; font-size: 14px; line-height: 1.65; max-height: calc(100% - 85px); overflow-y: auto; } .bubble-will-inhalt p { margin-bottom: 20px; } .bubble-will-highlight { font-size: 17px; margin: 24px 0 !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-253a63c *//* ========================================== FREIRAUM LANDINGPAGE – BUBBLE 1 WAS Brauche ICH? ========================================== */ .bubble-need { /* ===== HIER KANNST DU DIE BUBBLE STEUERN ===== */ --bubble-breite: 190px; --bubble-hoehe: 190px; --bubble-rechts: 56%; --bubble-oben: 20px; /* ===== POSITION ===== */ position: absolute !important; top: var(--bubble-oben); right: var(--bubble-rechts); width: var(--bubble-breite); height: var(--bubble-hoehe); z-index: 10; /* ===== FORM ===== */ border-radius: 50%; /* ===== GLAS / WASSER ===== */ background: radial-gradient( circle at 30% 23%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.72) 28%, rgba(255, 255, 255, 0.48) 52%, rgba(255, 255, 255, 0.22) 72%, rgba(255, 255, 255, 0.06) 88%, rgba(255, 255, 255, 0) 100% ); border: 1px solid rgba(255, 255, 255, 0.72); box-shadow: inset 10px 10px 24px rgba(255, 255, 255, 0.52), inset -10px -12px 22px rgba(2, 55, 112, 0.05), 0 10px 30px rgba(2, 55, 112, 0.08); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); /* ===== LEICHTE TIEFE ===== */ box-shadow: inset 8px 8px 20px rgba(255, 255, 255, 0.38), inset -10px -12px 22px rgba(2, 55, 112, 0.08), 0 10px 30px rgba(2, 55, 112, 0.10); /* ===== INHALT ZENTRIEREN ===== */ display: flex; align-items: center; justify-content: center; text-align: center; cursor: pointer; overflow: hidden; transition: width 0.6s ease, height 0.6s ease, border-radius 0.6s ease, transform 0.4s ease, box-shadow 0.4s ease; } /* ========================================== TITEL – ORANGE MIT WEICHEM LICHT ========================================== */ .bubble-need-titel { font-family: "Libre Baskerville", serif !important; color: #CC4E00 !important; font-size: 20px; font-weight: 400; line-height: 1.3; padding: 20px; transition: color 0.4s ease, text-shadow 0.4s ease, transform 0.4s ease; text-shadow: 0 0 8px rgba(255, 255, 255, 0.95), 0 0 18px rgba(255, 255, 255, 0.75), 0 0 32px rgba(255, 255, 255, 0.45); position: relative; z-index: 2; } /* ========================================== INHALT – ZUNÄCHST UNSICHTBAR ========================================== */ .bubble-need-inhalt { position: absolute; top: 85px; left: 40px; right: 40px; opacity: 0; visibility: hidden; transform: translateY(15px); transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s, visibility 0s linear 0.7s; font-family: "Open Sans", sans-serif !important; color: #023770; text-align: left; font-size: 15px; line-height: 1.7; padding-bottom: 30px; } /* ===== ABSÄTZE ===== */ .bubble-need-inhalt p { margin: 0 0 22px 0; } /* ===== AUF ALLEN EBENEN ===== */ .bubble-need-highlight { font-family: "Libre Baskerville", serif !important; color: #CC4E00 !important; font-size: 19px; text-align: left; margin: 28px 0 !important; } /* ========================================== GEÖFFNETE BUBBLE ========================================== */ .bubble-need.is-open { z-index: 9999 !important; width: 520px; height: 620px; border-radius: 55px 70px 60px 75px; align-items: flex-start; justify-content: flex-start; overflow: hidden; transform: translateY(-5px); box-shadow: inset 10px 10px 25px rgba(255, 255, 255, 0.42), inset -10px -12px 25px rgba(2, 55, 112, 0.06), 0 18px 45px rgba(2, 55, 112, 0.14); } /* ===== SCHLIESSEN-X ===== */ .bubble-need-schliessen { position: absolute; top: 18px; right: 40px; font-family: "Open Sans", sans-serif !important; font-size: 26px; font-weight: 300; line-height: 1; color: #023770; z-index: 30; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; } /* X nur anzeigen, wenn geöffnet */ .bubble-need.is-open .bubble-need-schliessen { opacity: 1; } /* leichtes Aufleuchten */ .bubble-need.is-open:hover .bubble-need-schliessen { color: #CC4E00; } /* ===== TITEL BEIM ÖFFNEN ===== */ .bubble-need.is-open .bubble-need-titel { position: absolute !important; top: 25px; left: 40px; padding: 0; color: #CC4E00 !important; font-size: 22px; z-index: 20; pointer-events: none; } /* ===== TEXT EINBLENDEN ===== */ .bubble-need.is-open .bubble-need-inhalt { opacity: 1; visibility: visible; transform: translateY(0); position: relative; top: auto; left: auto; right: auto; margin-top: 75px; margin-left: 40px; margin-right: 40px; max-height: calc(100% - 95px); overflow-y: auto; padding-top: 10px; padding-bottom: 30px; } /* ========================================== HOVER ========================================== */ .bubble-need:hover:not(.is-open) { transform: translateY(-5px); box-shadow: inset 8px 8px 22px rgba(255, 255, 255, 0.44), inset -10px -12px 22px rgba(2, 55, 112, 0.06), 0 16px 38px rgba(2, 55, 112, 0.14); } .bubble-need:hover:not(.is-open) .bubble-need-titel { color: #023770 !important; text-shadow: 0 0 8px rgba(255, 255, 255, 1), 0 0 20px rgba(255, 255, 255, 0.9), 0 0 38px rgba(255, 255, 255, 0.65); } /* ========================================== FOKUS ========================================== */ .bubble-need:focus-visible { outline: 2px solid #CC4E00; outline-offset: 5px; } /* ========================================== MOBILE ========================================== */ @media (max-width: 767px) { .bubble-need { --bubble-breite: 170px; --bubble-hoehe: 170px; --bubble-rechts: 45%; --bubble-oben: 220px; } .bubble-need-titel { font-size: 17px; } /* ===== MOBILE GEÖFFNET ===== */ .bubble-need.is-open { width: 82vw; height: 72vh; min-height: 520px; border-radius: 42px 55px 48px 60px; right: 9%; transform: none; } .bubble-need.is-open .bubble-need-titel { top: 24px; left: 28px; font-size: 19px; } .bubble-need.is-open .bubble-need-schliessen { top: 18px; right: 20px; font-size: 24px; } .bubble-need.is-open .bubble-need-inhalt { margin-top: 68px; margin-left: 28px; margin-right: 28px; font-size: 14px; line-height: 1.65; max-height: calc(100% - 85px); overflow-y: auto; } .bubble-need-inhalt p { margin-bottom: 20px; } .bubble-need-highlight { font-size: 17px; margin: 24px 0 !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-47183e9 *//* ========================================== FREIRAUM LANDINGPAGE – BUBBLE 1 WAS Brauche ICH? ========================================== */ .bubble-place { /* ===== HIER KANNST DU DIE BUBBLE STEUERN ===== */ --bubble-breite: 178px; --bubble-hoehe: 178px; --bubble-rechts: 25%; --bubble-oben: 74px; /* ===== POSITION ===== */ position: absolute !important; top: var(--bubble-oben); right: var(--bubble-rechts); width: var(--bubble-breite); height: var(--bubble-hoehe); z-index: 10; /* ===== FORM ===== */ border-radius: 50%; /* ===== GLAS / WASSER ===== */ background: radial-gradient( circle at 30% 23%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.72) 28%, rgba(255, 255, 255, 0.48) 52%, rgba(255, 255, 255, 0.22) 72%, rgba(255, 255, 255, 0.06) 88%, rgba(255, 255, 255, 0) 100% ); border: 1px solid rgba(255, 255, 255, 0.72); box-shadow: inset 10px 10px 24px rgba(255, 255, 255, 0.52), inset -10px -12px 22px rgba(2, 55, 112, 0.05), 0 10px 30px rgba(2, 55, 112, 0.08); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); /* ===== LEICHTE TIEFE ===== */ box-shadow: inset 8px 8px 20px rgba(255, 255, 255, 0.38), inset -10px -12px 22px rgba(2, 55, 112, 0.08), 0 10px 30px rgba(2, 55, 112, 0.10); /* ===== INHALT ZENTRIEREN ===== */ display: flex; align-items: center; justify-content: center; text-align: center; cursor: pointer; overflow: hidden; transition: width 0.6s ease, height 0.6s ease, border-radius 0.6s ease, transform 0.4s ease, box-shadow 0.4s ease; } /* ========================================== TITEL – ORANGE MIT WEICHEM LICHT ========================================== */ .bubble-place-titel { font-family: "Libre Baskerville", serif !important; color: #CC4E00 !important; font-size: 20px; font-weight: 400; line-height: 1.3; padding: 20px; transition: color 0.4s ease, text-shadow 0.4s ease, transform 0.4s ease; text-shadow: 0 0 8px rgba(255, 255, 255, 0.95), 0 0 18px rgba(255, 255, 255, 0.75), 0 0 32px rgba(255, 255, 255, 0.45); position: relative; z-index: 2; } /* ========================================== INHALT – ZUNÄCHST UNSICHTBAR ========================================== */ .bubble-place-inhalt { position: absolute; top: 85px; left: 40px; right: 40px; opacity: 0; visibility: hidden; transform: translateY(15px); transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s, visibility 0s linear 0.7s; font-family: "Open Sans", sans-serif !important; color: #023770; text-align: left; font-size: 15px; line-height: 1.7; padding-bottom: 30px; } /* ===== ABSÄTZE ===== */ .bubble-place-inhalt p { margin: 0 0 22px 0; } /* ===== AUF ALLEN EBENEN ===== */ .bubble-place-highlight { font-family: "Libre Baskerville", serif !important; color: #CC4E00 !important; font-size: 19px; text-align: left; margin: 28px 0 !important; } /* ========================================== GEÖFFNETE BUBBLE ========================================== */ .bubble-place.is-open { z-index: 9999 !important; width: 520px; height: 620px; border-radius: 55px 70px 60px 75px; align-items: flex-start; justify-content: flex-start; overflow: hidden; transform: translateY(-5px); box-shadow: inset 10px 10px 25px rgba(255, 255, 255, 0.42), inset -10px -12px 25px rgba(2, 55, 112, 0.06), 0 18px 45px rgba(2, 55, 112, 0.14); } /* ===== SCHLIESSEN-X ===== */ .bubble-place-schliessen { position: absolute; top: 18px; right: 40px; font-family: "Open Sans", sans-serif !important; font-size: 26px; font-weight: 300; line-height: 1; color: #023770; z-index: 30; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; } /* X nur anzeigen, wenn geöffnet */ .bubble-place.is-open .bubble-place-schliessen { opacity: 1; } /* leichtes Aufleuchten */ .bubble-place.is-open:hover .bubble-place-schliessen { color: #CC4E00; } /* ===== TITEL BEIM ÖFFNEN ===== */ .bubble-place.is-open .bubble-place-titel { position: absolute !important; top: 25px; left: 40px; padding: 0; color: #CC4E00 !important; font-size: 22px; z-index: 20; pointer-events: none; } /* ===== TEXT EINBLENDEN ===== */ .bubble-place.is-open .bubble-place-inhalt { opacity: 1; visibility: visible; transform: translateY(0); position: relative; top: auto; left: auto; right: auto; margin-top: 75px; margin-left: 40px; margin-right: 40px; max-height: calc(100% - 95px); overflow-y: auto; padding-top: 10px; padding-bottom: 30px; } /* ========================================== HOVER ========================================== */ .bubble-place:hover:not(.is-open) { transform: translateY(-5px); box-shadow: inset 8px 8px 22px rgba(255, 255, 255, 0.44), inset -10px -12px 22px rgba(2, 55, 112, 0.06), 0 16px 38px rgba(2, 55, 112, 0.14); } .bubble-place:hover:not(.is-open) .bubble-place-titel { color: #023770 !important; text-shadow: 0 0 8px rgba(255, 255, 255, 1), 0 0 20px rgba(255, 255, 255, 0.9), 0 0 38px rgba(255, 255, 255, 0.65); } /* ========================================== FOKUS ========================================== */ .bubble-place:focus-visible { outline: 2px solid #CC4E00; outline-offset: 5px; } /* ========================================== MOBILE ========================================== */ @media (max-width: 767px) { .bubble-place { --bubble-breite: 150px; --bubble-hoehe: 150px; --bubble-rechts: 19%; --bubble-oben: 400px; } .bubble-place-titel { font-size: 17px; } /* ===== MOBILE GEÖFFNET ===== */ .bubble-place.is-open { width: 82vw; height: 72vh; min-height: 520px; border-radius: 42px 55px 48px 60px; right: 9%; transform: none; } .bubble-place.is-open .bubble-place-titel { top: 24px; left: 28px; font-size: 19px; } .bubble-place.is-open .bubble-place-schliessen { top: 18px; right: 20px; font-size: 24px; } .bubble-place.is-open .bubble-place-inhalt { margin-top: 68px; margin-left: 28px; margin-right: 28px; font-size: 14px; line-height: 1.65; max-height: calc(100% - 85px); overflow-y: auto; } .bubble-place-inhalt p { margin-bottom: 20px; } .bubble-place-highlight { font-size: 17px; margin: 24px 0 !important; } } /* ========================================================= WAS BRAUCHST DU? – INFO-FRAGEZEICHEN ========================================================= */ .bubble-place-highlight { /* Die bisherige Überschrift bleibt in ihrer normalen Darstellung */ } .bubble-place-info-button { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; width: 30px; height: 30px; margin-left: 6px; padding: 0; border: 1px solid rgba(255,255,255,0.75); border-radius: 50%; background: #023770; color: #FFFFFF; font-family: "Libre Baskerville", serif; font-size: 20px; line-height: 1; text-align: center; cursor: pointer; box-shadow: 0 3px 9px rgba(2,55,112,0.16); transition: background 0.25s ease, transform 0.25s ease; } .bubble-place-info-button:hover { background: #59718F; transform: scale(1.06); } /* ========================================================= INFO-OVERLAY ========================================================= */ .bubble-place-info-overlay { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; padding: 25px; box-sizing: border-box; background: rgba(2,55,112,0.55); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, visibility 0.25s ease; } .bubble-place-info-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; } /* ========================================================= BLAUES FENSTER ========================================================= */ .bubble-place-info-popup { position: relative; width: 100%; max-width: 620px; max-height: 82vh; overflow-y: auto; box-sizing: border-box; padding: 42px; background: #023770; color: #FFFFFF; border-radius: 38px 48px 42px 50px; box-shadow: 0 25px 70px rgba(0,0,0,0.25); transform: translateY(12px) scale(0.98); transition: transform 0.25s ease; } .bubble-place-info-overlay.is-open .bubble-place-info-popup { transform: translateY(0) scale(1); } /* ========================================================= SCHLIESSEN ========================================================= */ .bubble-place-info-close { position: absolute; top: 14px; right: 18px; width: 32px; height: 32px; padding: 0; border: none !important; background: transparent !important; color: #FFFFFF !important; font-family: Arial, sans-serif; font-size: 28px; font-weight: 300; line-height: 30px; cursor: pointer; opacity: 0.85; transition: opacity 0.2s ease, transform 0.2s ease; } .bubble-place-info-close:hover { opacity: 1; transform: scale(1.08); } /* ========================================================= INHALT ========================================================= */ .bubble-place-info-content { display: none; font-family: "Open Sans", sans-serif; font-size: 14px; line-height: 1.65; } .bubble-place-info-content.is-visible { display: block; } .bubble-place-info-content h3 { margin: 0 40px 25px 0; color: #FFFFFF; font-family: "Libre Baskerville", serif; font-size: 20px; line-height: 1.45; } .bubble-place-info-content p { margin: 0 0 18px 0; } .bubble-place-info-content ol, .bubble-place-info-content ul { margin: 0 0 20px 0; padding-left: 22px; } .bubble-place-info-content li { margin-bottom: 13px; padding-left: 3px; } /* ========================================================= MOBILE – INFO-FENSTER ========================================================= */ @media (max-width: 767px) { .bubble-place-info-button { width: 27px; height: 27px; font-size: 16px; } .bubble-place-info-overlay { padding: 14px; } .bubble-place-info-popup { max-width: 100%; max-height: 88vh; padding: 38px 23px 28px 23px; border-radius: 30px 38px 34px 40px; } .bubble-place-info-content { font-size: 13px; line-height: 1.6; } .bubble-place-info-content h3 { margin-right: 30px; margin-bottom: 21px; font-size: 18px; line-height: 1.45; } .bubble-place-info-content li { margin-bottom: 12px; } .bubble-place-info-close { top: 10px; right: 13px; font-size: 27px; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-7c4b6c1 *//* ========================================================= HAST DU NOCH FRAGEN? – POSITION ========================================================= */ .freiraum-fragen-widget { /* ===== HIER POSITION EINSTELLEN ===== */ --fragen-rechts: 65.5%; --fragen-oben: 225px; --fragen-breite: 75px; --fragen-hoehe: 75px; /* ===== NICHT ÄNDERN ===== */ position: absolute; right: var(--fragen-rechts); top: var(--fragen-oben); width: var(--fragen-breite); height: var(--fragen-hoehe); z-index: 999; } /* ========================================================= ÄUSSERER KREIS ========================================================= */ .freiraum-fragen-kreis { width: 100%; height: 100%; padding: 0; border: none; border-radius: 50%; background: #023770; color: #FFFFFF; font-family: "Libre Baskerville", serif; font-size: 50px; line-height: 1; cursor: pointer; box-shadow: 0 15px 35px rgba(2,55,112,0.20); transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; } .freiraum-fragen-kreis:hover { background: #59718F; transform: scale(1.05); box-shadow: 0 20px 45px rgba(2,55,112,0.25); } /* ========================================================= OVERLAY ========================================================= */ .freiraum-fragen-overlay { position: fixed; inset: 0; z-index: 10000000; display: flex; align-items: center; justify-content: center; padding: 25px; box-sizing: border-box; background: rgba(2,55,112,0.55); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, visibility 0.25s ease; } .freiraum-fragen-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; } /* ========================================================= BLAUES FENSTER ========================================================= */ .freiraum-fragen-popup { position: relative; width: 100%; max-width: 580px; max-height: 82vh; overflow-y: auto; box-sizing: border-box; padding: 45px; background: #023770; color: #FFFFFF; border-radius: 38px 50px 44px 58px; box-shadow: 0 25px 70px rgba(0,0,0,0.25); transform: translateY(12px) scale(0.98); transition: transform 0.25s ease; } .freiraum-fragen-overlay.is-open .freiraum-fragen-popup { transform: translateY(0) scale(1); } /* ========================================================= SCHLIESSEN ========================================================= */ .freiraum-fragen-schliessen { position: absolute; top: 13px; right: 18px; width: 34px; height: 34px; padding: 0; border: none !important; background: transparent !important; color: #FFFFFF !important; font-family: Arial, sans-serif; font-size: 29px; font-weight: 300; line-height: 30px; cursor: pointer; opacity: 0.85; transition: opacity 0.2s ease, transform 0.2s ease; } .freiraum-fragen-schliessen:hover { opacity: 1; transform: scale(1.08); } /* ========================================================= TEXT ========================================================= */ .freiraum-fragen-inhalt { font-family: "Open Sans", sans-serif; font-size: 14px; line-height: 1.7; } .freiraum-fragen-inhalt h2 { margin: 0 45px 28px 0; color: #FFFFFF; font-family: "Libre Baskerville", serif; font-size: 22px; line-height: 1.45; } .freiraum-fragen-inhalt p { margin: 0 0 18px 0; } /* ========================================================= FORMULAR ========================================================= */ .freiraum-fragen-form { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; } .freiraum-fragen-form input, .freiraum-fragen-form textarea { width: 100%; box-sizing: border-box; padding: 13px 15px; border: 1px solid rgba(255,255,255,0.45); border-radius: 12px; background: rgba(255,255,255,0.10); color: #FFFFFF; font-family: "Open Sans", sans-serif; font-size: 14px; outline: none; transition: border-color 0.2s ease, background 0.2s ease; } .freiraum-fragen-form input::placeholder, .freiraum-fragen-form textarea::placeholder { color: rgba(255,255,255,0.75); } .freiraum-fragen-form input:focus, .freiraum-fragen-form textarea:focus { border-color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.14); } .freiraum-fragen-form textarea { resize: vertical; min-height: 120px; } /* ========================================================= SENDEN ========================================================= */ .freiraum-fragen-senden { align-self: flex-start; margin-top: 8px; padding: 12px 22px; border: none; border-radius: 25px; background: #CC4E00; color: #FFFFFF; font-family: "Open Sans", sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.25s ease, transform 0.25s ease; } .freiraum-fragen-senden:hover { background: #E26112; transform: translateY(-1px); } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { /* ===== MOBILE POSITION EINSTELLEN ===== */ .freiraum-fragen-widget { --fragen-rechts: 12%; --fragen-oben: 250px; --fragen-breite: 75px; --fragen-hoehe: 75px; } /* ===== MOBILE KREIS ===== */ .freiraum-fragen-kreis { width: 100%; height: 100%; font-size: 38px; } /* ===== MOBILE OVERLAY ===== */ .freiraum-fragen-overlay { padding: 14px; } /* ===== MOBILE FENSTER ===== */ .freiraum-fragen-popup { max-width: 100%; max-height: 88vh; padding: 40px 23px 28px 23px; border-radius: 30px 40px 34px 46px; } /* ===== MOBILE TEXT ===== */ .freiraum-fragen-inhalt { font-size: 13px; line-height: 1.65; } .freiraum-fragen-inhalt h2 { margin-right: 30px; margin-bottom: 22px; font-size: 19px; } /* ===== MOBILE FORMULAR ===== */ .freiraum-fragen-form { margin-top: 25px; } /* ===== MOBILE SCHLIESSEN ===== */ .freiraum-fragen-schliessen { top: 10px; right: 13px; font-size: 27px; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-de75614 *//* ========================================== FREIRAUM LANDINGPAGE – TERMINE OFFENE TERMIN-BUBBLE ========================================== */ .bubble-time { /* ===== POSITION UND GRÖSSE ===== */ --bubble-breite: 540px; --bubble-hoehe: auto; --bubble-rechts: 26%; --bubble-oben: 320px; position: absolute !important; top: var(--bubble-oben); right: var(--bubble-rechts); width: var(--bubble-breite); height: var(--bubble-hoehe); z-index: 20; /* ===== FORM ===== */ border-radius: 50px 65px 55px 70px; /* ===== GLAS / WASSER ===== */ background: radial-gradient( circle at 30% 23%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.72) 28%, rgba(255, 255, 255, 0.48) 52%, rgba(255, 255, 255, 0.22) 72%, rgba(255, 255, 255, 0.06) 88%, rgba(255, 255, 255, 0) 100% ); border: 1px solid rgba(255, 255, 255, 0.72); box-shadow: inset 10px 10px 25px rgba(255, 255, 255, 0.42), inset -10px -12px 25px rgba(2, 55, 112, 0.06), 0 18px 45px rgba(2, 55, 112, 0.14); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); box-sizing: border-box; padding: 28px 30px 24px 30px; text-align: center; } /* ========================================== TITEL ========================================== */ .bubble-time-titel { font-family: "Libre Baskerville", serif !important; color: #CC4E00 !important; font-size: 24px; font-weight: 400; line-height: 1.3; margin: 0 0 20px 0; text-shadow: 0 0 8px rgba(255, 255, 255, 0.95), 0 0 18px rgba(255, 255, 255, 0.75), 0 0 32px rgba(255, 255, 255, 0.45); } /* ========================================== INHALT ========================================== */ .bubble-time-inhalt { position: relative; width: 100%; font-family: "Open Sans", sans-serif !important; color: #023770; font-size: 15px; line-height: 1.5; text-align: center; } /* ========================================== DIE 3 TERMINE ========================================== */ .bubble-time-termine { display: flex; flex-direction: row; justify-content: center; align-items: stretch; gap: 12px; width: 100%; } /* ========================================== EINZELNER TERMIN ========================================== */ .freiraum-termin { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 13px 8px 12px 8px; border-radius: 22px; background: rgba(255, 255, 255, 0.30); border: 1px solid rgba(255, 255, 255, 0.48); box-sizing: border-box; } /* ========================================== WOCHENTAG ========================================== */ .freiraum-termin-wochentag { display: block; font-family: "Libre Baskerville", serif !important; color: #CC4E00; font-size: 17px; line-height: 1.35; margin-bottom: 3px; } /* ========================================== DATUM ========================================== */ .freiraum-termin-datum-zahl { display: block; color: #023770; font-size: 14px; line-height: 1.4; margin-bottom: 7px; } /* ========================================== UHRZEIT ========================================== */ .freiraum-termin-uhrzeit { color: #023770; font-size: 16px; font-weight: 600; line-height: 1.4; margin-bottom: 10px; } /* ========================================== BUCHEN BUTTON ========================================== */ .freiraum-buchen-button { display: inline-block; padding: 7px 17px; border: 1px solid #CC4E00; border-radius: 30px; background: rgba(255, 255, 255, 0.58); color: #CC4E00; font-family: "Open Sans", sans-serif !important; font-size: 14px; font-weight: 400; line-height: 1.2; cursor: pointer; transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; } /* ===== BUTTON HOVER ===== */ .freiraum-buchen-button:hover { background: #CC4E00; color: #FFFFFF; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(204, 78, 0, 0.18); } /* ========================================== HARD FACTS ========================================== */ .bubble-time-fakten { margin-top: 18px; padding-top: 13px; border-top: 1px solid rgba(2, 55, 112, 0.16); font-family: "Open Sans", sans-serif !important; color: #023770; font-size: 15px; font-weight: 600; line-height: 1.5; text-align: center; letter-spacing: 0.1px; } /* ========================================== KEINE TERMINE ========================================== */ .bubble-time-keine-termine { font-family: "Libre Baskerville", serif !important; color: #CC4E00; font-size: 18px; } /* ========================================== MOBILE ========================================== */ @media (max-width: 767px) { .bubble-time { --bubble-breite: 90%; --bubble-hoehe: auto; --bubble-rechts: 5%; --bubble-oben: 600px; position: absolute !important; width: var(--bubble-breite); padding: 26px 20px 22px 20px; border-radius: 38px 48px 43px 52px; } .bubble-time-titel { font-size: 21px; margin-bottom: 20px; } /* ========================================== TERMINE AUF MOBIL ========================================== */ .bubble-time-termine { display: flex; flex-direction: column; gap: 10px; } /* Jeder Termin = Info links + Button rechts */ .freiraum-termin { width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 15px; padding: 13px 15px; border-radius: 20px; box-sizing: border-box; text-align: left; } /* Datum und Uhrzeit bleiben links */ .freiraum-termin-datum { flex: 1 1 auto; text-align: left; } .freiraum-termin-wochentag { display: block; font-size: 17px; line-height: 1.35; margin-bottom: 2px; } .freiraum-termin-datum-zahl { display: block; font-size: 14px; line-height: 1.4; margin-bottom: 4px; } .freiraum-termin-uhrzeit { font-size: 15px; line-height: 1.4; margin: 0; text-align: left; } /* ========================================== BUCHEN BUTTON RECHTS ========================================== */ .freiraum-buchen-button { flex: 0 0 auto; padding: 8px 18px; font-size: 14px; white-space: nowrap; } /* ========================================== HARD FACTS ========================================== */ .bubble-time-fakten { margin-top: 18px; padding-top: 14px; font-size: 13px; font-weight: 600; line-height: 1.55; } .freiraum-termin-info { display: flex; flex-direction: column; align-items: center; width: 100%; } @media (max-width: 767px) { .freiraum-termin-info { flex: 1 1 auto; align-items: flex-start; text-align: left; } .freiraum-termin-uhrzeit { margin-top: 2px !important; text-align: left; } } /* ========================================== FREIRAUM – BUCHUNGS-TEST ========================================== */ .freiraum-buchungs-testtext { margin: 0; color: #023770; font-family: "Open Sans", sans-serif !important; font-size: 15px; line-height: 1.6; text-align: center; } .freiraum-buchungsmaske-termin { justify-content: center; } /* ========================================== TERMINWUNSCH IN DER TERMINE-BUBBLE ========================================== */ .bubble-time-wunsch { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; box-sizing: border-box !important; margin: 26px 0 20px 0 !important; padding: 18px 20px !important; background: yellow !important; border: 3px solid red !important; text-align: left !important; } .bubble-time-wunsch-text { display: block !important; flex: 1 1 auto !important; color: blue !important; text-align: left !important; } .freiraum-terminwunsch-button { display: inline-block !important; flex: 0 0 auto !important; background: red !important; color: white !important; border: 3px solid black !important; padding: 10px 25px !important; } /* ========================================== FRAGE LINKS ========================================== */ .bubble-time-wunsch-text { flex: 1 1 auto; margin: 0 !important; padding: 0 !important; color: #023770 !important; font-family: "Open Sans", sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.5 !important; text-align: left !important; } /* ========================================== BUTTON RECHTS ========================================== */ .freiraum-terminwunsch-button { flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 72px !important; margin: 0 !important; padding: 9px 24px !important; border: 1px solid #CC4E00 !important; border-radius: 30px !important; background: #CC4E00 !important; background-color: #CC4E00 !important; color: #FFFFFF !important; font-family: "Open Sans", sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.4 !important; text-align: center !important; cursor: pointer; box-shadow: none !important; transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease; } .freiraum-terminwunsch-button:hover { background: #023770 !important; background-color: #023770 !important; border-color: #023770 !important; color: #FFFFFF !important; transform: translateY(-1px); } /* ========================================== MOBILE ========================================== */ @media (max-width: 600px) { .bubble-time-wunsch { gap: 14px; padding: 16px; } .bubble-time-wunsch-text { font-size: 13px !important; } .freiraum-terminwunsch-button { min-width: 64px !important; padding: 9px 19px !important; } } } /* ========================================== INFO-FRAGEZEICHEN BEI DEN HARD FACTS ========================================== */ .bubble-time-fakten { position: relative; } .bubble-time-info-button { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin: 0 0 0 4px; padding: 0; border: none; border-radius: 50%; background: #023770; color: #FFFFFF; font-family: Arial, sans-serif; font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer; vertical-align: middle; transition: background 0.2s ease, transform 0.2s ease; } .bubble-time-info-button:hover { background: #59718F; transform: scale(1.08); } .bubble-time-info-text { display: none; margin-top: 9px; color: #023770; font-family: "Open Sans", sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; text-align: center; } .bubble-time-info-text.aktiv { display: block; }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-15fa48f *//* ========================================== FREIRAUM – TERMINWUNSCH BUBBLE ========================================== */ .freiraum-terminwunsch-bubble { width: 430px; margin-top: 670px; margin-left: auto; margin-right: 34%; padding: 20px 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; box-sizing: border-box; background: radial-gradient( circle at 30% 20%, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.62) 45%, rgba(255,255,255,0.30) 100% ); border: 1px solid rgba(255,255,255,0.70); border-radius: 32px 40px 35px 42px; box-shadow: inset 8px 8px 18px rgba(255,255,255,0.38), inset -8px -8px 18px rgba(2,55,112,0.04), 0 12px 30px rgba(2,55,112,0.10); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); font-family: "Open Sans", sans-serif; } /* ========================================== TEXT ========================================== */ .freiraum-terminwunsch-bubble-text { flex: 1 1 auto; text-align: left; } .freiraum-terminwunsch-bubble-titel { margin-bottom: 4px; color: #CC4E00; font-family: "Libre Baskerville", serif; font-size: 16px; line-height: 1.35; } .freiraum-terminwunsch-bubble-text-inhalt { color: #023770; font-size: 13px; line-height: 1.45; } /* ========================================== BUTTON ========================================== */ .freiraum-terminwunsch-button { flex: 0 0 auto; padding: 8px 17px; border: 1px solid #CC4E00 !important; border-radius: 30px !important; background: #CC4E00 !important; color: #FFFFFF !important; font-family: "Open Sans", sans-serif !important; font-size: 13px; font-weight: 400; line-height: 1.3; cursor: pointer; box-shadow: none !important; transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease; } .freiraum-terminwunsch-button:hover { background: #023770 !important; border-color: #023770 !important; color: #FFFFFF !important; transform: translateY(-1px); } /* ========================================== MOBILE ========================================== */ @media (max-width: 767px) { .freiraum-terminwunsch-bubble { width: 90%; margin-left: 5%; margin-right: 5%; margin-top: 1128px; padding: 17px 18px; gap: 14px; border-radius: 28px 34px 30px 36px; } .freiraum-terminwunsch-bubble-titel { font-size: 15px; } .freiraum-terminwunsch-bubble-text-inhalt { font-size: 12px; } .freiraum-terminwunsch-button { padding: 8px 14px; font-size: 12px; white-space: nowrap; } }/* End custom CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'More Sugar'; font-display: auto; src: url('https://freiraum-fuer-leben.de/wp-content/uploads/2026/07/MoreSugar-Regular.ttf') format('truetype'); } /* End Custom Fonts CSS */