.elementor-2085 .elementor-element.elementor-element-d79965a{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--overlay-opacity:0.58;border-style:solid;--border-style:solid;border-color:#FDFBF6;--border-color:#FDFBF6;}.elementor-2085 .elementor-element.elementor-element-d79965a:not(.elementor-motion-effects-element-type-background), .elementor-2085 .elementor-element.elementor-element-d79965a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://www.villaoliva.de/wp-content/uploads/2025/11/villa-oliva-pool-mallorca-2025-001.webp");background-position:center center;background-size:cover;}.elementor-2085 .elementor-element.elementor-element-d79965a::before, .elementor-2085 .elementor-element.elementor-element-d79965a > .elementor-background-video-container::before, .elementor-2085 .elementor-element.elementor-element-d79965a > .e-con-inner > .elementor-background-video-container::before, .elementor-2085 .elementor-element.elementor-element-d79965a > .elementor-background-slideshow::before, .elementor-2085 .elementor-element.elementor-element-d79965a > .e-con-inner > .elementor-background-slideshow::before, .elementor-2085 .elementor-element.elementor-element-d79965a > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#0F0F0F;--background-overlay:'';}.elementor-2085 .elementor-element.elementor-element-d923cbf{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:50px;--margin-bottom:50px;--margin-left:0px;--margin-right:0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Poppins, Helvetica Neue;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-2085 .elementor-element.elementor-element-4da69d8{text-align:center;}.elementor-2085 .elementor-element.elementor-element-4da69d8 .elementor-heading-title{font-family:"Montserrat", Poppins, Helvetica Neue;font-size:1rem;font-weight:400;text-transform:uppercase;letter-spacing:7px;color:var( --e-global-color-accent );}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Poppins, Helvetica Neue;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );text-transform:var( --e-global-typography-secondary-text-transform );font-style:var( --e-global-typography-secondary-font-style );text-decoration:var( --e-global-typography-secondary-text-decoration );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-2085 .elementor-element.elementor-element-e0ca358{--divider-border-style:solid;--divider-color:#B2A9A1;--divider-border-width:1px;}.elementor-2085 .elementor-element.elementor-element-e0ca358 .elementor-divider-separator{width:40%;margin:0 auto;margin-center:0;}.elementor-2085 .elementor-element.elementor-element-e0ca358 .elementor-divider{text-align:center;padding-block-start:15px;padding-block-end:15px;}.elementor-2085 .elementor-element.elementor-element-9d1a4b8{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2085 .elementor-element.elementor-element-9d1a4b8 .elementor-heading-title{font-family:"Cormorant Garamond", Poppins, Helvetica Neue;font-size:70px;font-weight:400;text-transform:uppercase;letter-spacing:6.8px;color:var( --e-global-color-accent );}.elementor-2085 .elementor-element.elementor-element-54aa909{margin:10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;}.elementor-2085 .elementor-element.elementor-element-54aa909 .elementor-heading-title{font-family:"Cormorant Garamond", Poppins, Helvetica Neue;font-size:1.3rem;font-weight:200;font-style:italic;letter-spacing:1.7px;color:var( --e-global-color-accent );}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Poppins, Helvetica Neue;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );font-style:var( --e-global-typography-accent-font-style );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-2085 .elementor-element.elementor-element-6080a79 .elementor-button{background-color:#B2A9A1;font-family:var( --e-global-typography-text-font-family ), Poppins, Helvetica Neue;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );text-transform:var( --e-global-typography-text-text-transform );font-style:var( --e-global-typography-text-font-style );text-decoration:var( --e-global-typography-text-text-decoration );letter-spacing:var( --e-global-typography-text-letter-spacing );fill:#FFFFFF;color:#FFFFFF;border-style:solid;border-width:2px 2px 2px 2px;border-color:#FFFFFF;border-radius:0px 0px 0px 0px;padding:10px 20px 10px 20px;}.elementor-2085 .elementor-element.elementor-element-6080a79 .elementor-button:hover, .elementor-2085 .elementor-element.elementor-element-6080a79 .elementor-button:focus{background-color:#EAE9E5;color:#623E2A;}.elementor-2085 .elementor-element.elementor-element-6080a79{margin:40px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2085 .elementor-element.elementor-element-6080a79 .elementor-button:hover svg, .elementor-2085 .elementor-element.elementor-element-6080a79 .elementor-button:focus svg{fill:#623E2A;}.elementor-2085 .elementor-element.elementor-element-5c39a4d{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-2085 .elementor-element.elementor-element-9cc1156{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--gap:5px 5px;--row-gap:5px;--column-gap:5px;}.elementor-2085 .elementor-element.elementor-element-9cc1156:not(.elementor-motion-effects-element-type-background), .elementor-2085 .elementor-element.elementor-element-9cc1156 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-2085 .elementor-element.elementor-element-5642b65{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2085 .elementor-element.elementor-element-5642b65:not(.elementor-motion-effects-element-type-background), .elementor-2085 .elementor-element.elementor-element-5642b65 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F8F8F8;}.elementor-2085 .elementor-element.elementor-element-793b7f4{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;border-style:none;--border-style:none;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2085 .elementor-element.elementor-element-7e0237b{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-2085 .elementor-element.elementor-element-9cc1156{--width:75%;}.elementor-2085 .elementor-element.elementor-element-5642b65{--width:100%;}}@media(min-width:1440px){.elementor-2085 .elementor-element.elementor-element-d79965a:not(.elementor-motion-effects-element-type-background), .elementor-2085 .elementor-element.elementor-element-d79965a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:fixed;}}@media(min-width:1920px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );}.elementor-widget-divider .elementor-divider__text{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-widget-button .elementor-button{font-size:var( --e-global-typography-accent-font-size );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-2085 .elementor-element.elementor-element-6080a79 .elementor-button{font-size:var( --e-global-typography-text-font-size );letter-spacing:var( --e-global-typography-text-letter-spacing );}}@media(max-width:1439px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );}.elementor-widget-divider .elementor-divider__text{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-widget-button .elementor-button{font-size:var( --e-global-typography-accent-font-size );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-2085 .elementor-element.elementor-element-6080a79 .elementor-button{font-size:var( --e-global-typography-text-font-size );letter-spacing:var( --e-global-typography-text-letter-spacing );}}@media(max-width:1023px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );}.elementor-widget-divider .elementor-divider__text{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-widget-button .elementor-button{font-size:var( --e-global-typography-accent-font-size );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-2085 .elementor-element.elementor-element-6080a79 .elementor-button{font-size:var( --e-global-typography-text-font-size );letter-spacing:var( --e-global-typography-text-letter-spacing );}}@media(max-width:767px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );}.elementor-widget-divider .elementor-divider__text{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-widget-button .elementor-button{font-size:var( --e-global-typography-accent-font-size );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-2085 .elementor-element.elementor-element-6080a79 .elementor-button{font-size:var( --e-global-typography-text-font-size );letter-spacing:var( --e-global-typography-text-letter-spacing );}}/* Start custom CSS *//* ========================================================= PREISSEITE – PREISTABELLE (Villa Oliva) STABILER, SAUBERER ENDSTAND ========================================================= */ /* --------------------------------------------------------- TYPOGRAFIE – Tabelle (Cormorant Garamond) --------------------------------------------------------- */ .vo-price-page .vo-price-table, .vo-price-page .vo-price-table th, .vo-price-page .vo-price-table td { font-family: "Cormorant Garamond", serif; font-size: 1.3rem; color: #7A5A46; } /* --------------------------------------------------------- TABELLENKOPF --------------------------------------------------------- */ .vo-price-page .vo-price-table thead th { font-weight: 800; /* wie Vorlage */ padding: 5px; line-height: 1.4; background-color: #E6E4E4; /* gemessene Referenzfarbe */ } /* --------------------------------------------------------- TABELLENKÖRPER --------------------------------------------------------- */ .vo-price-page .vo-price-table tbody td { font-weight: 400; padding: 5px 12px; line-height: 1.4; background-color: transparent; } /* --------------------------------------------------------- TABELLENRAHMEN – NUR TABELLE, NICHT CONTAINER --------------------------------------------------------- */ .vo-price-page .vo-price-table { border-collapse: collapse; } .vo-price-page .vo-price-table th, .vo-price-page .vo-price-table td { border: 1px solid #D4D1CE; /* weiche, ruhige Linien */ } /* --------------------------------------------------------- TABELLENINHALT – horizontal zentriert --------------------------------------------------------- */ .vo-price-page .vo-price-table th, .vo-price-page .vo-price-table td { text-align: center; } /* --------------------------------------------------------- ERSTE SPALTE – 30 % Breite --------------------------------------------------------- */ .vo-price-page .vo-price-table th:first-child, .vo-price-page .vo-price-table td:first-child { width: 30%; white-space: nowrap; } /* --------------------------------------------------------- TEXTE UNTER DER TABELLE – Fließtext (Lora) --------------------------------------------------------- */ .vo-price-page .vo-price-notes, .vo-price-page .vo-price-notes p { font-family: "Lora", serif; font-weight: 400; font-size: 0.9rem; /* ca. 14,4 px */ line-height: 1.6; color: #7A5A46; } /* Absatz-Abstände: nur der erste mit Abstand oben */ .vo-price-page .vo-price-notes p { margin-top: 0; } .vo-price-page .vo-price-notes p:first-child { margin-top: 1.5rem; } /* PREISSEITE – Textblock minimal einrücken */ .vo-price-page .vo-price-notes { padding-left: 5px; } /* ========================================================================== VILLA OLIVA – PRICE RENDERER – MOBILE CARDS Scope: NUR innerhalb .vo-price-renderer Desktop-Tabelle bleibt unverändert, Mobile wird per CSS umgebaut. ========================================================================== */ /* Optional: ruhige Basis */ .vo-price-renderer { --vo-card-bg: #ffffff; --vo-card-border: rgba(0,0,0,0.10); --vo-muted: rgba(0,0,0,0.65); --vo-strong: rgba(0,0,0,0.92); --vo-gap: 12px; --vo-radius: 12px; } /* ========================= MOBILE: Tabelle -> Cards ========================= */ @media (max-width: 768px) { /* Sicherheit: keine horizontale Scrollbar */ .vo-price-renderer { overflow-x: hidden; } /* Die Tabelle bleibt im DOM (gleiche Datenquelle), wird aber visuell in Cards verwandelt */ .vo-price-renderer table { width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important; } /* Kopfzeile ausblenden (Labels liefern wir unten pro Feld) */ .vo-price-renderer table thead { display: none !important; } /* Jede Tabellenzeile = eine Card */ .vo-price-renderer table tbody tr { display: block !important; background: var(--vo-card-bg); border: 1px solid var(--vo-card-border); border-radius: var(--vo-radius); padding: 12px 12px 10px 12px; margin: 0 0 var(--vo-gap) 0; box-shadow: 0 1px 0 rgba(0,0,0,0.02); } /* Tabellenzellen werden “Zeilen” innerhalb der Card */ .vo-price-renderer table tbody td { display: flex !important; align-items: baseline; justify-content: space-between; gap: 12px; width: 100% !important; padding: 8px 0 !important; border: 0 !important; } /* Ruhige Trennlinie zwischen Feldern */ .vo-price-renderer table tbody td + td { border-top: 1px solid rgba(0,0,0,0.06) !important; } /* Erstes Feld (typisch: Preisperiode) als “Titelzeile” der Card */ .vo-price-renderer table tbody td:first-child { display: block !important; padding: 0 0 10px 0 !important; border-top: 0 !important; } /* Titel (Periodentext) optisch hervorheben */ .vo-price-renderer table tbody td:first-child { font-weight: 700; color: var(--vo-strong); font-size: 1.05em; line-height: 1.25; } /* Ab dem 2. Feld: Label links (per ::before), Wert rechts */ .vo-price-renderer table tbody td:not(:first-child)::before { display: inline-block; min-width: 44%; max-width: 60%; color: var(--vo-muted); font-weight: 600; font-size: 0.95em; line-height: 1.2; content: ""; } /* Wert (der eigentliche Zellinhalt) rechts, gut lesbar */ .vo-price-renderer table tbody td:not(:first-child) { color: var(--vo-strong); font-weight: 600; font-size: 1.0em; line-height: 1.2; } /* Falls Werte zu lang werden (z.B. Hinweise), sauber umbrechen */ .vo-price-renderer table tbody td { word-break: break-word; } /* ========================= Labels DE/ES per Spalte Annahme: Spaltenreihenfolge wie Desktop-Tabelle: 1 = Periode 2 = Personen 3 = Erste Woche 4 = Folgetag 5 = Hinweise (falls vorhanden) ========================= */ /* DE */ html[lang^="de"] .vo-price-renderer table tbody td:nth-child(2)::before { content: "Personen"; } html[lang^="de"] .vo-price-renderer table tbody td:nth-child(3)::before { content: "Erste Woche"; } html[lang^="de"] .vo-price-renderer table tbody td:nth-child(4)::before { content: "Folgetag"; } html[lang^="de"] .vo-price-renderer table tbody td:nth-child(5)::before { content: "Hinweise"; } /* ES */ html[lang^="es"] .vo-price-renderer table tbody td:nth-child(2)::before { content: "Personas"; } html[lang^="es"] .vo-price-renderer table tbody td:nth-child(3)::before { content: "Primera semana"; } html[lang^="es"] .vo-price-renderer table tbody td:nth-child(4)::before { content: "Día adicional"; } html[lang^="es"] .vo-price-renderer table tbody td:nth-child(5)::before { content: "Notas"; } /* Fallback (wenn Sprache anders): englische Labels */ html:not([lang^="de"]):not([lang^="es"]) .vo-price-renderer table tbody td:nth-child(2)::before { content: "Guests"; } html:not([lang^="de"]):not([lang^="es"]) .vo-price-renderer table tbody td:nth-child(3)::before { content: "First week"; } html:not([lang^="de"]):not([lang^="es"]) .vo-price-renderer table tbody td:nth-child(4)::before { content: "Next day"; } html:not([lang^="de"]):not([lang^="es"]) .vo-price-renderer table tbody td:nth-child(5)::before { content: "Notes"; } } /* DESKTOP-SICHERUNG – ohne all:unset */ @media (min-width: 769px) { .vo-price-renderer table { display: table !important; } .vo-price-renderer table tr { display: table-row !important; } .vo-price-renderer table td, .vo-price-renderer table th { display: table-cell !important; } } @media (max-width: 768px) { /* Mobile-Container */ .vo-price-mobile { display: block; } /* Basis-Card */ .vo-mcard { background: #FAF9F7; border: 1px solid rgba(122,90,70,0.15); border-radius: 14px; padding: 18px; margin-bottom: 18px; } /* Card-Titel */ .vo-mcard-title { font-family: "Cormorant Garamond", serif; font-size: 1.3rem; font-weight: 700; color: #7A5A46; margin-bottom: 14px; } /* Zeilen */ .vo-mrow { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; gap: 12px; } .vo-mrow span { font-family: "Lora", serif; font-size: 0.95rem; color: #7A5A46; } .vo-mrow strong { font-family: "Lora", serif; font-size: 0.95rem; font-weight: 600; color: #7A5A46; white-space: nowrap; } /* Leichte Trennung in Preis-Card */ .vo-mcard--prices .vo-mrow + .vo-mrow { border-top: 1px solid rgba(122,90,70,0.12); } } /* ========================================================= VO PRICE RENDERER – FINAL VISIBILITY SWITCH (Desktop zeigt NUR Tabelle, Mobile zeigt NUR 3 Cards) Muss am ENDE der CSS-Datei stehen. ========================================================= */ /* DESKTOP (>=769px): Mobile-Markup ausblenden */ @media (min-width: 769px) { .vo-price-renderer .vo-price-desktop { display: block; } .vo-price-renderer .vo-price-mobile { display: none; } } /* MOBILE (<=768px): Tabelle/ Desktop-Markup ausblenden, nur Cards anzeigen */ @media (max-width: 768px) { /* Desktop-Teil + Tabelle definitiv weg */ .vo-price-renderer .vo-price-desktop, .vo-price-renderer table { display: none; } /* Mobile-Teil definitiv an */ .vo-price-renderer .vo-price-mobile { display: block; } /* Alte „Tabelle -> Cards“-Transformation neutralisieren (falls CSS noch existiert) */ .vo-price-renderer table tbody tr, .vo-price-renderer table tbody td, .vo-price-renderer table thead { display: revert; } }/* End custom CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 200; font-display: auto; src: url('https://www.villaoliva.de/wp-content/uploads/2025/09/Montserrat-Thin.ttf') format('truetype'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: normal; font-display: auto; src: url('https://www.villaoliva.de/wp-content/uploads/2025/09/Montserrat-Regular.ttf') format('truetype'); } /* End Custom Fonts CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: normal; font-display: auto; src: url('https://www.villaoliva.de/wp-content/uploads/2025/10/CormorantGaramond-Regular.ttf') format('truetype'); } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300; font-display: auto; src: url('https://www.villaoliva.de/wp-content/uploads/2025/10/CormorantGaramond-Light.ttf') format('truetype'); } @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300; font-display: auto; src: url('https://www.villaoliva.de/wp-content/uploads/2025/10/CormorantGaramond-LightItalic.ttf') format('truetype'); } /* End Custom Fonts CSS */