.elementor-kit-30{--e-global-color-primary:#40554B;--e-global-color-secondary:#E8AB00;--e-global-color-text:#202020;--e-global-color-accent:#FFFFFF;--e-global-typography-primary-font-family:"Montserrat";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Libre Bodoni";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Montserrat";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-30 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1290px;}.e-con{--container-max-width:1290px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}.sc_layouts_title_caption{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}} /* Start custom CSS *//* ============================================================ NATURRESIDENZ UFERTRAUM · Elementor-Formular + Kalender ------------------------------------------------------------ Einfügen: Elementor → Website-Einstellungen (Hamburger-Menü oben links) → "Benutzerdefiniertes CSS". Dort wirkt es global – wichtig, weil der Kalender (flatpickr) außerhalb des Formular-Widgets im gerendert wird und per Widget-CSS nicht erreichbar wäre. Farben: Forstgrün #40544A · Dunkelgrün #34433A · Messing #B4863A Messing hell #D8B15E · Creme #F6F1E7 · Papier #FBF8F1 Tinte #23281F · Salbei #6F7D71 ============================================================ */ /* ---------- Formular als edle Karte (optional – Zeilen löschen, wenn nicht gewünscht) ---------- */ .elementor-widget-form .elementor-form{ background:#F6F1E7; border:1px solid rgba(52,67,58,.12); border-radius:16px; padding:clamp(24px,3vw,40px); box-shadow:0 30px 70px -40px rgba(30,39,31,.45); } /* ---------- Abstände der Felder ---------- */ .elementor-form .elementor-field-group{ margin-bottom:20px; } /* ---------- Labels ---------- */ .elementor-form .elementor-field-group > label, .elementor-form .elementor-field-label{ font-family:'Manrope',sans-serif; text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; font-weight:700; color:#40544A; margin-bottom:8px; } /* Sternchen bei Pflichtfeldern in Messing */ .elementor-form .elementor-mark-required .elementor-field-label:after, .elementor-form .elementor-field-required .elementor-field-label:after{ color:#B4863A; } /* ---------- Eingabefelder / Textarea / Select ---------- */ .elementor-form input.elementor-field-textual, .elementor-form textarea.elementor-field-textual, .elementor-form select.elementor-field-textual{ background:#FBF8F1; border:1px solid rgba(52,67,58,.20); border-radius:10px; padding:14px 16px; min-height:52px; font-family:'Manrope',sans-serif; font-size:1rem; color:#23281F; box-shadow:none; transition:border-color .2s ease, box-shadow .2s ease, background .2s ease; } .elementor-form input.elementor-field-textual:focus, .elementor-form textarea.elementor-field-textual:focus, .elementor-form select.elementor-field-textual:focus{ border-color:#B4863A; background:#ffffff; box-shadow:0 0 0 3px rgba(180,134,58,.15); outline:none; } .elementor-form textarea.elementor-field-textual{ min-height:140px; resize:vertical; line-height:1.6; } .elementor-form ::placeholder{ color:#9AA39E; opacity:1; } /* ---------- Absende-Button (mit !important, damit Elementor-Farbe nicht gewinnt) ---------- */ .elementor-form .elementor-button, .elementor-form button.elementor-button, .elementor-form .elementor-button[type="submit"], .elementor-form .e-form__buttons button{ background-color:#B4863A !important; background-image:none !important; color:#2A2314 !important; border:0 !important; border-radius:999px !important; font-family:'Manrope',sans-serif !important; font-weight:600 !important; letter-spacing:.01em; font-size:1rem !important; padding:16px 36px !important; min-height:54px; box-shadow:0 10px 26px -12px rgba(180,134,58,.7); transition:transform .25s cubic-bezier(.2,.7,.2,1), background-color .25s ease, box-shadow .25s ease; } /* Button-Text (Elementor kapselt ihn in einen Span) sichtbar machen */ .elementor-form .elementor-button .elementor-button-text, .elementor-form .elementor-button span, .elementor-form .elementor-button i{ color:#2A2314 !important; } .elementor-form .elementor-button:hover, .elementor-form button.elementor-button:hover, .elementor-form .e-form__buttons button:hover{ background-color:#D8B15E !important; transform:translateY(-2px); box-shadow:0 16px 34px -14px rgba(180,134,58,.85); } /* ---------- System-/Fehlermeldungen ---------- */ .elementor-message{ font-family:'Manrope',sans-serif; font-size:.9rem; } .elementor-message.elementor-message-success{ color:#40544A; } .elementor-message.elementor-message-danger, .elementor-form .elementor-field-group .elementor-error .elementor-error-message{ color:#A3402F; } /* ============================================================ KALENDER (flatpickr) – für Datum-Felder (Anreise / Abreise) ============================================================ */ .flatpickr-calendar{ background:#FBF8F1; border:1px solid rgba(52,67,58,.15); border-radius:14px; box-shadow:0 24px 60px -28px rgba(30,39,31,.45); font-family:'Manrope',sans-serif; } /* Sprechblasen-Pfeil an die Creme-Farbe angleichen */ .flatpickr-calendar.arrowTop:before{ border-bottom-color:rgba(52,67,58,.15); } .flatpickr-calendar.arrowTop:after { border-bottom-color:#FBF8F1; } .flatpickr-calendar.arrowBottom:before{ border-top-color:rgba(52,67,58,.15); } .flatpickr-calendar.arrowBottom:after { border-top-color:#FBF8F1; } /* Kopf mit Monat/Jahr + Pfeile */ .flatpickr-months .flatpickr-month{ color:#40544A; fill:#40544A; } .flatpickr-current-month, .flatpickr-current-month input.cur-year{ font-family:'Fraunces',Georgia,serif; font-weight:500; color:#34433A; } .flatpickr-monthDropdown-months{ font-family:'Fraunces',Georgia,serif; color:#34433A; } .flatpickr-prev-month svg, .flatpickr-next-month svg{ fill:#40544A; } .flatpickr-prev-month:hover svg, .flatpickr-next-month:hover svg{ fill:#B4863A; } /* Wochentage */ span.flatpickr-weekday{ color:#B4863A; font-weight:600; } /* Tage */ .flatpickr-day{ color:#23281F; border-radius:9px; transition:background .15s ease, color .15s ease; } .flatpickr-day:hover{ background:#EAE0CC; border-color:transparent; } .flatpickr-day.today{ border-color:#B4863A; } .flatpickr-day.today:hover{ background:#B4863A; color:#fff; } /* Ausgewählte Tage + Zeitraum (Anreise–Abreise) */ .flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover{ background:#40544A; border-color:#40544A; color:#ffffff; } .flatpickr-day.inRange{ background:#EAE0CC; border-color:#EAE0CC; box-shadow:-5px 0 0 #EAE0CC, 5px 0 0 #EAE0CC; } /* Nicht wählbare / andere Monate */ .flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay{ color:rgba(35,40,31,.32); } /* Zeit-Auswahl (falls aktiviert) */ .flatpickr-time input:hover, .flatpickr-time .flatpickr-am-pm:hover, .flatpickr-time input:focus, .flatpickr-time .flatpickr-am-pm:focus{ background:#EAE0CC; }/* End custom CSS */