/* * Landhaus Averbeck – Website-Refresh 2026 * Arbeitsdatei für alle NEUEN Styles (Typo-Umstellung, Module, Angebots-Kacheln). * Die build.min.css wird NICHT angefasst – alle Overrides und Neuerungen hier. * Struktur: 0) Variablen 1) Typo-System 2) Header 3) Neue Module 4) Angebote 5) Instagram 6) Responsive */ /* --------------------------------------------------------------- 0a) Schriften lokal (Refresh 2026) "Brother 1816" und "Vollkorn" (Gewicht 500) werden von den Elementor-Einstellungen der neuen Startseite referenziert. Ohne diese Deklarationen kaemen sie nur ueber Elementor Pro (Custom Fonts) bzw. Google Fonts. Dateien liegen im Theme (assets/font/), damit Live ohne Pro und ohne externe Anfragen auskommt. Gewichte wie im Custom-Font-Upload: 400 = Book, 500 = Medium. --------------------------------------------------------------- */ @font-face { font-family: "Brother 1816"; src: url("../font/Brother1816/Brother-1816-Book.woff2") format("woff2"), url("../font/Brother1816/Brother-1816-Book.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Brother 1816"; src: url("../font/Brother1816/Brother-1816-Medium.woff2") format("woff2"), url("../font/Brother1816/Brother-1816-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Vollkorn"; src: url("../font/Vollkorn/Vollkorn-500-latin-ext.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Vollkorn"; src: url("../font/Vollkorn/Vollkorn-500-latin.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* --------------------------------------------------------------- 0) Farb- und Schrift-Variablen des Refresh --------------------------------------------------------------- */ :root { --nwr-green: #154037; --nwr-green-text: #1B4039; --nwr-rose: #E4B2A8; --nwr-white: #FFFFFF; --nwr-font-sans: 'BrotherMedium', sans-serif; --nwr-font-sans-book: 'BrotherBook', sans-serif; --nwr-font-serif: 'VollkornSemiBold', serif; --nwr-font-hand: 'MaradonaSignatureRegular', cursive; } /* --------------------------------------------------------------- 1) Typo-System (H1/H2-Tausch) Brother 1816 Versalien als Headline, Vollkorn als Topline, Maradona nur noch als Akzent. Wird im Typo-Pass ausgearbeitet. --------------------------------------------------------------- */ /* --------------------------------------------------------------- 2) Header (volle Breite für Video UND Bild) --------------------------------------------------------------- */ /* --------------------------------------------------------------- 3) Neue Module (Struktur-CSS) --------------------------------------------------------------- */ /* Topline in den neuen Modulen (bewusst auf die neuen Module begrenzt, damit Bestandsseiten unberührt bleiben) */ .nwr-fullimage .topline, .nwr-bigbox-slide .topline, .nwr-layered .topline { font-family: var(--nwr-font-serif); color: var(--nwr-rose); font-size: calc(15px + 0.3vw); letter-spacing: 0.08em; margin: 0 0 0.9em; } .nwr-fullimage h2, .nwr-bigbox-slide h2, .nwr-layered h2:not(.handwrit) { font-family: var(--nwr-font-sans); font-weight: 400; color: var(--nwr-green); text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.15; margin: 0 0 0.6em; font-size: calc(22px + 1.7vw); } @media (min-width: 1600px) { .nwr-fullimage h2, .nwr-bigbox-slide h2, .nwr-layered h2:not(.handwrit) { font-size: 50px; } } /* In der Textbox etwas kleiner, damit lange Worte nicht anstossen */ .nwr-fullimage .nwr-fullimage-box h2 { font-size: calc(18px + 1.4vw); } @media (min-width: 1600px) { .nwr-fullimage .nwr-fullimage-box h2 { font-size: 40px; } } .nwr-fullimage .nwr-fullimage-box p:not(.topline), .nwr-bigbox-slide .text-container p:not(.topline) { font-family: var(--nwr-font-sans-book); color: var(--nwr-green-text); font-size: 15px; line-height: 2; } /* --- Bild Fullscreen + Textbox (.nwr-fullimage) --- */ .nwr-fullimage { position: relative; } .nwr-fullimage .nwr-fullimage-media img { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 968; object-fit: cover; } .nwr-fullimage .nwr-fullimage-box { position: relative; z-index: 2; width: 33%; min-width: 380px; max-width: 530px; margin-top: clamp(-560px, -29vw, -240px); margin-left: 7.5%; background: var(--nwr-white); } .nwr-fullimage.box-right .nwr-fullimage-box { margin-left: auto; margin-right: 7.5%; } .nwr-fullimage .nwr-fullimage-box .inner { padding: calc(28px + 2vw) calc(24px + 1.8vw); } /* --- Gelayerte Bilder + Text (.nwr-layered) --- Erbt das Grund-Layout der bestehenden .widget-text.image-Sektionen aus der build.min.css. Versatz, Abstaende und neue Typo werden im Typo-Pass hier verfeinert, ohne die alten Text-Container zu aendern. */ /* --------------------------------------------------------------- 4) Angebote (Startseiten-Slider + Buchungsstrecke) --------------------------------------------------------------- */ /* --- Angebots-Slider (.nwr-angebote) --- Markup kommt serverseitig aus functions/SliderAngebote.php, Init aus refresh-2026.js (die alte .slider-angebote-Init in app.min.js greift nicht mehr). Drittel-Kacheln randlos, weisse Info-Box unten auf jeder Kachel. Die volle Breite liefert der Widget-Wrapper ueber die Theme-Klasse outer-content (SliderAngeboteModul.php). */ .nwr-angebote { position: relative; overflow: hidden; transition: opacity 0.4s ease; } .nwr-angebote.loading { opacity: 0; } /* Slide-Breite steuert die sichtbare Kachel-Anzahl (slidesPerView 'auto', siehe refresh-2026.js): Desktop 3, Tablet 2, Mobil 1 */ .nwr-angebote .swiper-slide { width: 33.3334%; } @media (max-width: 1023px) { .nwr-angebote .swiper-slide { width: 50%; } } @media (max-width: 767px) { .nwr-angebote .swiper-slide { width: 100%; } } .nwr-angebote .swiper-slide .item { position: relative; display: block; width: 100%; -webkit-user-select: none; user-select: none; } .nwr-angebote .swiper-slide .item img { display: block; width: 100%; height: auto; aspect-ratio: 533 / 763; object-fit: cover; } /* Weisse Info-Box unten auf der Kachel */ .nwr-angebote .nwr-offer-box { position: absolute; left: 50%; bottom: calc(16px + 2.5vw); transform: translateX(-50%); width: 77%; background: var(--nwr-white); text-align: center; padding: calc(18px + 1.2vw) 16px; z-index: 2; } .nwr-angebote .nwr-offer-box h3 { font-family: var(--nwr-font-sans); font-weight: 400; color: var(--nwr-green); text-transform: uppercase; letter-spacing: 0.14em; line-height: 1.4; font-size: calc(16px + 0.9vw); margin: 0 0 0.5em; padding: 0; } @media (min-width: 1600px) { .nwr-angebote .nwr-offer-box h3 { font-size: 30px; } } .nwr-angebote .nwr-offer-box .nwr-offer-meta { font-family: var(--nwr-font-sans); color: var(--nwr-green); font-size: 13px; letter-spacing: 0.1em; margin: 0; } /* Pfeile wie bei der Sliderbox: Altrosa-Kreis, weisser Pfeil, mittig */ .nwr-angebote .swiper-button-prev, .nwr-angebote .swiper-button-next { position: absolute; top: 50%; transform: translateY(-50%); width: 49px; height: 49px; margin: 0; z-index: 5; cursor: pointer; } .nwr-angebote .swiper-button-prev { left: calc(24px + 2.5vw); } .nwr-angebote .swiper-button-next { right: calc(24px + 2.5vw); } .nwr-angebote .swiper-button-prev:after, .nwr-angebote .swiper-button-next:after { display: none; content: none; } .nwr-angebote .circle-arrow { display: block; width: 100%; height: 100%; } .nwr-angebote .circle-arrow .circle { fill: var(--nwr-rose); } .nwr-angebote .circle-arrow .arrow { fill: none; stroke: var(--nwr-white); stroke-width: 3; } /* --------------------------------------------------------------- 5) Instagram --------------------------------------------------------------- */ /* --------------------------------------------------------------- 6) Responsive --------------------------------------------------------------- */ @media (max-width: 767px) { /* Bild Fullscreen + Textbox: Box unter das Bild, volle Breite */ .nwr-fullimage .nwr-fullimage-media img { aspect-ratio: auto; } .nwr-fullimage .nwr-fullimage-box, .nwr-fullimage.box-right .nwr-fullimage-box { width: 100%; min-width: 0; max-width: none; margin: 0; } .nwr-fullimage .nwr-fullimage-box .inner { padding: 32px 24px 8px; text-align: center; } /* Sliderbox: Bild oben, Text darunter zentriert, Pfeile auf dem Bild */ .nwr-bigbox-slide, .slider-bigbox.image-right .nwr-bigbox-slide { flex-direction: column; } .nwr-bigbox-slide .image-container { width: 100%; } .nwr-bigbox-slide .image-container img { height: auto; aspect-ratio: 1 / 1; } .nwr-bigbox-slide .text-container .inner { padding: 32px 24px 12px; max-width: none; text-align: center; } .slider-bigbox .swiper-button-prev, .slider-bigbox .swiper-button-next { top: calc(100vw - 78px); transform: none; } .slider-bigbox .swiper-button-prev { left: 18px; } .slider-bigbox .swiper-button-next { right: 18px; } /* Angebots-Slider: eine Kachel pro Ansicht, Pfeile im oberen Bildbereich. display: block noetig, weil die build.min.css Swiper-Pfeile auf Mobil global ausblendet */ .nwr-angebote .nwr-offer-box { width: 86%; bottom: 44px; padding: 28px 18px; } .nwr-angebote .swiper-button-prev, .nwr-angebote .swiper-button-next { display: block; top: 40%; transform: translateY(-50%); } .nwr-angebote .swiper-button-prev { left: 18px; } .nwr-angebote .swiper-button-next { right: 18px; } } /* --------------------------------------------------------------- New home page style --------------------------------------------------------------- */ #main { max-width: 100%; padding: 0; } .site-main { padding: 0px !important; } /*------------- Hero Section -------------*/ /*Hero Section*/ .new-home-hero-sec h2 { font-family: var(--nwr-font-sans-book); font-size: 50px !important; font-weight: 400; text-transform: uppercase; line-height: 57px; letter-spacing: 5px; margin-bottom: 0px; } .new-home-hero-sec p.topline { font-family: "Vollkorn", Sans-serif; font-family:var(--nwr-font-serif); font-size: 20px; font-weight: 500; line-height: 22px; letter-spacing: 2.16px; text-transform: unset; margin-bottom: 25px; } .new-home-hero-sec .content { padding: 0px 42px !important; max-width: 1280px !important; } @media screen and (max-width:1024px) { .new-home-hero-sec h2 { font-size: 40px !important; line-height: 50px; } } @media screen and (max-width:767px) { .new-home-hero-sec h2 { font-size: 28px !important; line-height: 34px; } .new-home-hero-sec p.topline { font-size: 15px; line-height: 18px; letter-spacing: 1px; margin-bottom: 13px; } } /*All-inclusive Premium*/ .image-1 { margin-left: auto; } @media screen and (max-width: 1239px) and (min-width: 1025px) { .hero-video .elementor-column-gap-default { min-height: 470px !important; } .right-col .elementor-element-populated { padding-left: 50px !important; } .image-1 { max-width: 294px !important; } .image-2 { max-width: 293px !important; } .urlaub-title .elementor-heading-title { font-size: 40px !important; line-height: 47px !important; } .urlaub-title .elementor-widget-container { margin: 0px 22px 26px 0px !important; } .sub-title .elementor-widget-container { margin: 0px 0px 15px 0px; } .anim-image { max-width: 137px !important; top: 20px !important; right: 10px !important; } } @media screen and (max-width: 767px) { .image-block .elementor-widget-wrap { max-width: 308px; margin: auto; } } /*------------- Image With Handwriting Accent -------------*/ .maradona-title h2 { font-family:'MaradonaSignatureRegular'!important; } .mage-with-handwriting-accent-video .elementor-wrapper { aspect-ratio: 2 / 2.5 !important; } /*------------- Restaurnt & Kulinarik -------------*/ .section-title-row .elementor-widget-wrap { justify-content: center; } .section-title-row { width: 100% !important; } /*------- Urlaub für alle style -------*/ @media (max-width: 1199px) { .left-box-content { padding-left: 30px; } } /*------------- Urlaub für alle Section -------------*/ .image-box-slider { box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.1); } @media (max-width:1024px) { .image-box-slider { box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.1); } } /*------------- Customer Review Section -------------*/ .review_widget .text-container .inner h3 { font-size: 30px; line-height: 40px; color: #154037; letter-spacing: 5px; padding: 0px; font-family:var(--nwr-font-sans-book); margin-bottom: 80px; } .review_widget .text-container .inner p { margin-bottom: 0px; font-size: 20px; line-height: 21.6px; letter-spacing: 1px; color: #E4B2A8; font-family:var(--nwr-font-serif); font-weight: 400; text-transform: unset; } .review_widget .modul-container { margin-top: 0; } /* 15.09.2026: zweiter Selektor war nicht auf das Widget begrenzt und hat sitewide die automatische Hoehe aller Bild-Text-Slider abgeschaltet (Punkte lagen auf dem Text). */ .review_widget .swiper-autoheight, .review_widget .swiper-autoheight .swiper-slide { height: 100%; } .review_widget .swiper-wrapper { height: 100% !important; } .review_widget .text-container .inner { padding: 0px; width: 100%; max-width: 60%; } .review_widget .modul-container-inner { padding: 0px !important; max-width: 1470px !important; } @media screen and (max-width:1200px) { .review_widget .text-container .inner { padding: 0px; width: 100%; max-width: 72%; } .review_widget .text-container .inner h3 { font-size: 20px; line-height: 30px; color: #154037; letter-spacing: 2px; } } @media screen and (max-width:767px) { .review_widget .text-container .inner { max-width: 100%; padding: 0px 55px; } .review_widget .text-container .inner h3 { margin-bottom: 50px; } .review_widget .swiper-container { padding-bottom: 70px; } } @media screen and (max-width:575px) { .review_widget .text-container .inner h3 { font-size: 18px; } .review_widget .text-container .inner p { font-size: 15px; line-height: 30px; letter-spacing: 3px; text-transform: uppercase; } } /*------- Angebote & Arrangements style -------*/ .nwr-angebote .nwr-offer-box { padding: 35px 40px; min-height: 240px; display: flex; flex-direction: column; justify-content: center; } /*------- Instagram feed style -------*/ .insta_feed_img img { aspect-ratio: 3/4; object-fit: cover; } .feed_icon svg { filter: drop-shadow(2px 2px 2px #00000060); } /* --------------------------------------------------------------- 7) Typo-Tausch Bestandsmodule (alle Unterseiten, Refresh 2026) Bisher: kleine Brother-Versalzeile (h1 / p.topline) ueber einer grossen Vollkorn-Headline (h2). Neu nach Figma: Vollkorn klein als Topline, Brother 1816 in Versalien als Headline. Gilt nur innerhalb der Theme-Module (.modul-container); Handschrift-Headlines (h2.handwrit) bleiben als Akzent unveraendert. --------------------------------------------------------------- */ .modul-container h1, .modul-container p.topline { font-family: "Vollkorn", VollkornSemiBold, Georgia, serif; font-weight: 500; font-size: calc(15px + 5 * (100vw - 390px) / 1210); letter-spacing: .06em; line-height: 1.2; text-transform: none; } @media screen and (max-width: 390px) { .modul-container h1, .modul-container p.topline { font-size: 15px; } } @media screen and (min-width: 1600px) { .modul-container h1, .modul-container p.topline { font-size: 20px; } } .modul-container h2:not(.handwrit) { font-family: "Brother 1816", BrotherBook, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .1em; line-height: 1.14; } .modul-container h3 { font-family: "Brother 1816", BrotherMedium, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .08em; line-height: 1.25; } /* 7a) Ausnahme Testimonial-Zitat (Startseite, Figma: Brother 1816 Book 30 px, gemischte Schreibweise, Laufweite 5 px, Zeile 40 px). Die Versalien-Regel fuer h3 oben trifft sonst das Zitat. */ .modul-container .widget-testimonial .text-container .inner h3 { font-family: "Brother 1816", BrotherBook, sans-serif; font-weight: 400; text-transform: none; letter-spacing: .167em; line-height: 1.34; font-size: calc(20px + 10 * (100vw - 390px) / 1210); color: #154037; } @media screen and (max-width: 390px) { .modul-container .widget-testimonial .text-container .inner h3 { font-size: 20px; } } @media screen and (min-width: 1600px) { .modul-container .widget-testimonial .text-container .inner h3 { font-size: 30px; } } .modul-container .widget-testimonial .text-container .inner p { font-family: "Vollkorn", VollkornSemiBold, Georgia, serif; font-weight: 500; font-size: 20px; letter-spacing: .05em; text-transform: none; color: #E4B2A8; } /* --------------------------------------------------------------- 8) Buchungsstrecke (Vioma-Maske /buchen/, VRI 5513) Nur Darstellung: Schriften, Farben, Versalien-Titel. Die Maske wird von Vioma per JavaScript geladen, ihre eigenen Stylesheets kommen NACH dieser Datei, deshalb die verstaerkten Selektoren (.vsc.vsc-remote ...). Datenuebergabe und Markup bleiben unangetastet. Vorschau auf dem Staging: /qa-buchungsstrecke/ (statische Kopie). --------------------------------------------------------------- */ .vsc.vsc-remote, .vsc.vsc-remote input, .vsc.vsc-remote select, .vsc.vsc-remote textarea, .vsc.vsc-remote button { font-family: "Brother 1816", BrotherBook, sans-serif; color: #154037; } .vsc.vsc-remote input:not([type="radio"]):not([type="checkbox"]), .vsc.vsc-remote select, .vsc.vsc-remote textarea { border: 1px solid #154037; border-radius: 0; background: #FFFFFF; font-size: 15px; } /* Titel: Brother 1816 in Versalien statt Vollkorn */ .vsc.vsc-remote .vsc-title, .vsc.vsc-remote .vsc-item-title, .vsc.vsc-remote .vsc-item-menu-title { font-family: "Brother 1816", BrotherBook, sans-serif !important; font-weight: 400 !important; text-transform: uppercase !important; letter-spacing: .08em !important; line-height: 1.2 !important; color: #154037 !important; } .vsc.vsc-remote .vsc-item-title { font-size: 24px !important; } .vsc.vsc-remote .vsc-title { font-size: 20px !important; } /* Abschnitts-Balken (REISEDATUM, ZIMMER 1) */ .vsc.vsc-remote .vsc-item-head .vsc-name, .vsc.vsc-remote .vsc-head .vsc-name { font-family: "Brother 1816", BrotherMedium, sans-serif !important; font-weight: 500 !important; letter-spacing: .12em !important; text-transform: uppercase !important; } /* Metabar (Codes einloesen, Login) */ .vsc.vsc-remote .vsc-metabar-button, .vsc.vsc-remote .vsc-metabar-button-text, .vsc.vsc-remote .vsc-metabar-select-selected { font-family: "Brother 1816", BrotherMedium, sans-serif !important; font-weight: 500 !important; color: #154037 !important; letter-spacing: .1em !important; } /* Buttons wie auf der Startseite: transparent, Altrosa-Rahmen, Altrosa-Label */ .vsc.vsc-remote .vsc-button, .vsc.vsc-remote .vsc-block-item-description-link, .vsc.vsc-remote .vsc-element-submit { font-family: "Brother 1816", BrotherMedium, sans-serif !important; font-weight: 500 !important; font-size: 16px !important; letter-spacing: .07em !important; color: #E4B2A8 !important; background: transparent !important; border: 2px solid #E4B2A8 !important; border-radius: 0 !important; } .vsc.vsc-remote .vsc-button:hover, .vsc.vsc-remote .vsc-block-item-description-link:hover, .vsc.vsc-remote .vsc-element-submit:hover { color: #FFFFFF !important; background: #E4B2A8 !important; } /* Preise und Labels */ .vsc.vsc-remote .vsc-item-roomtypes-price, .vsc.vsc-remote [class*="vsc-price"] { font-family: "Brother 1816", BrotherMedium, sans-serif !important; font-weight: 500 !important; color: #154037 !important; } .vsc.vsc-remote label, .vsc.vsc-remote .vsc-element-radio-title, .vsc.vsc-remote .vsc-description { color: #154037; } /* Datepicker */ .vdp-wrapper, .vdp-wrapper .vdp-cell, .vdp-wrapper .vdp-head { font-family: "Brother 1816", BrotherBook, sans-serif !important; color: #154037; } .vdp-wrapper .vdp-head-month, .vdp-wrapper .vdp-head-year { font-family: "Brother 1816", BrotherMedium, sans-serif !important; font-weight: 500 !important; text-transform: uppercase !important; letter-spacing: .1em !important; } .vdp-wrapper .vdp-daynames .vdp-cell { text-transform: uppercase; letter-spacing: .08em; font-size: 12px; } /* --------------------------------------------------------------- 9) Menü-Overlay nach Figma Ab 768 px zeigt das Overlay alle fünf Gruppen mit ihren Untereinträgen gleichzeitig (Figma "Frame 17"): erste Reihe drei Spalten, zweite Reihe zwei Spalten, rechts der Icon-Streifen mit Instagram, Facebook und dem Sprachumschalter. Zwei Eingriffe sind dafür nötig, beide bleiben im Overlay: 1. Die Gruppen-Titel sind im Figma reine Überschriften. Sie bekommen "pointer-events: none", damit der Titel-Link (er zeigt im Menü ohnehin auf href="") nicht mehr anklickbar ist. Dadurch läuft der Aufklapp-Handler der app.min.js gar nicht erst an, der sonst per Inline-Stil alle anderen Untermenüs ausblenden würde. 2. Die Untermenüs stehen auf "display: block !important" und überschreiben damit auch einen Inline-Stil, falls das Theme-Skript sie doch einmal ausblendet. Unter 768 px bleibt das Aufklapp-Verhalten des Themes erhalten, dort ändert sich nur die Typografie (Figma "Navi Mobil"). --------------------------------------------------------------- */ /* Weisse Fläche über die volle Breite statt des rechten Panels */ aside.menu { background-color: var(--nwr-white, #FFFFFF); } /* --- Ab 768 px: Gesamtansicht ----------------------------------- */ @media (min-width: 768px) { .menu .menu-container .inner { width: 100%; float: none; min-height: 100%; position: relative; } ul.overlay-menu { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; column-gap: 0; row-gap: 45px; padding-top: 60px; padding-left: 8%; padding-right: 9%; padding-bottom: 60px; } ul.overlay-menu li.nav-item { position: relative; margin: 0; padding: 0; } /* Gruppen-Titel: Brother 1816 in Versalien. Die Breite von 9.68em (242 px bei 25 px Schrift) erzeugt genau die Zeilenumbrüche des Figma-Entwurfs, die Mindesthöhe von zwei Zeilen hält alle Untermenüs auf einer Linie. */ ul.overlay-menu li.nav-item.parent > a, ul.overlay-menu li.nav-item.parent.active > a, ul.overlay-menu li.nav-item.parent.click-on > a, ul.overlay-menu li.nav-item.active.click-off > a { font-family: "Brother 1816", BrotherBook, sans-serif; font-weight: 400; font-size: clamp(20px, 1.5625vw, 25px); line-height: 1.4; letter-spacing: .2em; text-transform: uppercase; color: var(--nwr-green, #154037); background-image: none; display: block; max-width: 9.68em; min-height: 2.8em; margin: 0; padding: 0; white-space: normal; pointer-events: none; cursor: default; } /* Untermenüs dauerhaft offen, direkt unter dem Titel */ ul.overlay-menu li.nav-item ul.sub, ul.overlay-menu li.nav-item.active ul.sub, ul.overlay-menu li.nav-item.bottom ul.sub { display: block !important; position: static; top: auto; bottom: auto; left: auto; font-size: clamp(16px, 1.25vw, 20px); margin: 1.4em 0 0 0; padding: 0; } ul.overlay-menu li.nav-item ul.sub li { margin: 0; padding: 0; } ul.overlay-menu li.nav-item ul.sub li a, ul.overlay-menu li.nav-item.active ul.sub li a { font-family: "Brother 1816", BrotherBook, sans-serif; font-weight: 400; font-size: 1em; line-height: 2; letter-spacing: .05em; text-transform: none; color: var(--nwr-green, #154037); display: inline-block; margin: 0; padding: 0; white-space: normal; pointer-events: auto; } ul.overlay-menu li.nav-item ul.sub li a:hover, ul.overlay-menu li.nav-item.active ul.sub li a:hover, ul.overlay-menu li.nav-item ul.sub li.active a, ul.overlay-menu li.nav-item.active ul.sub li.active a { color: var(--nwr-rose, #E4B2A8); } /* Icon-Streifen rechts oben */ ul.overlay-icons { position: absolute; top: 170px; right: 24px; float: none; width: 30px; margin: 0; padding: 0; } ul.overlay-icons li { display: block; margin: 0 0 33px 0; padding: 0; } ul.overlay-icons li:last-child { margin-bottom: 0; } ul.overlay-icons li a .icon-container { width: 30px; } } /* --- Ab 1200 px: drei Spalten in der ersten Reihe ---------------- */ @media (min-width: 1200px) { ul.overlay-menu { /* Spaltenbreiten aus dem Figma: Textspalten bei 202 / 648 / 1025 px in einem 1600er Rahmen */ grid-template-columns: minmax(0, 446fr) minmax(0, 377fr) minmax(0, 361fr); row-gap: 57px; } } /* --- Ab 1500 px: Masse exakt wie im Figma ----------------------- */ @media (min-width: 1500px) { ul.overlay-menu { padding-top: 94px; padding-left: 12.625%; padding-right: 13.375%; } ul.overlay-icons { top: 204px; right: 45px; } } /* --- Unter 768 px: Aufklapp-Menü wie bisher, Typografie neu ------ Figma "Navi Mobil": zentriert, Versalien, 20/34 px, die Untereinträge erscheinen weiterhin erst auf Klick. */ @media (max-width: 767px) { ul.overlay-menu { padding-top: 73px; padding-left: 20px; padding-right: 20px; padding-bottom: 40px; } ul.overlay-menu li.nav-item { text-align: center; margin-bottom: 20px; } ul.overlay-menu li.nav-item:last-child { margin-bottom: 0; } ul.overlay-menu li.nav-item.parent > a, ul.overlay-menu li.nav-item.parent.active > a, ul.overlay-menu li.nav-item.parent.click-on > a, ul.overlay-menu li.nav-item.active.click-off > a { font-family: "Brother 1816", BrotherBook, sans-serif; font-weight: 400; font-size: 20px; line-height: 34px; letter-spacing: .1em; text-transform: uppercase; color: var(--nwr-green, #154037); display: block; width: 274px; max-width: 100%; margin: 0 auto; padding: 0; white-space: normal; } ul.overlay-menu li.nav-item ul.sub { margin: 6px 0 0 0; padding: 0; } ul.overlay-menu li.nav-item ul.sub li a, ul.overlay-menu li.nav-item.active ul.sub li a { font-family: "Brother 1816", BrotherBook, sans-serif; font-weight: 400; font-size: 13px; line-height: 26px; letter-spacing: .07em; text-transform: none; color: var(--nwr-green-text, #1B4039); display: block; margin: 0; padding: 0; white-space: normal; } ul.overlay-menu li.nav-item ul.sub li.active a { color: var(--nwr-rose, #E4B2A8); } ul.overlay-icons { float: none; width: 100%; text-align: center; padding-left: 20px; padding-right: 20px; } ul.overlay-icons li { display: inline-block; padding: 0 15px; vertical-align: middle; } ul.overlay-icons li a .icon-container { width: 30px; } } /* --------------------------------------------------------------- 11) Hero-Höhe nach Figma (Desktop) Das Theme setzt den Video-Header auf 100vh minus Kopfzeile. Das Figma zeigt auf dem Desktop eine feste Fläche von 968 px unter der 98-px-Kopfzeile. Ab 1200 px Breite gilt deshalb die Figma-Höhe, darunter bleibt die bildschirmhohe Variante des Themes. --------------------------------------------------------------- */ @media (min-width: 1200px) { /* !important, weil das Theme-JS die Hoehe als Inline-Stil setzt */ .widget-header-video-text .header-video-container { height: 968px !important; } } /* --------------------------------------------------------------- 10) Sliderbox-Widget (.slider-bigbox) Grosse Sliderbox "Ankommen und Wohlfuehlen": quadratisches Medium (Bild oder Video) auf der einen Seite, weisse Textbox auf der anderen, runde Altrosa-Pfeile links und rechts. Alle Werte stammen aus den Designer-Containern 18631 (Bild links), 18637 (Bild rechts), 18642 / 18648 (Video) und wurden auf der Startseite gegengemessen: Medium 55 %, Textspalte 45 % mit Innenabstand 20/20/20/90, weisse Box 400 px breit, Abstand zwischen den Textbausteinen 30 px, Pfeile 70 px ab 385 px Hoehe. Der Fliesstext laeuft bewusst mit 0,07em Laufweite (= 1,05 px bei 15 px, 0,91 px bei 13 px). Genau so rendert die Vorlage auf der Startseite: die 1,5 px aus den Elementor-Einstellungen greifen dort nicht, weil die Absatz-Regel des Themes gewinnt. Dieser Block ersetzt den frueheren Abschnitt "Slider Bild + Text Gross (.slider-bigbox)" aus Abschnitt 3 samt seinem Teil im Responsive-Block. Die alten Regeln koennen entfernt werden, sie werden hier vollstaendig ueberschrieben. --------------------------------------------------------------- */ .slider-bigbox { position: relative; overflow: hidden; /* padding zuruecksetzen: die build.min.css haelt auf Mobil 60 px fuer Pagination-Punkte frei, die diese Box nicht hat */ padding: 0; box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.1); transition: opacity 0.4s ease; } .slider-bigbox.loading { opacity: 0; } .slider-bigbox .swiper-slide { height: auto; } .nwr-bigbox-slide { display: flex; align-items: stretch; height: 100%; } /* Anordnung in beide Richtungen (Julias Anmerkung 19.08.2026) */ .slider-bigbox.image-right .nwr-bigbox-slide { flex-direction: row-reverse; } /* --- Medium: Bild oder Video, immer quadratisch, Bildmitte oben --- */ .nwr-bigbox-slide .image-container { width: 55%; flex: 0 0 55%; overflow: hidden; } .nwr-bigbox-slide .image-container img, .nwr-bigbox-slide .image-container video { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 0; } /* --- Textspalte und weisse Box --- */ .nwr-bigbox-slide .text-container { flex: 1 1 45%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; background: none; padding: 20px 20px 20px 90px; } .nwr-bigbox-slide .text-container .inner { display: flex; flex-direction: column; gap: 30px; width: 400px; max-width: 100%; padding: 0; background: var(--nwr-white); text-align: left; } .nwr-bigbox-slide .text-container .topline { margin: 0; } .nwr-bigbox-slide .text-container h2 { font-family: "Brother 1816", var(--nwr-font-sans-book); font-weight: 400; color: var(--nwr-green); text-transform: uppercase; font-size: 30px; line-height: 40px; letter-spacing: 3px; margin: 0; } .nwr-bigbox-slide .text-container .copy { margin: 0; } .nwr-bigbox-slide .text-container .copy p { font-family: var(--nwr-font-sans-book); font-weight: 400; color: var(--nwr-green-text); font-size: 15px; line-height: 30px; letter-spacing: 0.07em; margin: 0 0 20px; } .nwr-bigbox-slide .text-container .more-button { display: inline-block; align-self: flex-start; font-family: "Brother 1816", var(--nwr-font-sans); font-weight: 500; font-size: 16px; line-height: 16px; letter-spacing: 1.12px; color: var(--nwr-rose); background-color: var(--nwr-white); border: 2px solid var(--nwr-rose); border-radius: 0; padding: 15px 22px; margin: 31px 0 0; } .nwr-bigbox-slide .text-container .more-button:hover, .nwr-bigbox-slide .text-container .more-button:focus { color: var(--nwr-white); background-color: var(--nwr-rose); } /* --- Pfeile: gefuellte Altrosa-Kreise, weisser Winkel --- 70 px Kreis mit 14 x 26 px Winkel und 2 px Strichstaerke, genau wie left_arrow.svg / right_arrow.svg der Vorlage. Die Werte stehen im 49er-Koordinatensystem des Theme-SVG, deshalb Strichstaerke 1,4. */ .slider-bigbox .swiper-button-prev, .slider-bigbox .swiper-button-next { position: absolute; display: block; top: 385px; width: 70px; height: 70px; margin: 0; padding: 0; background: none; transform: none; z-index: 5; cursor: pointer; } .slider-bigbox .swiper-button-prev { left: 20px; right: auto; margin-right: 0; } .slider-bigbox .swiper-button-next { right: 20px; left: auto; margin-left: 0; } .slider-bigbox .swiper-button-prev:after, .slider-bigbox .swiper-button-next:after { display: none; content: none; } /* Bei nur einer Slide setzt Swiper diese Klasse: dann keine Pfeile zeigen */ .slider-bigbox .swiper-button-lock { display: none; } .slider-bigbox .circle-arrow { display: block; width: 100%; height: 100%; } .slider-bigbox .circle-arrow .circle { fill: var(--nwr-rose); } .slider-bigbox .circle-arrow .arrow { fill: none; stroke: var(--nwr-white); stroke-width: 1.4; stroke-linecap: square; } /* --- Ab 1199 px rueckt die Textspalte enger an das Medium --- */ @media (max-width: 1199px) { .nwr-bigbox-slide .text-container { padding-left: 30px; } } /* --- Tablet: Medium oben, weisse Box 50 px darueber geschoben --- */ @media (max-width: 1024px) { .slider-bigbox { box-shadow: none; } .nwr-bigbox-slide, .slider-bigbox.image-right .nwr-bigbox-slide { flex-direction: column; } .nwr-bigbox-slide .image-container { width: 100%; flex: 0 0 auto; } .nwr-bigbox-slide .text-container { flex: 1 1 auto; width: 100%; align-items: stretch; padding: 0 30px 20px 30px; } .nwr-bigbox-slide .text-container .inner { position: relative; z-index: 2; width: 100%; gap: 20px; margin-top: -50px; padding: 30px; } .nwr-bigbox-slide .text-container .more-button { margin-top: 20px; } } /* --- Handy: Text zentriert, kleinere Pfeile mittig auf dem Medium --- */ @media (max-width: 767px) { .nwr-bigbox-slide .text-container { padding: 0 20px 42px 30px; } .nwr-bigbox-slide .text-container .inner { padding: 34px 20px 42px; text-align: center; } .nwr-bigbox-slide .text-container h2 { font-size: 24px; line-height: 30px; } .nwr-bigbox-slide .text-container .copy p { font-size: 13px; line-height: 26px; } .nwr-bigbox-slide .text-container .more-button { align-self: center; margin-top: 0; } /* display: block noetig, weil die build.min.css Swiper-Pfeile auf Mobil global ausblendet */ .slider-bigbox .swiper-button-prev, .slider-bigbox .swiper-button-next { display: block; width: 50px; height: 50px; top: 170px; } .slider-bigbox .swiper-button-prev { left: 20px; } .slider-bigbox .swiper-button-next { right: 20px; } } /* --- 12) Instagram-Feed-Widget (.nwr-insta-grid) --- Kachelraster des Widgets "Instagram Feed" (instagram-feed-modul). Vorbild ist der Designer-Container 18150fa: drei Spalten ueber die volle Breite, Hochformat 3:4 (531 x 708 px bei 1600), hauchduenne Fuge von 4 px, weisses Symbol oben rechts. Die bisherigen Regeln .insta_feed_img / .feed_icon (Block 5) bleiben unberuehrt, damit die alte Sektion weiter aussieht wie bisher, solange sie noch auf der Seite liegt. --------------------------------------------------------------- */ .nwr-insta-grid { /* Fuge und Symbolgroesse wachsen mit der Fensterbreite: 390 px -> 22 px Symbol, 1600 px -> 60 px Symbol (Figma-Mass). */ --nwr-insta-gap: 4px; --nwr-insta-icon: clamp(22px, calc(22px + 38 * (100vw - 390px) / 1210), 60px); --nwr-insta-inset: clamp(12px, calc(12px + 20 * (100vw - 390px) / 1210), 32px); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--nwr-insta-gap); } .nwr-insta-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } .nwr-insta-tile { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 4; background-color: #EFEAE3; text-decoration: none; } .nwr-insta-tile .nwr-insta-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: filter .35s ease, transform .5s ease; } /* Hover: Kachel leicht abdunkeln, damit der Klickpunkt spuerbar wird. */ .nwr-insta-tile:hover .nwr-insta-img, .nwr-insta-tile:focus-visible .nwr-insta-img { filter: brightness(.9); } .nwr-insta-tile:focus-visible { outline: 2px solid var(--nwr-rose); outline-offset: -4px; } /* Weisses Symbol oben rechts (Pinnadel, Abspielzeichen, Galerie). */ .nwr-insta-icon { position: absolute; top: var(--nwr-insta-inset); right: var(--nwr-insta-inset); display: block; width: var(--nwr-insta-icon); height: var(--nwr-insta-icon); pointer-events: none; } .nwr-insta-icon svg { display: block; width: 100%; height: 100%; filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, .35)); } /* --- Bis 1024 px: zwei Spalten, auch wenn Desktop auf vier steht --- */ @media screen and (max-width: 1024px) { .nwr-insta-grid, .nwr-insta-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } } /* --- Handy: gleiche zwei Spalten, Fuge bleibt so schmal wie im Bestand --- */ @media screen and (max-width: 767px) { .nwr-insta-grid { --nwr-insta-gap: 4px; } } /* Aeltere Browser ohne aspect-ratio: Hoehe ueber das Bild selbst. */ @supports not (aspect-ratio: 3 / 4) { .nwr-insta-tile { height: auto; } .nwr-insta-tile .nwr-insta-img { height: auto; } } /* 12a) Bei zwei Spalten (Tablet/Smartphone) keine einzelne Kachel in der letzten Reihe */ @media screen and (max-width: 1024px) { .nwr-insta-grid.cols-3 .nwr-insta-tile:last-child:nth-child(odd) { display: none; } } /* --- 13) Bild Fullscreen nach Figma-Massen + Video randlos mit Handschrift --- (Blocknummer vergibt der Hauptagent, hier 12 als Vorschlag) Ersetzt die drei Pro-Templates 18008, 18011 und 18262: - 18008 -> fullscreen-image-text-modul ohne Textbox (.nwr-fullimage--nobox) - 18262 -> fullscreen-image-text-modul mit Textbox (Box 791 px bei 1600) - 18011 -> video-text-modul mit .nwr-video-refresh Die Masse stammen aus figma-crops/03-fullimage-box.png und figma-crops/02-video-handwrit.png (Crop 968 px = Figma 1600 px, Faktor 1,653) sowie aus den Pro-Templates selbst. Dieser Block steht bewusst NACH Block 3, damit die dortigen Grundwerte (Box 33 % breit, Seitenverhaeltnis 1600/968) gezielt ueberschrieben werden. --------------------------------------------------------------- */ /* --- 13a) Bild Fullscreen + Textbox (.nwr-fullimage) --------------- */ /* Bildhoehe wie im Pro-Template 18262: 1059 px bei 1600 px Breite. */ .nwr-fullimage .nwr-fullimage-media img { aspect-ratio: 1600 / 1059; } /* Weisse Box: 791 px breit, linke Kante auf dem 1227er Raster (186 px bei 1600), haengt unten ueber das Bild hinaus. Der negative Abstand haelt die Oberkante der Box bei rund 48 % der Bildhoehe, genau wie im Figma. */ .nwr-fullimage .nwr-fullimage-box { width: 49.5%; min-width: 0; max-width: 791px; margin-left: 11.65%; margin-right: 0; margin-top: clamp(-554px, -34.6vw, -200px); box-shadow: 0 0 6px rgba(0, 0, 0, 0.1); } .nwr-fullimage.box-right .nwr-fullimage-box { margin-left: auto; margin-right: 11.65%; } /* Innenabstaende und Abstaende der Zeilen wie im Template (101 / 106 / 132 px, Abstand zwischen den Elementen 35 px). */ .nwr-fullimage .nwr-fullimage-box .inner { display: flex; flex-direction: column; align-items: flex-start; gap: 35px; padding: calc(30px + 4.4vw) calc(32px + 4.6vw) calc(45px + 5.4vw); } .nwr-fullimage .nwr-fullimage-box .inner > * { margin: 0; } @media (min-width: 1600px) { .nwr-fullimage .nwr-fullimage-box .inner { padding: 101px 106px 132px; } } /* Topline: Vollkorn 500, 20 px bei 1600, Laufweite 2,16 px. */ .nwr-fullimage .nwr-fullimage-box .topline { font-size: calc(15px + 5 * (100vw - 390px) / 1210); letter-spacing: 0.108em; } @media (min-width: 1600px) { .nwr-fullimage .nwr-fullimage-box .topline { font-size: 20px; } } /* Headline: Brother 400 Versalien, 50 px / 57 px bei 1600, 28 px bei 390. */ .nwr-fullimage .nwr-fullimage-box h2 { font-size: calc(28px + 22 * (100vw - 390px) / 1210); line-height: 1.14; letter-spacing: 0.1em; } @media (min-width: 1600px) { .nwr-fullimage .nwr-fullimage-box h2 { font-size: 50px; } } /* Button: Outline Altrosa, 16 px, wie im Template (15/22 Innenabstand). */ .nwr-fullimage .nwr-fullimage-box .more-button { display: inline-block; font-family: "Brother 1816", var(--nwr-font-sans); font-weight: 500; font-size: 16px; line-height: 16px; letter-spacing: 1.12px; color: var(--nwr-rose); background-color: var(--nwr-white); border: 2px solid var(--nwr-rose); border-radius: 0; padding: 15px 22px; margin: 0; } .nwr-fullimage .nwr-fullimage-box .more-button:hover, .nwr-fullimage .nwr-fullimage-box .more-button:focus { color: var(--nwr-white); background-color: var(--nwr-rose); } /* Ohne Textbox (Ersatz fuer Template 18008): reines Vollbild im Raster, 1216 x 774 px, kein 100vh-Hero. */ .nwr-fullimage--nobox .nwr-fullimage-media img { aspect-ratio: 1216 / 774; } /* --- Bis 1199 px: Box breiter, Innenabstaende kleiner --- */ @media (max-width: 1199px) { .nwr-fullimage .nwr-fullimage-box, .nwr-fullimage.box-right .nwr-fullimage-box { width: 75%; max-width: none; margin-top: -32vw; } .nwr-fullimage .nwr-fullimage-box { margin-left: 6.5%; margin-right: 0; } .nwr-fullimage.box-right .nwr-fullimage-box { margin-left: auto; margin-right: 6.5%; } .nwr-fullimage .nwr-fullimage-box .inner { gap: 25px; padding: 50px 50px 60px; } } /* --- Unter 768 px: Bild im Hochformat, Box 90 % zentriert --- */ @media (max-width: 767px) { .nwr-fullimage .nwr-fullimage-media img { aspect-ratio: 390 / 489; } .nwr-fullimage--nobox .nwr-fullimage-media img { aspect-ratio: 2 / 3; } .nwr-fullimage .nwr-fullimage-box, .nwr-fullimage.box-right .nwr-fullimage-box { width: 90%; max-width: none; margin-left: auto; margin-right: auto; margin-top: -40vw; } .nwr-fullimage .nwr-fullimage-box .inner { gap: 13px; padding: 30px; } .nwr-fullimage .nwr-fullimage-box p:not(.topline) { font-size: 13px; letter-spacing: 0.91px; } .nwr-fullimage .nwr-fullimage-box .more-button { font-size: 15px; line-height: 19px; padding: 7px 11px; margin-top: 20px; } } /* --- 13b) Video randlos + Handschrift (.nwr-video-refresh) --------- Nur mit der Zusatzklasse aus dem Control "Randloses Layout". Ohne die Klasse bleibt das Modul exakt wie bisher. Figma: Video links bis zum Bildschirmrand, 640 x 735 px bei 1600, Text rechts vertikal mittig, Abstand zum Video 210 px. ------------ */ .nwr-video-refresh { align-items: center; padding-bottom: clamp(60px, 12.375vw, 198px); } .nwr-video-refresh .video-container { width: 40%; } .nwr-video-refresh .text-container { width: 60%; } .nwr-video-refresh .video-container .inner { float: none; width: 100%; aspect-ratio: 128 / 147; overflow: hidden; } .nwr-video-refresh .video-container .inner video { width: 100%; height: 100%; display: block; object-fit: cover; } /* Falls die Abspielart "Player" genutzt wird, fuellt auch der Plyr-Rahmen den Hochformat-Ausschnitt. */ .nwr-video-refresh .video-container .inner .plyr, .nwr-video-refresh .video-container .inner .plyr__video-wrapper { height: 100%; } .nwr-video-refresh.right .text-container .inner { padding-left: calc(30px + 11.25vw); padding-right: calc(20px + 3.75vw); } .nwr-video-refresh.left .text-container .inner { padding-right: calc(30px + 11.25vw); padding-left: calc(20px + 3.75vw); } @media (min-width: 1600px) { .nwr-video-refresh.right .text-container .inner { padding-left: 210px; padding-right: 80px; } .nwr-video-refresh.left .text-container .inner { padding-right: 210px; padding-left: 80px; } } /* Handschrift-Headline: 50 px bei 1600, 25 px bei 390, Zeilenabstand 100 %, Dunkelgruen wie alle Headlines des Refresh. */ .nwr-video-refresh .text-container h2.handwrit { color: var(--nwr-green); font-size: calc(25px + 25 * (100vw - 390px) / 1210); line-height: 2; margin: 0; } @media (min-width: 1600px) { .nwr-video-refresh .text-container h2.handwrit { font-size: 50px; } } .nwr-video-refresh .text-container .more-button { display: inline-block; font-family: "Brother 1816", var(--nwr-font-sans); font-weight: 500; font-size: 16px; line-height: 16px; letter-spacing: 1.12px; color: var(--nwr-rose); background-color: var(--nwr-white); border: 2px solid var(--nwr-rose); border-radius: 0; padding: 15px 22px; margin: 51px 0 0; } .nwr-video-refresh .text-container .more-button:hover, .nwr-video-refresh .text-container .more-button:focus { color: var(--nwr-white); background-color: var(--nwr-rose); } /* --- Bis 1199 px: Video etwas breiter, Text rueckt naeher heran --- */ @media (max-width: 1199px) { .nwr-video-refresh .video-container { width: 45%; } .nwr-video-refresh .text-container { width: 55%; } .nwr-video-refresh.right .text-container .inner { padding-left: 50px; padding-right: 30px; } .nwr-video-refresh.left .text-container .inner { padding-right: 50px; padding-left: 30px; } } /* --- Unter 768 px: Video oben ueber die volle Breite, Text darunter --- */ @media (max-width: 767px) { .nwr-video-refresh { align-items: stretch; } .nwr-video-refresh .video-container, .nwr-video-refresh .text-container { width: 100%; } .nwr-video-refresh .video-container .inner { aspect-ratio: 1 / 1; } .nwr-video-refresh.right .text-container .inner, .nwr-video-refresh.left .text-container .inner { padding: 0 30px; text-align: center; } .nwr-video-refresh .text-container .more-button { margin-top: 30px; } } /* --------------------------------------------------------------- 14) Intro-Textbloecke (text-container-modul ohne Bilder) + Handschrift-Banner (Refresh 2026) --------------------------------------------------------------- */ /* --------------------------------------------------------------- ) Zentrierte Intro-Textbloecke und Handschrift-Banner Bringt das Bestandsmodul "Text Container" (.widget-text ohne Bilder) und das Modul "Handwrit Image" auf das Figma-Design der neuen Startseite. Schriftart, Versalien und Laufweite kommen bereits aus Block 7 (Typo-Tausch Bestandsmodule); hier fehlen nur noch Groessen, Zeilenhoehen, Abstaende und Breiten. Alle Regeln greifen ausschliesslich in .modul-container und nur bei Textbloecken OHNE Bilder (:not(.image)), damit Bild-Text-Module der Unterseiten unberuehrt bleiben. --------------------------------------------------------------- */ /* --- A) Raster: Textblock fuellt die Breite der Elementor-Sektion --- Die Bloecke der Startseite laufen mit "Ueber Content hinaus" (.outer-content). Dort setzt das Bestandsraster die Textspalte auf 55 % und schiebt sie 120 px nach unten; beides gilt nur fuer die Bild-Text-Variante. Fuer reine Textbloecke wird die Spalte wieder voll und randlos, die Breite steuern die Maximalbreiten weiter unten. */ .modul-container-inner.outer-content .widget-text:not(.image) .text-container { width: 100%; padding-top: 0; padding-left: 0; padding-right: 0; } /* Unter 1220 px uebernimmt der Textblock das Seitenmass des Modulrasters, sonst wuerde der Text auf Tablet und Handy am Bildschirmrand kleben. */ @media screen and (max-width: 1219px) { .modul-container-inner.outer-content .widget-text:not(.image) .text-container { padding-left: calc(15.6px + 6.525vw); padding-right: calc(15.6px + 6.525vw); } } /* --- B) Topline: Vollkorn 500, 20 px, Laufweite 1 px, Zeile 22 px --- */ .modul-container .widget-text:not(.image) .text-container p.topline { color: #E4B2A8; letter-spacing: 1px; line-height: 1.1; } /* --- C) Headline H2: 28 -> 50 px, Zeile 34 -> 57 px, 50 px Luft nach unten --- */ .modul-container .widget-text:not(.image) .text-container h2:not(.handwrit) { color: #154037; font-size: calc(28px + 22 * (100vw - 390px) / 1210); line-height: calc(34px + 23 * (100vw - 390px) / 1210); margin-bottom: calc(35px + 15 * (100vw - 390px) / 1210); } @media screen and (max-width: 390px) { .modul-container .widget-text:not(.image) .text-container h2:not(.handwrit) { font-size: 28px; line-height: 34px; margin-bottom: 35px; } } @media screen and (min-width: 1600px) { .modul-container .widget-text:not(.image) .text-container h2:not(.handwrit) { font-size: 50px; line-height: 57px; margin-bottom: 50px; } } /* --- D) Fliesstext: 13/28 -> 15/30 px, 30 px zwischen den Absaetzen --- Schriftgroesse und Laufweite (.07em = 1,05 px bei 15 px) stimmen im Bestand schon, nur Zeilenhoehe auf Handy und Absatzabstand fehlen. */ .modul-container .widget-text:not(.image) .text-container p:not(.topline) { color: #1B4039; line-height: calc(28px + 2 * (100vw - 390px) / 1210); margin-bottom: 30px; } @media screen and (max-width: 390px) { .modul-container .widget-text:not(.image) .text-container p:not(.topline) { line-height: 28px; } } @media screen and (min-width: 1600px) { .modul-container .widget-text:not(.image) .text-container p:not(.topline) { line-height: 30px; } } /* Letztes Element ohne Abstand nach unten, damit der Block sauber auf dem Abstand der naechsten Sektion sitzt. */ .modul-container .widget-text:not(.image) .text-container .inner > *:last-child { margin-bottom: 0; } /* --- E) Zentrierte Intros: Headline max. 1008 px, Text max. 1003 px --- */ .modul-container .widget-text:not(.image) .text-container.center .inner > * { margin-left: auto; margin-right: auto; } .modul-container .widget-text:not(.image) .text-container.center .inner h2 { max-width: 1008px; } .modul-container .widget-text:not(.image) .text-container.center .inner p:not(.topline) { max-width: 1003px; } /* --- F) Linksbuendige Intros (Angebote & Arrangements) --- Headline darf bis 1075 px laufen, damit "EUREN NAECHSTEN FAMILIENURLAUB" wie im Entwurf in der zweiten Zeile steht; der Fliesstext bleibt bei 960 px. */ .modul-container .widget-text:not(.image) .text-container.left .inner h2 { max-width: 1075px; } .modul-container .widget-text:not(.image) .text-container.left .inner p:not(.topline) { max-width: 960px; } /* --- G) Handschrift-Banner: Schrift zurueck auf die Handschrift --- Block 7 stellt .modul-container h3 auf Brother 1816 in Versalien um und trifft dabei auch die Handschrift-Zeile des Banners (gleiche Spezifitaet, spaeter in der Datei). Das gilt fuer ALLE Seiten mit diesem Modul und wird hier zurueckgedreht. */ .modul-container .widget-handwrit-image h3 { font-family: MaradonaSignatureRegular, cursive; font-weight: 400; text-transform: none; letter-spacing: 0; color: #FFFFFF; } /* --- H) Handschrift-Banner in der neuen Optik (Schalter "Neue Optik") --- Bild volle Breite, Banner 450 -> 670 px hoch, Inhalt senkrecht zentriert, Handschrift 24 -> 50 px auf 60 -> 100 px Zeile, Logo 28 -> 64 px. Ohne den Schalter bleibt alles wie bisher. */ .widget-handwrit-image.nwr-handwrit { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(450px + 220 * (100vw - 390px) / 1210); } @media screen and (max-width: 390px) { .widget-handwrit-image.nwr-handwrit { min-height: 450px; } } @media screen and (min-width: 1600px) { .widget-handwrit-image.nwr-handwrit { min-height: 670px; } } .widget-handwrit-image.nwr-handwrit h3 { font-size: calc(24px + 26 * (100vw - 390px) / 1210); line-height: calc(60px + 40 * (100vw - 390px) / 1210); margin: 0 auto calc(30px + 8 * (100vw - 390px) / 1210); } @media screen and (max-width: 390px) { .widget-handwrit-image.nwr-handwrit h3 { font-size: 24px; line-height: 60px; margin-bottom: 30px; } } @media screen and (min-width: 1600px) { .widget-handwrit-image.nwr-handwrit h3 { font-size: 50px; line-height: 100px; margin-bottom: 38px; } } .widget-handwrit-image.nwr-handwrit .la-icon, .widget-handwrit-image.nwr-handwrit .la-icon-img { display: block; width: calc(28px + 36 * (100vw - 390px) / 1210); height: calc(28px + 36 * (100vw - 390px) / 1210); padding: 0; margin: 0 auto; } .widget-handwrit-image.nwr-handwrit .la-icon-img { height: auto; } @media screen and (max-width: 390px) { .widget-handwrit-image.nwr-handwrit .la-icon, .widget-handwrit-image.nwr-handwrit .la-icon-img { width: 28px; height: 28px; } .widget-handwrit-image.nwr-handwrit .la-icon-img { height: auto; } } @media screen and (min-width: 1600px) { .widget-handwrit-image.nwr-handwrit .la-icon, .widget-handwrit-image.nwr-handwrit .la-icon-img { width: 64px; height: 64px; } .widget-handwrit-image.nwr-handwrit .la-icon-img { height: auto; } } /* --- 15) Gelayerte Bilder + Text: Feinschliff, Reihen-Layout, Bildwechsel --- */ /* * Ergaenzt den Platzhalter-Abschnitt "Gelayerte Bilder + Text (.nwr-layered)" * weiter oben in dieser Datei. Nichts darin wird umgeschrieben, alle Regeln * hier sind spezifischer und ueberschreiben gezielt die build.min.css. * * Alle Masse stammen aus dem Figma-Desktop-Frame (1600 px breit, Inhalt * 1216 px, Seitenrand 192 px) und sind in Prozent der jeweiligen Elternbreite * umgerechnet. Dadurch sieht die Sektion in jeder Fensterbreite gleich aus, * ohne dass fuer jede Stufe eigene Pixelwerte noetig sind. * * Figma-Grundmass der ueberlappenden Variante: * Bildblock 539 px (44,33 % von 1216), Textspalte 677 px (55,67 %) * hinteres Foto 426 px, 113 px nach innen versetzt (79,03 % / 20,97 % von 539) * vorderes Foto 425 px an der Aussenkante, 121 px Ueberlappung (-22,45 %) */ /* --- 1) Typografie im Modul (Design-System 2026) ------------------------ */ /* Topline und H2 kommen aus dem gemeinsamen Block weiter oben, hier nur die Abstaende aus dem Figma: Topline 35 px unter sich, H2 56 px. */ .widget-text.nwr-layered .topline { margin-bottom: 1.75em; } .widget-text.nwr-layered h2:not(.handwrit) { margin-bottom: 1.12em; } /* Subline H3: Brother Book, Versalien, 30 px bei 1600 px */ .widget-text.nwr-layered h3 { font-family: var(--nwr-font-sans-book); font-weight: 400; color: var(--nwr-green); text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.2; margin: 0 0 1em; font-size: calc(20px + 10 * (100vw - 390px) / 1210); } @media screen and (max-width: 390px) { .widget-text.nwr-layered h3 { font-size: 20px; } } @media screen and (min-width: 1600px) { .widget-text.nwr-layered h3 { font-size: 30px; } } /* Fliesstext: 13/26 auf dem Handy, 15/30 ab 1600 px */ .widget-text.nwr-layered .text-container p:not(.topline) { font-family: var(--nwr-font-sans-book); font-weight: 400; color: var(--nwr-green-text); letter-spacing: 0.07em; line-height: 2; margin: 0; font-size: calc(13px + 2 * (100vw - 390px) / 1210); } @media screen and (max-width: 390px) { .widget-text.nwr-layered .text-container p:not(.topline) { font-size: 13px; } } @media screen and (min-width: 1600px) { .widget-text.nwr-layered .text-container p:not(.topline) { font-size: 15px; } } /* Mehrere Absaetze bekommen einen Abstand, ein einzelner nicht (der Abstand zum Button steckt schon in .more-button). */ .widget-text.nwr-layered .text-container p:not(.topline) + p:not(.topline) { margin-top: 1em; } /* --- 2) Bildblock: Ueberlappung nach Figma ------------------------------ */ /* Das vordere Foto laeuft ab hier im Textfluss mit (negativer Abstand statt absoluter Position). Dadurch waechst der Bildblock mit und das Foto ragt nicht mehr in die naechste Sektion. */ .modul-container-inner .widget-text.nwr-layered.image .image-container .image-container-inner .two { width: 79.03%; margin-left: 20.97%; display: block; } .modul-container-inner .widget-text.nwr-layered.image .image-container .image-container-inner .one { position: relative; z-index: 3; display: block; width: 78.85%; top: auto; left: auto; margin: -22.45% 0 0 0; } /* Die Innenabstaende der alten Bildspalte fallen weg - Versatz und Ueberlappung stecken jetzt komplett in den Prozentwerten oben. Gilt in jeder Breite, damit der Bildblock auch auf dem Handy die volle Inhaltsbreite nutzt. */ .modul-container-inner .widget-text.nwr-layered.image .image-container { padding-right: 0; padding-left: 0; padding-bottom: 0; } /* Eine im Textblock verankerte Grafik darf ueber den Inhalt hinausragen, aber niemals die Seite breiter machen (sonst entsteht auf mittleren Breiten ein waagerechter Rollbalken). */ .modul-container.nwr-has-text-grafik { overflow: hidden; } @media (min-width: 768px) { .modul-container-inner .widget-text.nwr-layered.image .image-container { width: 44.33%; } .modul-container-inner .widget-text.nwr-layered.image .text-container { width: 55.67%; } .modul-container-inner .widget-text.nwr-layered.image.left .text-container { padding-left: 11.92%; padding-right: 0; } .modul-container-inner .widget-text.nwr-layered.image.right .text-container { padding-right: 11.92%; padding-left: 0; } } /* Zwischenbreiten: der Abstand zwischen Bildern und Text darf schrumpfen, sonst wird die Textspalte zu schmal fuer die grossen Headlines. */ @media (min-width: 768px) and (max-width: 1199px) { .modul-container-inner .widget-text.nwr-layered.image.left .text-container { padding-left: 6%; } .modul-container-inner .widget-text.nwr-layered.image.right .text-container { padding-right: 6%; } } /* --- 3) Bilder nebeneinander (Bild-Anordnung "Nebeneinander") ----------- */ /* Reihenfolge: "Bild (front)" links, "Bild (back)" rechts. Figma-Mass Appartements: 255 px + 60 px Abstand + 476 px = 791 px Bildblock (65,05 % von 1216), Textspalte 425 px (34,95 %). */ @media (min-width: 768px) { .modul-container-inner .widget-text.nwr-layered.layout-row .image-container { width: 65.05%; } .modul-container-inner .widget-text.nwr-layered.layout-row .text-container { width: 34.95%; } .modul-container-inner .widget-text.nwr-layered.layout-row.left .text-container { padding-left: 4.7%; } .modul-container-inner .widget-text.nwr-layered.layout-row.right .text-container { padding-right: 4.7%; } .modul-container-inner .widget-text.nwr-layered.layout-row .image-container .image-container-inner { display: flex; flex-wrap: nowrap; align-items: flex-start; } .modul-container-inner .widget-text.nwr-layered.layout-row.layout-row-bottom .image-container .image-container-inner { align-items: flex-end; } .modul-container-inner .widget-text.nwr-layered.layout-row .image-container .image-container-inner .one { order: 1; position: relative; z-index: 1; width: 32.24%; margin: 0 7.59% 0 0; } .modul-container-inner .widget-text.nwr-layered.layout-row .image-container .image-container-inner .two { order: 2; width: 60.18%; margin: 0; } } /* Tablet: Bilder ueber die volle Breite, Text darunter. Zwei Fotos plus Textspalte nebeneinander sind unter 1024 px nicht mehr lesbar. */ @media (min-width: 768px) and (max-width: 1023px) { .modul-container-inner .widget-text.nwr-layered.layout-row { flex-wrap: wrap; } .modul-container-inner .widget-text.nwr-layered.layout-row .image-container, .modul-container-inner .widget-text.nwr-layered.layout-row .text-container { width: 100%; } .modul-container-inner .widget-text.nwr-layered.layout-row.left .text-container, .modul-container-inner .widget-text.nwr-layered.layout-row.right .text-container { padding-left: 0; padding-right: 0; padding-top: 40px; } } /* Handy: Fotos untereinander, kleines Foto links, grosses Foto rechts angeschnitten - wie auf der bisherigen Seite. */ @media (max-width: 767px) { .modul-container-inner .widget-text.nwr-layered.layout-row .image-container .image-container-inner { display: flex; flex-direction: column; } .modul-container-inner .widget-text.nwr-layered.layout-row .image-container .image-container-inner .one { order: 1; align-self: flex-start; position: relative; z-index: 1; width: 70%; margin: 0; } .modul-container-inner .widget-text.nwr-layered.layout-row .image-container .image-container-inner .two { order: 2; align-self: flex-end; display: block; width: 88%; margin: 24px 0 0 0; } } /* --- 4) Bildwechsel (weiche Ueberblendung) ------------------------------ */ /* * Aufbau: das Grundbild bleibt im Textfluss und bestimmt die Groesse, die * Wechselfotos liegen deckungsgleich darueber. Ohne JavaScript ist genau das * Grundbild sichtbar. refresh-2026.js setzt .is-running auf den Stapel und * wandert dann mit .is-active durch die Fotos. */ .widget-text.nwr-layered .nwr-sequence { position: relative; display: block; } .widget-text.nwr-layered .nwr-sequence > img { display: block; width: 100%; } /* Das Grundbild bleibt im Fluss und bestimmt die Groesse. position: relative nur, damit das Skript ihm beim Zurueckwechseln einen z-index geben kann. */ .widget-text.nwr-layered .nwr-sequence > .nwr-seq-base { position: relative; z-index: 1; } .widget-text.nwr-layered .nwr-sequence > .nwr-seq-frame { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; z-index: 2; } /* Sobald das Skript uebernimmt, ist genau das Bild mit .is-active sichtbar. Die Reihenfolge der beiden Regeln ist wichtig: die zweite muss gewinnen. */ .widget-text.nwr-layered .nwr-sequence.is-running > .nwr-seq-base { opacity: 0; } .widget-text.nwr-layered .nwr-sequence.is-running > img.is-active, .widget-text.nwr-layered .nwr-sequence > img.is-active { opacity: 1; } .widget-text.nwr-layered .nwr-sequence.is-running > img { transition: opacity 900ms ease-in-out; transition-duration: var(--nwr-seq-fade, 900ms); } @media (prefers-reduced-motion: reduce) { .widget-text.nwr-layered .nwr-sequence.is-running > img { transition: none; } } /* --- 5) Grafik am Textblock (Grafik gehoert zu "Textblock") ------------- */ .widget-text.nwr-layered .text-container.nwr-grafik-text { position: relative; } .widget-text.nwr-layered .text-container.nwr-grafik-text > .grafik { position: absolute; z-index: 4; width: 100%; height: auto; pointer-events: none; } /* Auf Smartphones verschwindet die animierte Grafik (wie im Bildblock auch). */ @media (max-width: 767px) { .widget-text.nwr-layered .text-container.nwr-grafik-text > .grafik { display: none; } } /* Standbild fuer Smartphones: steht unter dem Text, nur unter 768 px sichtbar. */ .widget-text.nwr-layered .nwr-grafik-mobile { display: none; } @media (max-width: 767px) { .widget-text.nwr-layered .nwr-grafik-mobile { display: block; width: 100%; max-width: 45%; height: auto; margin: 35px auto 0 0; } } /* --- 6) Die drei Sektionen der Startseite ------------------------------- */ /* * Die Klassen kommen aus dem Feld "CSS-Klassen" des jeweiligen Widgets * (Reiter Erweitert). Sie halten die Abstimmung auf das Figma an EINER * Stelle, ohne die allgemeinen Modul-Regeln zu verbiegen. */ @media (min-width: 768px) { /* All-inclusive / Huhn: Topline startet 272 px unter der Oberkante des hinteren Fotos (22,37 % von 1216). */ .nwr-sec-allinclusive .widget-text.nwr-layered.image .text-container { padding-top: 22.37%; } /* Kulinarik: Text startet 329 px unter der Oberkante des hinteren Fotos, Textspalte 603 px breit (Figma), deshalb nur 74 px Innenabstand. */ .nwr-sec-kulinarik .widget-text.nwr-layered.image .text-container { padding-top: 27.06%; } .nwr-sec-kulinarik .widget-text.nwr-layered.image.right .text-container { padding-right: 6.09%; } /* Appartements: Text startet 70 px unter der Oberkante der Fotos. */ .nwr-sec-appartements .widget-text.nwr-layered.image .text-container { padding-top: 5.76%; } } @media (min-width: 768px) and (max-width: 1199px) { /* Auf Zwischenbreiten weniger Vorlauf, sonst rutscht der Text zu tief. */ .nwr-sec-allinclusive .widget-text.nwr-layered.image .text-container { padding-top: 14%; } .nwr-sec-kulinarik .widget-text.nwr-layered.image .text-container { padding-top: 16%; } } /* Appartements: die beiden Fotos sind im Figma unterschiedlich beschnitten (255x340 und 476x472). Das Seitenverhaeltnis erzwingt denselben Schnitt unabhaengig von der Bilddatei. */ .nwr-sec-appartements .widget-text.nwr-layered.layout-row .image-container .image-container-inner .one { aspect-ratio: 255 / 340; object-fit: cover; } .nwr-sec-appartements .widget-text.nwr-layered.layout-row .image-container .image-container-inner .two { aspect-ratio: 476 / 472; object-fit: cover; } /* --- 13c) Textbox mobil: alles linksbuendig (Topline, Headline, Copy, Button) --- */ @media screen and (max-width: 767px) { .nwr-fullimage .nwr-fullimage-box .inner, .nwr-fullimage .nwr-fullimage-box .inner h2, .nwr-fullimage .nwr-fullimage-box .inner p { text-align: left; } } /* --- 4a) Angebots-Kacheln: Subpixel-Luecken zwischen den Drittel-Kacheln schliessen (Bild ueberlappt 1 px) --- */ .nwr-angebote .swiper-slide .item img { width: calc(100% + 1px); max-width: none; } /* --- 15b) Gelayerte Bilder: Stapelung Bildwechsel + Reihen-Layout nach Figma --- */ /* * Ergaenzt Block 15. Nichts dort wird umgeschrieben, alle Regeln hier sind * spezifischer oder betreffen Eigenschaften, die Block 15 nicht setzt. * * Zwei Befunde vom 10.09.2026: * * A) "All-inclusive Premium": der Bildwechsel lag ueber dem Pool-Foto. * Ursache: .nwr-sequence ist zwar position:relative, hat aber z-index:auto * und bildet damit KEINEN eigenen Stapelkontext. Die Wechselfotos darin * bekommen von refresh-2026.js einen Inline-z-index (3, 4, 5, 6 ... immer * weiter steigend). Diese Werte wirken deshalb im Stapelkontext der * Bildspalte und schlagen das vordere Foto .one (z-index 3). Ein hoeherer * fester z-index auf .one hilft nicht, weil der Zaehler im Skript nach * oben offen ist. Loesung: .nwr-sequence bekommt einen eigenen * Stapelkontext, dann bleiben die Skript-Werte im Bildwechsel eingesperrt. * * B) "Zimmer & Appartements": Fotos und Textspalte zu klein. * Ursache liegt nicht im Modul, sondern im Elementor-Wrapper f012dad: * er ist auf "boxed 1220 px" gestellt. .modul-container-inner setzt darin * noch einmal 190 px Innenabstand je Seite, also bleiben fuer .widget-text * nur 1220 - 380 = 840 px statt der 1220 px aus dem Figma. Behoben wird * das im Wrapper (elements/f012dad.patch.json). Hier stehen nur die * Feinmasse, die danach exakt aufs Figma passen. */ /* --- A) Bildwechsel: eigener Stapelkontext ----------------------------- */ /* * isolation:isolate erzeugt einen Stapelkontext, ohne den z-index des * Stapels selbst zu veraendern. Das ist wichtig, weil .nwr-sequence je nach * Einstellung "Bildwechsel auf" entweder das hintere Bild (.two, z-index * auto) oder das vordere Bild (.one, z-index 3 bzw. 1 im Reihen-Layout) ist. * Beide Faelle bleiben dadurch richtig gestapelt. */ .widget-text.nwr-layered .nwr-sequence { isolation: isolate; } /* * Rueckfallebene fuer Browser ohne isolation: das hintere Bild bekommt einen * eigenen z-index. Ein positioniertes Element mit z-index:0 bildet in jedem * Browser einen Stapelkontext und liegt weiterhin unter .one * (z-index 3 in der Ueberlappung, z-index 1 im Reihen-Layout). */ .widget-text.nwr-layered .nwr-sequence.two { z-index: 0; } /* * Sicherheitsnetz fuer die Ueberlappung: das vordere Foto liegt ueber dem * hinteren Bildstapel, egal in welcher Phase der Bildwechsel gerade ist. * Der Wert ist bewusst niedriger als der der Grafik (z-index 4), damit die * Huhn-Grafik weiter vorne bleibt. */ .modul-container-inner .widget-text.nwr-layered.image .image-container .image-container-inner > .one { position: relative; z-index: 3; } /* --- B1) Reihen-Layout: Masse exakt nach Figma ------------------------- */ /* * Figma-Rechnung (Desktop-Frame 1600 px, Inhalt 1220 px ab x 190): * kleines Foto 257 px -> x 190 ... 447 * Abstand 60 px * grosses Foto 476 px -> x 507 ... 983 * Textspalte 427 px -> x 983 ... 1410 (= 190 + 1220) * * Bildblock = 257 + 60 + 476 = 793 px * Bildblock 793 / 1220 = 65,000 % * Textspalte 427 / 1220 = 35,000 % (Summe 100 %) * * Innerhalb des Bildblocks (793 px): * kleines Foto 257 / 793 = 32,408 % * Abstand 60 / 793 = 7,567 % * grosses Foto 476 / 793 = 60,025 % (Summe 100,000 %) * * Innenabstand der Textspalte: 60 / 1220 = 4,918 % * (Prozentwerte fuer padding beziehen sich auf .widget-text = 1220 px.) */ @media (min-width: 768px) { .modul-container-inner .widget-text.nwr-layered.layout-row .image-container { width: 65%; } .modul-container-inner .widget-text.nwr-layered.layout-row .text-container { width: 35%; } .modul-container-inner .widget-text.nwr-layered.layout-row.left .text-container { padding-left: 4.918%; } .modul-container-inner .widget-text.nwr-layered.layout-row.right .text-container { padding-right: 4.918%; } .modul-container-inner .widget-text.nwr-layered.layout-row .image-container .image-container-inner .one { width: 32.408%; margin-right: 7.567%; } .modul-container-inner .widget-text.nwr-layered.layout-row .image-container .image-container-inner .two { width: 60.025%; } } /* Beschnitt der beiden Appartement-Fotos: 257x340 und 476x472 aus dem Figma. */ .nwr-sec-appartements .widget-text.nwr-layered.layout-row .image-container .image-container-inner .one { aspect-ratio: 257 / 340; } /* --- B2) Intro-Text der Appartements auf Figma-Breite ------------------ */ /* * .text-container.center bekommt aus build.min.css 130 px Innenabstand je * Seite. Bei 1220 px Textbreite blieben davon 960 px Text uebrig, das Figma * zeigt aber 1005 px (Headline 1008, Absatz 1003). * (1220 - 1005) / 2 = 107,5 px -> 107,5 / 1220 = 8,81 % * Als Prozentwert waechst der Abstand mit der Breite mit, unter 1200 px * bleibt der bisherige fluide Wert stehen. * Der Selektor haengt an der Elementor-ID des Wrappers und wirkt damit nur * auf dieser einen Seite. Unterseiten bleiben unberuehrt. */ @media (min-width: 1200px) { .elementor-element-f012dad .widget-text:not(.image) .text-container.center { padding-left: 8.81%; padding-right: 8.81%; } } /* --- C) Die uebrigen Intro-Textbloecke der Startseite ------------------ * * Gleiche Ursache wie B2, nur an anderen Stellen: der Elementor-Wrapper * schnuert den Textblock ein, danach zieht .modul-container-inner noch * einmal seine 190 px Innenabstand je Seite ab. * * Behoben wird das dort, wo es entsteht: * nwrtx04 (Kulinarik) Der Wrapper 6feb4fd hatte 16 px Innenabstand links * und rechts, jetzt 0. Die Sektion ist damit 1600 * statt 1568 px breit. * nwrtx05 (Angebote) Der Wrapper 6c5de3c war 1224 px breit, jetzt 100 %. * Der Textblock beginnt danach bei x 190 wie im * Figma. Die Deckel aus Block 14 F (Headline 1075 px, * Fliesstext 960 px) greifen von selbst, deshalb * steht hier keine eigene Regel fuer nwrtx05. * nwrtx01 (Willkommen) sitzt als einziges Intro in einer Sektion mit * fester Inhaltsbreite 1216 px, zusammen mit dem * Fullscreen-Modul. Die Sektion bleibt unangetastet, * damit Reihenfolge und Abstaende zum Fullscreen- * Modul erhalten bleiben. Stattdessen wird nur bei * diesem einen Widget der Innenabstand von * .modul-container-inner um genau den Betrag * verkleinert, den die Sektion links und rechts * wegnimmt, also um (100vw - 1216px) / 2: * Theme-Wert calc(22.6px + 10.4625vw) * minus (100vw - 1216px) / 2 * ergibt calc(630.6px - 39.5375vw) * max(0px, ...) faengt den negativen Bereich ab rund * 1595 px Fensterbreite ab. Damit ist .widget-text * genauso breit wie bei nwrtx02 und nwrtx06 * (1600 px: 1216 statt 1220, 1280 px: 967 = exakt * derselbe Wert). * * Danach gilt fuer alle zentrierten Intros dieselbe Rechnung wie in B2: * (1220 - 1005) / 2 = 107,5 px -> 107,5 / 1220 = 8,81 % * Erst ab 1200 px. Darunter bleibt der bisherige fluide Wert stehen, Tablet * und Handy sehen also aus wie vorher. * Alle Selektoren haengen an der Elementor-ID des jeweiligen Widgets und * wirken damit nur auf der Startseite. DE 17553 und EN 18775 tragen die * gleichen IDs, eine Regel deckt beide Sprachen ab. Unterseiten benutzen * diese IDs nicht und bleiben unberuehrt. * ------------------------------------------------------------------- */ @media (min-width: 1200px) { .elementor-element-nwrtx01 .modul-container-inner { padding-left: max(0px, calc(630.6px - 39.5375vw)); padding-right: max(0px, calc(630.6px - 39.5375vw)); } .elementor-element-nwrtx01 .widget-text:not(.image) .text-container.center, .elementor-element-nwrtx02 .widget-text:not(.image) .text-container.center, .elementor-element-nwrtx04 .widget-text:not(.image) .text-container.center, .elementor-element-nwrtx06 .widget-text:not(.image) .text-container.center { padding-left: 8.81%; padding-right: 8.81%; } } /* Nachtrag zu C, aus der Messung direkt nach dem Einbau: * * 1) nwrtx04 wurde nach dem Wrapper-Patch nur noch 1383 statt 1600 px breit. * Grund: der innere Wrapper 4eea1c7 steht auf "Elemente zentrieren" * (align-items: center). Ein Flex-Kind ohne eigene Breite bekommt dann * seine Inhaltsbreite, und in dieser Rechnung zaehlen prozentuale * Innenabstaende als 0. Der 8,81-%-Abstand von oben faellt dabei weg, * uebrig bleiben 1008 px Headline plus 2 x 190 px Innenabstand des * Moduls = 1388 px. Eine feste Breite von 100 % nimmt das Widget aus * dieser Rechnung heraus. Dieselbe Falle steckt im Wrapper 6c5de3c * (nwrtx05, siehe Punkt 2), deshalb stehen beide Widgets in einer * Regel. Nur diese beiden, nur ab 1200 px, unter 1200 px war die * Breite ohnehin schon voll ausgeschoepft. * * 2) nwrtx05: Block 14 F erlaubt der Headline 1075 px, damit sie wie im * Entwurf zweizeilig steht (Figma-Textrahmen 1072 px ab x 192). Die * Textspalte war dafuer zu schmal, weil .text-container.left aus * build.min.css 260 px Innenabstand rechts mitbringt: 1220 - 260 = 960. * 145 px reichen: 1220 - 145 = 1075. Als Prozentwert 145 / 1220 * = 11,885 %, damit er unter 1600 px mitwaechst. Der Fliesstext bleibt * bei seinen 960 px aus Block 14 F. */ @media (min-width: 1200px) { .elementor-element-4eea1c7 .elementor-element-nwrtx04, .elementor-element-6c5de3c .elementor-element-nwrtx05 { width: 100%; } .elementor-element-nwrtx05 .widget-text:not(.image) .text-container.left { padding-right: 11.885%; } } /* --- 12b) Instagram-Reels auf der Seite abspielen --- Ergaenzt Block 12: Reel-Kacheln, deren Video beim Import in die Mediathek gewandert ist, sind keine Verlinkung mehr, sondern eine Schaltflaeche (.nwr-insta-play) mit Standbild,