/* ========================================================== HAUS MOHNBLUME MODERNE STARTSEITE 2026 ========================================================== */ /* ---------------------------------------------------------- BASIS ---------------------------------------------------------- */ body.hm-home-2026 { margin: 0; color: #31424c; background: #ffffff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; } body.hm-home-2026 .hm-home, body.hm-home-2026 .hm-home-article, body.hm-home-2026 .hm-home-content { width: 100%; max-width: none; margin: 0; padding: 0; } /* ========================================================== HEADER ÜBER DEM HERO ========================================================== */ body.hm-home-2026 #headerGrid.hm-home-header { position: absolute; z-index: 100; top: 0; left: 0; width: 100%; padding: 0; background: linear-gradient( 180deg, rgba(17, 33, 41, 0.48) 0%, rgba(17, 33, 41, 0.13) 68%, rgba(17, 33, 41, 0) 100% ); border: 0; box-shadow: none; } body.hm-home-2026 #headerGrid .hm-home-header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 112px; } body.hm-home-2026 #headerGrid #logo { position: relative; z-index: 1005; float: none; } body.hm-home-2026 #headerGrid #logo img { display: block; max-width: 230px; height: auto; } body.hm-home-2026 #navigation { float: none; margin-left: auto; } body.hm-home-2026 #navigation ul.menu li a { color: #ffffff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); } /* ========================================================== HERO ========================================================== */ body.hm-home-2026 .hm-home-hero { position: relative; min-height: 92vh !important; margin: 0 !important; display: flex; align-items: center; } /* ---------------------------------------------------------- HERO OVERLAY Heller Verlauf nur auf der linken Textseite. Die sonnige Landschaft rechts bleibt fast unverändert. ---------------------------------------------------------- */ body.hm-home-2026 .hm-home-hero .wp-block-cover__background { opacity: 1 !important; background: linear-gradient( 90deg, rgba(18, 48, 58, 0.50) 0%, rgba(18, 48, 58, 0.38) 26%, rgba(18, 48, 58, 0.20) 43%, rgba(18, 48, 58, 0.08) 57%, rgba(18, 48, 58, 0.02) 68%, rgba(18, 48, 58, 0) 78% ) !important; } body.hm-home-2026 .hm-home-hero .wp-block-cover__image-background { object-fit: cover; object-position: center center; } /* ---------------------------------------------------------- HERO POSITION / RÄNDER ---------------------------------------------------------- */ body.hm-home-2026 .hm-home-hero .wp-block-cover__inner-container { position: relative; z-index: 5; box-sizing: border-box; width: 100% !important; max-width: 1480px !important; margin-left: auto !important; margin-right: auto !important; padding-top: clamp(150px, 15vh, 195px) !important; padding-right: clamp(50px, 7vw, 120px) !important; padding-bottom: clamp(70px, 9vh, 115px) !important; padding-left: clamp(65px, 7vw, 120px) !important; } body.hm-home-2026 .hm-home-hero-copy { max-width: 760px; } /* ---------------------------------------------------------- EYEBROW ---------------------------------------------------------- */ body.hm-home-2026 .hm-home-eyebrow { margin: 0 0 20px; color: rgba(255, 255, 255, 0.90); font-size: 12px; line-height: 1.3; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.32); } /* ---------------------------------------------------------- HERO HEADLINE ---------------------------------------------------------- */ body.hm-home-2026 .hm-home-hero h1 { max-width: 760px; margin: 0 0 25px; color: #ffffff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: clamp(48px, 6vw, 82px); line-height: 1.02; font-weight: 500; letter-spacing: -0.045em; text-transform: none; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.20), 0 1px 3px rgba(0, 0, 0, 0.28); } /* ---------------------------------------------------------- HERO INTRO ---------------------------------------------------------- */ body.hm-home-2026 .hm-home-hero-lead { max-width: 670px; margin: 0 0 33px; color: rgba(255, 255, 255, 0.96); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.65; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.32); } /* ========================================================== HERO BUTTONS ========================================================== */ body.hm-home-2026 .hm-home-hero .wp-block-buttons { display: flex; gap: 12px; margin-bottom: 38px; } body.hm-home-2026 .hm-home-hero .wp-block-button__link { padding: 13px 22px; border-radius: 4px; font-size: 14px; font-weight: 650; text-decoration: none; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } body.hm-home-2026 .hm-home-hero-primary .wp-block-button__link { color: #ffffff; background: #176598; border: 1px solid #176598; } body.hm-home-2026 .hm-home-hero-primary .wp-block-button__link:hover { color: #ffffff; background: #0f517e; border-color: #0f517e; transform: translateY(-1px); } body.hm-home-2026 .hm-home-hero-secondary .wp-block-button__link { color: #ffffff; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.70); } body.hm-home-2026 .hm-home-hero-secondary .wp-block-button__link:hover { color: #243846; background: #ffffff; border-color: #ffffff; } /* ========================================================== HERO FAKTEN ========================================================== */ body.hm-home-2026 .hm-home-hero-facts { display: flex; flex-wrap: wrap; gap: 10px 24px; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.32); } body.hm-home-2026 .hm-home-hero-facts span { position: relative; color: rgba(255, 255, 255, 0.88); font-size: 13px; font-weight: 500; } body.hm-home-2026 .hm-home-hero-facts span:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -13px; width: 3px; height: 3px; margin-top: -1px; background: rgba(255, 255, 255, 0.60); border-radius: 50%; } /* ========================================================== EDITORIAL STORY ========================================================== */ body.hm-home-2026 .hm-home-story { padding: clamp(80px, 9vw, 135px) 30px; background: #ffffff; } body.hm-home-2026 .hm-home-story-inner { max-width: 1240px; margin: 0 auto; align-items: center; gap: clamp(45px, 7vw, 100px); } body.hm-home-2026 .hm-home-story-image { margin: 0; } body.hm-home-2026 .hm-home-story-image img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; box-shadow: 0 18px 50px rgba(31, 49, 59, 0.12); } body.hm-home-2026 .hm-home-story-copy { max-width: 510px; } body.hm-home-2026 .hm-home-section-label { margin: 0 0 17px; color: #176598; font-size: 11px; line-height: 1.3; font-weight: 750; letter-spacing: 0.16em; text-transform: uppercase; } body.hm-home-2026 .hm-home-story h2 { margin: 0 0 25px; color: #263944; font-size: clamp(38px, 4vw, 58px); line-height: 1.08; font-weight: 500; letter-spacing: -0.035em; text-transform: none; } body.hm-home-2026 .hm-home-story p { color: #5b6b74; font-size: 17px; line-height: 1.8; } body.hm-home-2026 .hm-home-text-link a { display: inline-block; margin-top: 7px; color: #176598; font-weight: 650; text-decoration: none; } body.hm-home-2026 .hm-home-text-link a:hover { text-decoration: underline; text-underline-offset: 4px; } /* ========================================================== BENTO ========================================================== */ body.hm-home-2026 .hm-home-bento { padding: clamp(75px, 8vw, 115px) 30px clamp(85px, 9vw, 130px); background: #f5f4f0; } body.hm-home-2026 .hm-home-bento-heading { max-width: 1240px; margin: 0 auto 42px; } body.hm-home-2026 .hm-home-bento-heading h2 { max-width: 760px; margin: 0; color: #263944; font-size: clamp(38px, 4vw, 56px); line-height: 1.08; font-weight: 500; letter-spacing: -0.035em; } /* ---------------------------------------------------------- BENTO GRID ---------------------------------------------------------- */ body.hm-home-2026 .hm-home-bento-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr); grid-template-rows: minmax(250px, 1fr) minmax(250px, 1fr) auto; gap: 18px; max-width: 1240px; margin: 0 auto; } /* ---------------------------------------------------------- GEMEINSAME BENTO-KARTE ---------------------------------------------------------- */ body.hm-home-2026 .hm-bento-card { overflow: hidden; border-radius: 14px; } /* ========================================================== BENTO – NATUR ========================================================== */ body.hm-home-2026 .hm-bento-nature { grid-column: 1; grid-row: 1 / 3; min-height: 560px; } body.hm-home-2026 .hm-bento-nature .wp-block-cover__background { opacity: 1 !important; background: linear-gradient( 180deg, rgba(20, 35, 38, 0.02) 25%, rgba(20, 35, 38, 0.65) 100% ) !important; } body.hm-home-2026 .hm-bento-nature .wp-block-cover__inner-container { align-self: flex-end; padding: 36px; } body.hm-home-2026 .hm-bento-nature h3 { margin: 0 0 8px; color: #ffffff; font-size: 31px; line-height: 1.15; font-weight: 550; } body.hm-home-2026 .hm-bento-nature p { max-width: 520px; margin: 0; color: rgba(255, 255, 255, 0.92); font-size: 15px; line-height: 1.65; } /* ========================================================== BENTO – AKTIV ========================================================== */ body.hm-home-2026 .hm-bento-active { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 35px; background: #dfe9e0; } /* ========================================================== BENTO – RUHE ========================================================== */ body.hm-home-2026 .hm-bento-quiet { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 35px; background: #e9e2d8; } body.hm-home-2026 .hm-bento-active h3, body.hm-home-2026 .hm-bento-quiet h3 { margin: 0 0 10px; color: #263944; font-size: 27px; line-height: 1.15; font-weight: 550; } body.hm-home-2026 .hm-bento-active p, body.hm-home-2026 .hm-bento-quiet p { margin: 0; color: #52636c; font-size: 15px; line-height: 1.65; } /* ========================================================== BENTO – FAKTENLEISTE ========================================================== */ body.hm-home-2026 .hm-bento-facts { grid-column: 1 / 3; grid-row: 3; padding: 28px 32px; background: #263944; border-radius: 14px; } body.hm-home-2026 .hm-bento-facts .wp-block-columns { margin: 0; gap: 0; } body.hm-home-2026 .hm-home-fact { text-align: center; } body.hm-home-2026 .hm-home-fact strong { display: block; margin-bottom: 5px; color: #ffffff !important; font-size: 22px; font-weight: 600; } body.hm-home-2026 .hm-home-fact span { color: #bcc9cf; font-size: 12px; line-height: 1.4; } /* ========================================================== TABLET ========================================================== */ @media only screen and (max-width: 1020px) { body.hm-home-2026 #headerGrid.hm-home-header { background: linear-gradient( 180deg, rgba(17, 33, 41, 0.60) 0%, rgba(17, 33, 41, 0.14) 100% ); } body.hm-home-2026 #headerGrid .hm-home-header-inner { min-height: 90px; } body.hm-home-2026 .hm-home-hero .wp-block-cover__inner-container { padding-top: 135px !important; padding-right: 45px !important; padding-bottom: 65px !important; padding-left: 45px !important; } body.hm-home-2026 .hm-home-bento-grid { grid-template-columns: 1fr 1fr; } body.hm-home-2026 .hm-bento-nature { grid-column: 1 / 3; grid-row: 1; min-height: 500px; } body.hm-home-2026 .hm-bento-active { grid-column: 1; grid-row: 2; } body.hm-home-2026 .hm-bento-quiet { grid-column: 2; grid-row: 2; } body.hm-home-2026 .hm-bento-facts { grid-column: 1 / 3; grid-row: 3; } } /* ========================================================== SMARTPHONE ========================================================== */ @media only screen and (max-width: 700px) { body.hm-home-2026 #headerGrid .hm-home-header-inner { min-height: 76px; } body.hm-home-2026 #headerGrid #logo img { max-width: 190px; } body.hm-home-2026 .hm-home-hero { min-height: 88vh !important; } /* ------------------------------------------------------ Smartphone: etwas mehr Kontrast unten, aber weiterhin deutlich heller als vorher. ------------------------------------------------------ */ body.hm-home-2026 .hm-home-hero .wp-block-cover__background { background: linear-gradient( 180deg, rgba(18, 48, 58, 0.18) 0%, rgba(18, 48, 58, 0.36) 48%, rgba(18, 48, 58, 0.58) 100% ) !important; } body.hm-home-2026 .hm-home-hero .wp-block-cover__inner-container { width: 100% !important; padding-top: 115px !important; padding-right: 24px !important; padding-bottom: 45px !important; padding-left: 24px !important; } body.hm-home-2026 .hm-home-hero h1 { font-size: 43px; letter-spacing: -0.035em; } body.hm-home-2026 .hm-home-hero .wp-block-buttons { display: block; margin-bottom: 27px; } body.hm-home-2026 .hm-home-hero .wp-block-button { width: 100%; margin-bottom: 10px; } body.hm-home-2026 .hm-home-hero .wp-block-button__link { display: block; width: 100%; text-align: center; } body.hm-home-2026 .hm-home-hero-facts { gap: 8px 17px; } /* ------------------------------------------------------ EDITORIAL ------------------------------------------------------ */ body.hm-home-2026 .hm-home-story { padding: 70px 20px; } body.hm-home-2026 .hm-home-story-inner { gap: 38px; } body.hm-home-2026 .hm-home-story h2 { font-size: 38px; } /* ------------------------------------------------------ BENTO ------------------------------------------------------ */ body.hm-home-2026 .hm-home-bento { padding: 65px 20px 75px; } body.hm-home-2026 .hm-home-bento-grid { display: block; } body.hm-home-2026 .hm-bento-card { margin-bottom: 15px; } body.hm-home-2026 .hm-bento-nature { min-height: 430px; } body.hm-home-2026 .hm-bento-active, body.hm-home-2026 .hm-bento-quiet { min-height: 240px; padding: 27px 23px; } body.hm-home-2026 .hm-bento-facts { padding: 26px 20px; } body.hm-home-2026 .hm-home-fact { margin-bottom: 22px; } body.hm-home-2026 .hm-home-fact:last-child { margin-bottom: 0; } } /* ========================================================== BENTO – FEINSCHLIFF 2026 ========================================================== */ /* ---------------------------------------------------------- KARTEN ALLGEMEIN ---------------------------------------------------------- */ body.hm-home-2026 .hm-bento-card { position: relative; transition: transform 0.28s ease, box-shadow 0.28s ease; } @media (hover: hover) { body.hm-home-2026 .hm-bento-card:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(34, 50, 55, 0.11); } } /* ---------------------------------------------------------- KLEINE ÜBERSCHRIFTEN ---------------------------------------------------------- */ body.hm-home-2026 .hm-bento-kicker { margin: 0 0 11px !important; color: #52705f !important; font-size: 10px !important; line-height: 1.3 !important; font-weight: 750 !important; letter-spacing: 0.16em; text-transform: uppercase; } body.hm-home-2026 .hm-bento-kicker-light { color: rgba(255, 255, 255, 0.80) !important; } /* ---------------------------------------------------------- GROSSE NATURKARTE ---------------------------------------------------------- */ body.hm-home-2026 .hm-bento-nature .wp-block-cover__inner-container { padding: 42px !important; } body.hm-home-2026 .hm-bento-nature h3 { font-size: clamp(30px, 3vw, 42px); letter-spacing: -0.025em; } body.hm-home-2026 .hm-bento-nature p { max-width: 570px; } /* ---------------------------------------------------------- TEXTKARTEN ---------------------------------------------------------- */ body.hm-home-2026 .hm-bento-active, body.hm-home-2026 .hm-bento-quiet { position: relative; overflow: hidden; padding: 38px; justify-content: space-between; } body.hm-home-2026 .hm-bento-active { background: linear-gradient( 145deg, #e4eee5 0%, #d8e6dc 100% ); } body.hm-home-2026 .hm-bento-quiet { background: linear-gradient( 145deg, #f0ebe2 0%, #e7ddd0 100% ); } /* ---------------------------------------------------------- GROSSE DEZENTE NUMMERN ---------------------------------------------------------- */ body.hm-home-2026 .hm-bento-number { position: absolute; top: 17px; right: 25px; margin: 0 !important; color: rgba(38, 57, 68, 0.075) !important; font-size: 72px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: -0.06em; pointer-events: none; } body.hm-home-2026 .hm-bento-card-content { position: relative; z-index: 2; margin-top: auto; } /* ---------------------------------------------------------- ÜBERSCHRIFTEN / TEXT ---------------------------------------------------------- */ body.hm-home-2026 .hm-bento-active h3, body.hm-home-2026 .hm-bento-quiet h3 { margin-bottom: 13px; font-size: 30px; letter-spacing: -0.025em; } body.hm-home-2026 .hm-bento-active .hm-bento-card-content > p:not(.hm-bento-kicker):not(.hm-bento-link), body.hm-home-2026 .hm-bento-quiet .hm-bento-card-content > p:not(.hm-bento-kicker):not(.hm-bento-link) { max-width: 430px; color: #53636b; font-size: 15px !important; line-height: 1.68 !important; } /* ========================================================== TEXTLINKS ========================================================== */ body.hm-home-2026 .hm-bento-link { margin: 20px 0 0 !important; } body.hm-home-2026 .hm-bento-link a { display: inline-flex; align-items: center; gap: 9px; color: #295f78 !important; font-size: 13px; font-weight: 650; text-decoration: none !important; } body.hm-home-2026 .hm-bento-link a span { display: inline-block; transition: transform 0.2s ease; } body.hm-home-2026 .hm-bento-link a:hover span { transform: translateX(4px); } body.hm-home-2026 .hm-bento-link-light a { color: #ffffff !important; } /* ========================================================== FAKTENLEISTE ========================================================== */ body.hm-home-2026 .hm-bento-facts { padding-top: 31px; padding-bottom: 31px; background: linear-gradient( 110deg, #263944 0%, #304c54 100% ); } body.hm-home-2026 .hm-bento-facts .wp-block-column { position: relative; } body.hm-home-2026 .hm-bento-facts .wp-block-column:not(:last-child)::after { content: ""; position: absolute; top: 8%; right: 0; width: 1px; height: 84%; background: rgba(255, 255, 255, 0.13); } body.hm-home-2026 .hm-home-fact strong { font-size: 25px; letter-spacing: -0.025em; } body.hm-home-2026 .hm-home-fact span { color: #c7d1d5; font-size: 12px; letter-spacing: 0.02em; } /* ========================================================== TABLET ========================================================== */ @media only screen and (max-width: 1020px) { body.hm-home-2026 .hm-bento-active, body.hm-home-2026 .hm-bento-quiet { min-height: 270px; padding: 30px; } body.hm-home-2026 .hm-bento-number { font-size: 62px !important; } } /* ========================================================== SMARTPHONE ========================================================== */ @media only screen and (max-width: 700px) { body.hm-home-2026 .hm-bento-nature .wp-block-cover__inner-container { padding: 28px !important; } body.hm-home-2026 .hm-bento-active, body.hm-home-2026 .hm-bento-quiet { min-height: 255px; padding: 28px 24px; } body.hm-home-2026 .hm-bento-number { top: 18px; right: 20px; font-size: 58px !important; } body.hm-home-2026 .hm-bento-facts .wp-block-column:not(:last-child)::after { display: none; } body.hm-home-2026 .hm-bento-facts .hm-home-fact { padding-bottom: 19px; border-bottom: 1px solid rgba(255, 255, 255, 0.10); } body.hm-home-2026 .hm-bento-facts .hm-home-fact:last-child { padding-bottom: 0; border-bottom: 0; } } /* ========================================================== STARTSEITEN-NAVIGATION – LISTENPUNKTE ENTFERNEN ========================================================== */ body.hm-home-2026 #navigation ul.menu { margin: 0; padding: 0; list-style: none !important; } body.hm-home-2026 #navigation ul.menu li { list-style: none !important; } body.hm-home-2026 #navigation ul.menu li::marker { content: ""; font-size: 0; } /* ========================================================== BENTO – DESKTOP-GRID KORREKTUR Gutenberg Content-Width überschreiben ========================================================== */ /* ---------------------------------------------------------- BENTO-BEREICH WIRKLICH VOLLE BREITE ---------------------------------------------------------- */ body.hm-home-2026 .hm-home-bento { box-sizing: border-box; width: 100% !important; max-width: none !important; } /* Überschrift und Grid erhalten dieselbe großzügige Breite */ body.hm-home-2026 .hm-home-bento-heading, body.hm-home-2026 .hm-home-bento-grid { box-sizing: border-box; width: min(1240px, calc(100% - 80px)) !important; max-width: 1240px !important; margin-left: auto !important; margin-right: auto !important; } /* ========================================================== ECHTES BENTO-GRID AUF DESKTOP ========================================================== */ body.hm-home-2026 .hm-home-bento-grid { display: grid !important; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.75fr) !important; grid-template-rows: minmax(270px, 1fr) minmax(270px, 1fr) auto !important; grid-template-areas: "nature active" "nature quiet" "facts facts"; gap: 18px !important; align-items: stretch; } /* ---------------------------------------------------------- GRID-POSITIONEN ---------------------------------------------------------- */ body.hm-home-2026 .hm-home-bento-grid .hm-bento-nature { grid-area: nature !important; grid-column: auto !important; grid-row: auto !important; min-width: 0; min-height: 558px; } body.hm-home-2026 .hm-home-bento-grid .hm-bento-active { grid-area: active !important; grid-column: auto !important; grid-row: auto !important; min-width: 0; min-height: 0; } body.hm-home-2026 .hm-home-bento-grid .hm-bento-quiet { grid-area: quiet !important; grid-column: auto !important; grid-row: auto !important; min-width: 0; min-height: 0; } body.hm-home-2026 .hm-home-bento-grid .hm-bento-facts { grid-area: facts !important; grid-column: auto !important; grid-row: auto !important; min-width: 0; } /* ---------------------------------------------------------- GUTENBERG DARF DIE GRID-KINDER NICHT VERENGEN ---------------------------------------------------------- */ body.hm-home-2026 .hm-home-bento-grid > * { width: auto !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } /* ---------------------------------------------------------- NATURKARTE ---------------------------------------------------------- */ body.hm-home-2026 .hm-home-bento-grid .hm-bento-nature { height: 100%; } body.hm-home-2026 .hm-home-bento-grid .hm-bento-nature .wp-block-cover__image-background { width: 100%; height: 100%; object-fit: cover; } /* ========================================================== TABLET ========================================================== */ @media only screen and (min-width: 701px) and (max-width: 1050px) { body.hm-home-2026 .hm-home-bento-heading, body.hm-home-2026 .hm-home-bento-grid { width: calc(100% - 60px) !important; } body.hm-home-2026 .hm-home-bento-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-rows: minmax(430px, auto) minmax(250px, auto) auto !important; grid-template-areas: "nature nature" "active quiet" "facts facts"; } body.hm-home-2026 .hm-home-bento-grid .hm-bento-nature { min-height: 430px; } } /* ========================================================== SMARTPHONE ========================================================== */ @media only screen and (max-width: 700px) { body.hm-home-2026 .hm-home-bento-heading, body.hm-home-2026 .hm-home-bento-grid { width: 100% !important; max-width: none !important; } body.hm-home-2026 .hm-home-bento-grid { display: block !important; } body.hm-home-2026 .hm-home-bento-grid .hm-bento-card { width: 100% !important; margin-bottom: 15px !important; } body.hm-home-2026 .hm-home-bento-grid .hm-bento-nature { min-height: 430px; } } /* ========================================================== ATMOSPHÄRISCHER MOMENT WINTERFOTO – DESKTOP / TABLET / SMARTPHONE ========================================================== */ /* ---------------------------------------------------------- GRUNDBEREICH ---------------------------------------------------------- */ body.hm-home-2026 .hm-home-moment { position: relative; min-height: 680px !important; margin: 0 !important; overflow: hidden; background: #dfe8ed; } /* ---------------------------------------------------------- WINTERFOTO ---------------------------------------------------------- */ body.hm-home-2026 .hm-home-moment .wp-block-cover__image-background { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; } /* ---------------------------------------------------------- OVERLAY Nur links stärker abdunkeln. Die Winterlandschaft rechts bleibt hell. ---------------------------------------------------------- */ body.hm-home-2026 .hm-home-moment .wp-block-cover__background { opacity: 1 !important; background: linear-gradient( 90deg, rgba(29, 54, 66, 0.72) 0%, rgba(29, 54, 66, 0.61) 20%, rgba(29, 54, 66, 0.43) 35%, rgba(29, 54, 66, 0.24) 48%, rgba(29, 54, 66, 0.09) 61%, rgba(29, 54, 66, 0.02) 72%, rgba(29, 54, 66, 0) 82% ) !important; } /* ---------------------------------------------------------- INNERER INHALTSBEREICH ---------------------------------------------------------- */ body.hm-home-2026 .hm-home-moment .wp-block-cover__inner-container { position: relative; z-index: 5; box-sizing: border-box; display: flex; align-items: center; width: 100% !important; max-width: 1480px !important; min-height: 680px; margin-left: auto !important; margin-right: auto !important; padding-top: 90px !important; padding-right: clamp(65px, 7vw, 120px) !important; padding-bottom: 90px !important; padding-left: clamp(65px, 7vw, 120px) !important; } /* ---------------------------------------------------------- TEXTELEMENT ---------------------------------------------------------- */ body.hm-home-2026 .hm-home-moment-copy { width: 100%; max-width: 690px; margin: 0; } /* ---------------------------------------------------------- KLEINE ZEILE ---------------------------------------------------------- */ body.hm-home-2026 .hm-home-moment-kicker { margin: 0 0 20px !important; color: rgba(255, 255, 255, 0.92) !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px !important; line-height: 1.3 !important; font-weight: 750 !important; letter-spacing: 0.18em; text-transform: uppercase; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.34); } /* ---------------------------------------------------------- HAUPTÜBERSCHRIFT ---------------------------------------------------------- */ body.hm-home-2026 .hm-home-moment h2 { max-width: 690px; margin: 0 0 22px; color: #ffffff !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: clamp(45px, 5vw, 70px) !important; line-height: 1.05 !important; font-weight: 500 !important; letter-spacing: -0.045em !important; text-transform: none !important; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.28), 0 1px 4px rgba(0, 0, 0, 0.32); } /* ---------------------------------------------------------- SUBLINE ---------------------------------------------------------- */ body.hm-home-2026 .hm-home-moment-text { max-width: 590px; margin: 0 0 31px !important; color: rgba(255, 255, 255, 0.97) !important; font-size: 20px !important; line-height: 1.65 !important; font-weight: 400; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.34); } /* ---------------------------------------------------------- LINK ---------------------------------------------------------- */ body.hm-home-2026 .hm-home-moment-link { margin: 0 !important; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.34); } body.hm-home-2026 .hm-home-moment-link a { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 5px; color: #ffffff !important; border-bottom: 1px solid rgba(255, 255, 255, 0.62); font-size: 14px; line-height: 1.4; font-weight: 650; text-decoration: none !important; transition: border-color 0.2s ease, opacity 0.2s ease; } body.hm-home-2026 .hm-home-moment-link a span { display: inline-block; transition: transform 0.2s ease; } body.hm-home-2026 .hm-home-moment-link a:hover { color: #ffffff !important; border-color: #ffffff; opacity: 0.92; } body.hm-home-2026 .hm-home-moment-link a:hover span { transform: translateX(4px); } /* ========================================================== TABLET ========================================================== */ @media only screen and (min-width: 701px) and (max-width: 1020px) { body.hm-home-2026 .hm-home-moment { min-height: 610px !important; } body.hm-home-2026 .hm-home-moment .wp-block-cover__inner-container { min-height: 610px; padding-top: 75px !important; padding-right: 45px !important; padding-bottom: 75px !important; padding-left: 45px !important; } body.hm-home-2026 .hm-home-moment .wp-block-cover__background { background: linear-gradient( 90deg, rgba(29, 54, 66, 0.74) 0%, rgba(29, 54, 66, 0.61) 28%, rgba(29, 54, 66, 0.38) 48%, rgba(29, 54, 66, 0.15) 65%, rgba(29, 54, 66, 0.02) 80%, rgba(29, 54, 66, 0) 100% ) !important; } body.hm-home-2026 .hm-home-moment-copy { max-width: 620px; } body.hm-home-2026 .hm-home-moment h2 { font-size: clamp(43px, 6vw, 59px) !important; } body.hm-home-2026 .hm-home-moment-text { max-width: 540px; font-size: 19px !important; } } /* ========================================================== SMARTPHONE ========================================================== */ @media only screen and (max-width: 700px) { body.hm-home-2026 .hm-home-moment { min-height: 570px !important; } /* * Mobil wird das Foto stärker seitlich beschnitten. * Deshalb Overlay nicht horizontal, sondern zusätzlich * von unten abdunkeln. */ body.hm-home-2026 .hm-home-moment .wp-block-cover__background { background: linear-gradient( 180deg, rgba(29, 54, 66, 0.10) 0%, rgba(29, 54, 66, 0.22) 30%, rgba(29, 54, 66, 0.48) 58%, rgba(29, 54, 66, 0.72) 100% ) !important; } body.hm-home-2026 .hm-home-moment .wp-block-cover__image-background { object-position: center center; } body.hm-home-2026 .hm-home-moment .wp-block-cover__inner-container { display: flex; align-items: flex-end; min-height: 570px; padding-top: 80px !important; padding-right: 24px !important; padding-bottom: 52px !important; padding-left: 24px !important; } body.hm-home-2026 .hm-home-moment-copy { max-width: 100%; } body.hm-home-2026 .hm-home-moment-kicker { margin-bottom: 15px !important; font-size: 10px !important; letter-spacing: 0.16em; } body.hm-home-2026 .hm-home-moment h2 { max-width: 520px; margin-bottom: 18px; font-size: clamp(37px, 10vw, 46px) !important; line-height: 1.06 !important; letter-spacing: -0.035em !important; } body.hm-home-2026 .hm-home-moment-text { max-width: 500px; margin-bottom: 25px !important; font-size: 17px !important; line-height: 1.6 !important; } body.hm-home-2026 .hm-home-moment-link a { font-size: 13px; } } /* ========================================================== SEHR KLEINE SMARTPHONES ========================================================== */ @media only screen and (max-width: 420px) { body.hm-home-2026 .hm-home-moment { min-height: 540px !important; } body.hm-home-2026 .hm-home-moment .wp-block-cover__inner-container { min-height: 540px; padding-right: 20px !important; padding-bottom: 42px !important; padding-left: 20px !important; } body.hm-home-2026 .hm-home-moment h2 { font-size: 36px !important; } } /* ========================================================== ÜBERGANG BENTO → ATMOSPHÄRISCHES BILD ========================================================== */ body.hm-home-2026 .hm-home-bento { padding-bottom: clamp(32px, 3vw, 46px) !important; } body.hm-home-2026 .hm-home-moment { margin-top: 0 !important; } @media only screen and (max-width: 700px) { body.hm-home-2026 .hm-home-bento { padding-bottom: 24px !important; } } /* ========================================================== HAUS MOHNBLUME – REGION 2026 Unabhängig von Gutenberg-Layoutklassen ========================================================== */ /* ---------------------------------------------------------- GESAMTBEREICH ---------------------------------------------------------- */ body.hm-home-2026 .hm-region2026 { box-sizing: border-box; width: 100%; padding: clamp(95px, 10vw, 145px) clamp(30px, 5vw, 70px); background: #ffffff; } /* ---------------------------------------------------------- 2-SPALTEN-LAYOUT ---------------------------------------------------------- */ body.hm-home-2026 .hm-region2026-inner { display: grid; grid-template-columns: minmax(320px, 0.82fr) minmax(500px, 1.18fr); gap: clamp(70px, 8vw, 125px); align-items: start; box-sizing: border-box; width: 100%; max-width: 1240px; margin: 0 auto; } /* ========================================================== LINKE SEITE ========================================================== */ body.hm-home-2026 .hm-region2026-intro { position: sticky; top: 90px; min-width: 0; } /* kleine blaue Zeile */ body.hm-home-2026 .hm-region2026-eyebrow { margin: 0 0 19px; color: #176598; font-size: 11px; line-height: 1.3; font-weight: 750; letter-spacing: 0.17em; text-transform: uppercase; } /* Hauptüberschrift */ body.hm-home-2026 .hm-region2026-intro h2 { margin: 0 0 29px; color: #263944; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: clamp(43px, 4.4vw, 61px); line-height: 1.06; font-weight: 500; letter-spacing: -0.04em; text-transform: none; } /* Introtext */ body.hm-home-2026 .hm-region2026-lead { max-width: 480px; margin: 0 0 28px; color: #62717a; font-size: 17px; line-height: 1.78; } /* Link */ body.hm-home-2026 .hm-region2026-more { margin: 0; } body.hm-home-2026 .hm-region2026-more a { display: inline-flex; align-items: center; gap: 9px; color: #176598; font-size: 14px; font-weight: 650; text-decoration: none; } body.hm-home-2026 .hm-region2026-more span { display: inline-block; transition: transform 0.2s ease; } body.hm-home-2026 .hm-region2026-more a:hover span { transform: translateX(4px); } /* ========================================================== RECHTE SEITE ========================================================== */ body.hm-home-2026 .hm-region2026-destinations { min-width: 0; border-top: 1px solid #dce2e4; } /* ---------------------------------------------------------- EINZELNER EINTRAG ---------------------------------------------------------- */ body.hm-home-2026 .hm-region2026-item { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 25px; box-sizing: border-box; width: 100%; margin: 0; padding: 35px 0 38px; border-bottom: 1px solid #dce2e4; transition: padding-left 0.25s ease, background 0.25s ease; } /* ---------------------------------------------------------- NUMMER ---------------------------------------------------------- */ body.hm-home-2026 .hm-region2026-number { padding-top: 5px; color: #94a99c; font-size: 12px; line-height: 1.3; font-weight: 750; letter-spacing: 0.12em; } /* ---------------------------------------------------------- TEXTBEREICH ---------------------------------------------------------- */ body.hm-home-2026 .hm-region2026-copy { min-width: 0; } body.hm-home-2026 .hm-region2026-copy h3 { margin: 0 0 11px; color: #263944; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 28px; line-height: 1.18; font-weight: 550; letter-spacing: -0.025em; word-break: normal; overflow-wrap: normal; hyphens: none; } body.hm-home-2026 .hm-region2026-copy p { max-width: 600px; margin: 0; color: #68767e; font-size: 15px; line-height: 1.72; word-break: normal; overflow-wrap: normal; } /* ---------------------------------------------------------- HOVER NUR DESKTOP ---------------------------------------------------------- */ @media (hover: hover) { body.hm-home-2026 .hm-region2026-item:hover { padding-left: 15px; background: linear-gradient( 90deg, rgba(229, 237, 231, 0.48) 0%, rgba(229, 237, 231, 0.12) 48%, rgba(229, 237, 231, 0) 78% ); } } /* ========================================================== TABLET ========================================================== */ @media only screen and (min-width: 701px) and (max-width: 1050px) { body.hm-home-2026 .hm-region2026 { padding: 85px 40px; } body.hm-home-2026 .hm-region2026-inner { display: block; max-width: 850px; } body.hm-home-2026 .hm-region2026-intro { position: static; max-width: 680px; margin-bottom: 58px; } body.hm-home-2026 .hm-region2026-intro h2 { font-size: clamp(42px, 6vw, 55px); } body.hm-home-2026 .hm-region2026-lead { max-width: 650px; } body.hm-home-2026 .hm-region2026-item { grid-template-columns: 55px minmax(0, 1fr); gap: 22px; } body.hm-home-2026 .hm-region2026-copy p { max-width: 680px; } } /* ========================================================== SMARTPHONE ========================================================== */ @media only screen and (max-width: 700px) { body.hm-home-2026 .hm-region2026 { padding: 70px 22px; } body.hm-home-2026 .hm-region2026-inner { display: block; width: 100%; } body.hm-home-2026 .hm-region2026-intro { position: static; margin-bottom: 45px; } body.hm-home-2026 .hm-region2026-intro h2 { margin-bottom: 23px; font-size: 38px; line-height: 1.08; letter-spacing: -0.035em; } body.hm-home-2026 .hm-region2026-lead { max-width: none; font-size: 16px; line-height: 1.72; } body.hm-home-2026 .hm-region2026-item { grid-template-columns: 38px minmax(0, 1fr); gap: 13px; padding: 28px 0 30px; } body.hm-home-2026 .hm-region2026-number { padding-top: 4px; } body.hm-home-2026 .hm-region2026-copy h3 { font-size: 23px; } body.hm-home-2026 .hm-region2026-copy p { max-width: none; font-size: 14px; line-height: 1.68; } } /* ========================================================== HOMEPAGE NEWS 2026 EDITORIAL NEWS LAYOUT ========================================================== */ /* ---------------------------------------------------------- GESAMTBEREICH ---------------------------------------------------------- */ body.hm-home-2026 .hm-news2026 { box-sizing: border-box; width: 100%; padding: clamp(90px, 9vw, 135px) clamp(30px, 5vw, 70px); background: #f5f4f0; } /* ---------------------------------------------------------- INNERER BEREICH ---------------------------------------------------------- */ body.hm-home-2026 .hm-news2026-inner { width: 100%; max-width: 1240px; margin: 0 auto; } /* ========================================================== ÜBERSCHRIFT ========================================================== */ body.hm-home-2026 .hm-news2026-header { max-width: 760px; margin: 0 0 50px; } body.hm-home-2026 .hm-news2026-eyebrow { margin: 0 0 17px; color: #176598; font-size: 11px; line-height: 1.3; font-weight: 750; letter-spacing: 0.17em; text-transform: uppercase; } body.hm-home-2026 .hm-news2026-header h2 { margin: 0 0 20px; color: #263944; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: clamp(41px, 4.4vw, 59px); line-height: 1.06; font-weight: 500; letter-spacing: -0.04em; text-transform: none; } body.hm-home-2026 .hm-news2026-lead { max-width: 650px; margin: 0; color: #67767e; font-size: 17px; line-height: 1.75; text-align: left !important; } /* ========================================================== GRID ========================================================== */ body.hm-home-2026 .hm-news2026-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(340px, 0.7fr); grid-template-rows: repeat(2, minmax(250px, auto)); gap: 20px; } /* ========================================================== GEMEINSAME KARTE ========================================================== */ body.hm-home-2026 .hm-news2026-card { overflow: hidden; box-sizing: border-box; margin: 0; background: #ffffff; border: 1px solid rgba(45, 66, 76, 0.08); border-radius: 14px; box-shadow: 0 8px 25px rgba(34, 50, 58, 0.055); } /* ========================================================== GROSSER ERSTER BEITRAG ========================================================== */ body.hm-home-2026 .hm-news2026-featured { grid-column: 1; grid-row: 1 / 3; } body.hm-home-2026 .hm-news2026-featured .hm-news2026-image { display: block; overflow: hidden; width: 100%; height: 390px; background: #e8eceb; } body.hm-home-2026 .hm-news2026-featured .hm-news2026-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s ease; } body.hm-home-2026 .hm-news2026-featured .hm-news2026-content { padding: 31px 34px 34px; } body.hm-home-2026 .hm-news2026-featured h3 { max-width: 720px; margin: 13px 0 15px; font-size: clamp(27px, 2.7vw, 38px); line-height: 1.15; font-weight: 550; letter-spacing: -0.03em; } /* ========================================================== KLEINE BEITRÄGE RECHTS ========================================================== */ body.hm-home-2026 .hm-news2026-small { display: grid; grid-template-columns: 42% 58%; min-height: 250px; } body.hm-home-2026 .hm-news2026-small .hm-news2026-image { display: block; overflow: hidden; min-width: 0; min-height: 100%; background: #e8eceb; } body.hm-home-2026 .hm-news2026-small .hm-news2026-image img { display: block; width: 100%; height: 100%; min-height: 250px; object-fit: cover; transition: transform 0.45s ease; } body.hm-home-2026 .hm-news2026-small .hm-news2026-content { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 25px 25px; } body.hm-home-2026 .hm-news2026-small h3 { margin: 10px 0 12px; font-size: 21px; line-height: 1.22; font-weight: 550; letter-spacing: -0.025em; } /* ========================================================== BILD-HOVER ========================================================== */ @media (hover: hover) { body.hm-home-2026 .hm-news2026-card:hover .hm-news2026-image img { transform: scale(1.025); } } /* ========================================================== METADATEN ========================================================== */ body.hm-home-2026 .hm-news2026-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 13px; color: #859198; font-size: 11px; line-height: 1.4; text-align: left !important; } body.hm-home-2026 .hm-news2026-category { color: #176598; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } /* ========================================================== TITEL ========================================================== */ body.hm-home-2026 .hm-news2026-card h3 a { color: #263944 !important; text-decoration: none !important; transition: color 0.2s ease; } body.hm-home-2026 .hm-news2026-card h3 a:hover { color: #176598 !important; } /* ========================================================== AUSZUG ========================================================== */ body.hm-home-2026 .hm-news2026-excerpt { margin: 0 0 22px !important; color: #66757d !important; font-size: 14px !important; line-height: 1.7 !important; text-align: left !important; } /* ========================================================== WEITERLESEN ========================================================== */ body.hm-home-2026 .hm-news2026-readmore { margin: auto 0 0 !important; } body.hm-home-2026 .hm-news2026-readmore a { display: inline-flex; align-items: center; gap: 8px; color: #176598 !important; font-size: 12px; font-weight: 700; text-decoration: none !important; } body.hm-home-2026 .hm-news2026-readmore span { display: inline-block; transition: transform 0.2s ease; } body.hm-home-2026 .hm-news2026-readmore a:hover span { transform: translateX(4px); } /* ========================================================== FALLBACK OHNE BILD ========================================================== */ body.hm-home-2026 .hm-news2026-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 240px; color: #718189; background: linear-gradient( 135deg, #e4ebe8, #d8e1de ); font-size: 13px; font-weight: 650; } /* ========================================================== ALLE NEWS ========================================================== */ body.hm-home-2026 .hm-news2026-footer { display: flex; justify-content: flex-end; margin-top: 32px; } body.hm-home-2026 .hm-news2026-footer a { display: inline-flex; align-items: center; gap: 9px; padding-bottom: 4px; color: #176598; border-bottom: 1px solid rgba(23, 101, 152, 0.35); font-size: 14px; font-weight: 650; text-decoration: none; } body.hm-home-2026 .hm-news2026-footer span { transition: transform 0.2s ease; } body.hm-home-2026 .hm-news2026-footer a:hover span { transform: translateX(4px); } /* ========================================================== TABLET ========================================================== */ @media only screen and (min-width: 701px) and (max-width: 1050px) { body.hm-home-2026 .hm-news2026 { padding: 85px 40px; } body.hm-home-2026 .hm-news2026-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; } body.hm-home-2026 .hm-news2026-featured { grid-column: 1 / 3; grid-row: auto; } body.hm-home-2026 .hm-news2026-featured .hm-news2026-image { height: 360px; } body.hm-home-2026 .hm-news2026-small { display: block; min-height: 0; } body.hm-home-2026 .hm-news2026-small .hm-news2026-image { height: 220px; } body.hm-home-2026 .hm-news2026-small .hm-news2026-image img { min-height: 0; } } /* ========================================================== SMARTPHONE ========================================================== */ @media only screen and (max-width: 700px) { body.hm-home-2026 .hm-news2026 { padding: 70px 22px; } body.hm-home-2026 .hm-news2026-header { margin-bottom: 38px; } body.hm-home-2026 .hm-news2026-header h2 { font-size: 38px; } body.hm-home-2026 .hm-news2026-lead { font-size: 16px; line-height: 1.7; } body.hm-home-2026 .hm-news2026-grid { display: block; } body.hm-home-2026 .hm-news2026-card { margin-bottom: 18px; } body.hm-home-2026 .hm-news2026-featured .hm-news2026-image { height: 260px; } body.hm-home-2026 .hm-news2026-featured .hm-news2026-content { padding: 25px 23px 28px; } body.hm-home-2026 .hm-news2026-featured h3 { font-size: 27px; } body.hm-home-2026 .hm-news2026-small { display: block; } body.hm-home-2026 .hm-news2026-small .hm-news2026-image { height: 230px; } body.hm-home-2026 .hm-news2026-small .hm-news2026-image img { min-height: 0; } body.hm-home-2026 .hm-news2026-small .hm-news2026-content { padding: 24px 22px 27px; } body.hm-home-2026 .hm-news2026-small h3 { font-size: 23px; } body.hm-home-2026 .hm-news2026-footer { justify-content: flex-start; margin-top: 24px; } } /* ========================================================== FINALER BUCHUNGS-CTA 2026 ========================================================== */ body.hm-home-2026 .hm-booking2026 { position: relative; overflow: hidden; box-sizing: border-box; width: 100%; padding: clamp(90px, 10vw, 145px) clamp(30px, 6vw, 90px); color: #ffffff; background: radial-gradient( circle at 82% 22%, rgba(111, 155, 143, 0.22) 0%, rgba(111, 155, 143, 0.08) 27%, rgba(111, 155, 143, 0) 52% ), linear-gradient( 135deg, #203844 0%, #284751 52%, #31534f 100% ); } /* ---------------------------------------------------------- INNERER BEREICH ---------------------------------------------------------- */ body.hm-home-2026 .hm-booking2026-inner { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr); gap: clamp(65px, 9vw, 130px); align-items: end; width: 100%; max-width: 1240px; margin: 0 auto; } /* ========================================================== TEXT ========================================================== */ body.hm-home-2026 .hm-booking2026-copy { max-width: 760px; } body.hm-home-2026 .hm-booking2026-eyebrow { margin: 0 0 20px; color: #a8cabc; font-size: 11px; line-height: 1.3; font-weight: 750; letter-spacing: 0.18em; text-transform: uppercase; } body.hm-home-2026 .hm-booking2026 h2 { margin: 0 0 28px; color: #ffffff !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: clamp(52px, 6vw, 82px); line-height: 1.01; font-weight: 500; letter-spacing: -0.05em; text-transform: none; } body.hm-home-2026 .hm-booking2026-lead { max-width: 650px; margin: 0 0 36px; color: rgba(255, 255, 255, 0.82); font-size: 18px; line-height: 1.75; } /* ========================================================== BUTTONS ========================================================== */ body.hm-home-2026 .hm-booking2026-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; } body.hm-home-2026 .hm-booking2026-actions a { display: inline-flex; align-items: center; justify-content: center; gap: 11px; box-sizing: border-box; min-height: 50px; padding: 14px 23px; border-radius: 5px; font-size: 14px; font-weight: 650; text-decoration: none !important; transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } /* Hauptbutton */ body.hm-home-2026 .hm-booking2026-primary { color: #203844 !important; background: #ffffff; border: 1px solid #ffffff; } body.hm-home-2026 .hm-booking2026-primary span { display: inline-block; transition: transform 0.2s ease; } body.hm-home-2026 .hm-booking2026-primary:hover { color: #203844 !important; transform: translateY(-2px); } body.hm-home-2026 .hm-booking2026-primary:hover span { transform: translateX(4px); } /* Zweiter Button */ body.hm-home-2026 .hm-booking2026-secondary { color: #ffffff !important; background: transparent; border: 1px solid rgba(255, 255, 255, 0.42); } body.hm-home-2026 .hm-booking2026-secondary:hover { color: #ffffff !important; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.72); transform: translateY(-2px); } /* ========================================================== FAKTEN RECHTS ========================================================== */ body.hm-home-2026 .hm-booking2026-facts { border-top: 1px solid rgba(255, 255, 255, 0.17); } body.hm-home-2026 .hm-booking2026-fact { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 22px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.17); } body.hm-home-2026 .hm-booking2026-fact span { color: rgba(255, 255, 255, 0.55); font-size: 12px; line-height: 1.4; letter-spacing: 0.04em; } body.hm-home-2026 .hm-booking2026-fact strong { color: #ffffff !important; font-size: 16px; line-height: 1.3; font-weight: 600; text-align: right; } /* ========================================================== TABLET ========================================================== */ @media only screen and (min-width: 701px) and (max-width: 1050px) { body.hm-home-2026 .hm-booking2026 { padding: 90px 45px; } body.hm-home-2026 .hm-booking2026-inner { grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr); gap: 60px; } body.hm-home-2026 .hm-booking2026 h2 { font-size: clamp(50px, 7vw, 67px); } body.hm-home-2026 .hm-booking2026-lead { font-size: 17px; } } /* ========================================================== SMARTPHONE ========================================================== */ @media only screen and (max-width: 700px) { body.hm-home-2026 .hm-booking2026 { padding: 72px 22px; } body.hm-home-2026 .hm-booking2026-inner { display: block; } body.hm-home-2026 .hm-booking2026-copy { max-width: none; margin-bottom: 55px; } body.hm-home-2026 .hm-booking2026 h2 { margin-bottom: 23px; font-size: 46px; line-height: 1.03; } body.hm-home-2026 .hm-booking2026-lead { max-width: none; margin-bottom: 30px; font-size: 16px; line-height: 1.7; } body.hm-home-2026 .hm-booking2026-actions { display: block; } body.hm-home-2026 .hm-booking2026-actions a { width: 100%; margin-bottom: 11px; } body.hm-home-2026 .hm-booking2026-facts { width: 100%; } body.hm-home-2026 .hm-booking2026-fact { padding: 19px 0; } } /* ========================================================== STARTSEITE 2026 – FOOTER KORREKTUR Copyright | Social Media | Powered by ========================================================== */ body.hm-home-2026 #footerGrid { box-sizing: border-box; } /* ---------------------------------------------------------- Desktop: drei sauber getrennte Bereiche ---------------------------------------------------------- */ body.hm-home-2026 #footerGrid .wrapper { display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; box-sizing: border-box; width: min(1240px, calc(100% - 60px)) !important; max-width: 1240px !important; margin-left: auto !important; margin-right: auto !important; } /* Copyright links */ body.hm-home-2026 #footerGrid #copyright { grid-column: 1; float: none !important; width: auto !important; margin: 0 !important; text-align: left; } /* * #socialMedia liegt im HTML innerhalb von #poweredBy. * display:contents lässt beide Elemente am Grid * des Wrappers teilnehmen. */ body.hm-home-2026 #footerGrid #poweredBy { display: contents !important; } /* Social Icons */ body.hm-home-2026 #footerGrid #socialMedia { position: static !important; grid-column: 2; float: none !important; left: auto !important; top: auto !important; width: auto !important; margin: 0 !important; transform: none !important; white-space: nowrap; text-align: center; } /* Powered-by-Text */ body.hm-home-2026 #footerGrid #poweredBy > span { grid-column: 3; justify-self: end; margin: 0 !important; text-align: right; } /* ---------------------------------------------------------- Social Links etwas ordentlicher ausrichten ---------------------------------------------------------- */ body.hm-home-2026 #footerGrid #socialMedia a { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; } /* ========================================================== TABLET / KLEINERE DESKTOPS ========================================================== */ @media only screen and (max-width: 1050px) { body.hm-home-2026 #footerGrid .wrapper { width: calc(100% - 40px) !important; gap: 16px; } } /* ========================================================== SMARTPHONE ========================================================== */ @media only screen and (max-width: 700px) { body.hm-home-2026 #footerGrid .wrapper { display: grid !important; grid-template-columns: 1fr; gap: 14px; width: calc(100% - 32px) !important; padding-top: 18px; padding-bottom: 18px; } body.hm-home-2026 #footerGrid #copyright { grid-column: 1; text-align: center; } body.hm-home-2026 #footerGrid #socialMedia { grid-column: 1; justify-self: center; text-align: center; } body.hm-home-2026 #footerGrid #poweredBy > span { grid-column: 1; justify-self: center; text-align: center; } } /* Footer: zweite Copyright-Zeile etwas luftiger */ body.hm-home-2026 #footerGrid #copyright { line-height: 1.8; } /* ========================================================== TEMPORÄR AUSGEBLENDETE ELEMENTE ========================================================== */ body.hm-home-2026 .hm-temporarily-hidden { display: none !important; } /* ========================================================== BENTO 2026 – FINALES SPALTENLAYOUT Desktop / Tablet / Smartphone ========================================================== */ /* ---------------------------------------------------------- GEMEINSAME BREITE ---------------------------------------------------------- */ body.hm-home-2026 .hm-home-bento-heading, body.hm-home-2026 .hm-home-bento-layout, body.hm-home-2026 .hm-home-bento > .hm-bento-facts { box-sizing: border-box; width: min(1240px, calc(100% - 80px)) !important; max-width: 1240px !important; margin-left: auto !important; margin-right: auto !important; } /* ========================================================== DESKTOP Natur links – Aktiv/Ruhe rechts ========================================================== */ body.hm-home-2026 .hm-home-bento-layout { display: grid !important; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.75fr); gap: 18px !important; align-items: stretch !important; margin-bottom: 0 !important; } /* Gutenberg-Spalten zurücksetzen */ body.hm-home-2026 .hm-home-bento-layout > .wp-block-column { box-sizing: border-box; width: auto !important; max-width: none !important; min-width: 0 !important; flex-basis: auto !important; margin: 0 !important; } /* ---------------------------------------------------------- LINKE SPALTE ---------------------------------------------------------- */ body.hm-home-2026 .hm-home-bento-main { display: flex !important; min-width: 0 !important; } body.hm-home-2026 .hm-home-bento-main .hm-bento-nature { width: 100% !important; height: 100% !important; min-height: 558px !important; margin: 0 !important; } /* ---------------------------------------------------------- RECHTE SPALTE ---------------------------------------------------------- */ body.hm-home-2026 .hm-home-bento-side { display: flex !important; flex-direction: column !important; gap: 18px !important; min-width: 0 !important; } body.hm-home-2026 .hm-home-bento-side .hm-bento-active, body.hm-home-2026 .hm-home-bento-side .hm-bento-quiet { box-sizing: border-box; display: flex !important; flex: 1 1 0 !important; flex-direction: column; justify-content: space-between; width: 100% !important; min-width: 0 !important; min-height: 270px !important; margin: 0 !important; } /* ---------------------------------------------------------- FAKTENLEISTE ---------------------------------------------------------- */ body.hm-home-2026 .hm-home-bento > .hm-bento-facts { box-sizing: border-box; margin-top: 18px !important; margin-bottom: 0 !important; } /* ========================================================== TABLET Großes Bild oben, Aktiv + Ruhe darunter nebeneinander ========================================================== */ @media only screen and (min-width: 601px) and (max-width: 950px) { body.hm-home-2026 .hm-home-bento-heading, body.hm-home-2026 .hm-home-bento-layout, body.hm-home-2026 .hm-home-bento > .hm-bento-facts { width: calc(100% - 60px) !important; } body.hm-home-2026 .hm-home-bento-layout { display: block !important; } body.hm-home-2026 .hm-home-bento-main { display: block !important; width: 100% !important; margin-bottom: 18px !important; } body.hm-home-2026 .hm-home-bento-main .hm-bento-nature { height: auto !important; min-height: 430px !important; } body.hm-home-2026 .hm-home-bento-side { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px !important; } body.hm-home-2026 .hm-home-bento-side .hm-bento-active, body.hm-home-2026 .hm-home-bento-side .hm-bento-quiet { min-height: 260px !important; } } /* ========================================================== SMARTPHONE Alles sauber untereinander ========================================================== */ @media only screen and (max-width: 600px) { body.hm-home-2026 .hm-home-bento-heading, body.hm-home-2026 .hm-home-bento-layout, body.hm-home-2026 .hm-home-bento > .hm-bento-facts { width: 100% !important; max-width: none !important; } body.hm-home-2026 .hm-home-bento-layout { display: block !important; } body.hm-home-2026 .hm-home-bento-main { display: block !important; width: 100% !important; margin-bottom: 15px !important; } body.hm-home-2026 .hm-home-bento-main .hm-bento-nature { height: auto !important; min-height: 430px !important; } body.hm-home-2026 .hm-home-bento-side { display: block !important; } body.hm-home-2026 .hm-home-bento-side .hm-bento-active, body.hm-home-2026 .hm-home-bento-side .hm-bento-quiet { min-height: 255px !important; margin-bottom: 15px !important; } body.hm-home-2026 .hm-home-bento > .hm-bento-facts { margin-top: 0 !important; } } /* ========================================================== BENTO – FAKTENLEISTE exakt auf Breite des Bento-Layouts begrenzen ========================================================== */ body.hm-home-2026 .hm-home-bento .hm-bento-facts { box-sizing: border-box !important; width: min(1240px, calc(100% - 80px)) !important; max-width: 1240px !important; margin-top: 18px !important; margin-right: auto !important; margin-bottom: 0 !important; margin-left: auto !important; } /* ========================================================== TABLET ========================================================== */ @media only screen and (min-width: 601px) and (max-width: 950px) { body.hm-home-2026 .hm-home-bento .hm-bento-facts { width: calc(100% - 60px) !important; max-width: none !important; } } /* ========================================================== SMARTPHONE ========================================================== */ @media only screen and (max-width: 600px) { body.hm-home-2026 .hm-home-bento .hm-bento-facts { width: 100% !important; max-width: none !important; margin-top: 15px !important; } }