/* ============================================================ CHULO MALLORCA — Theme Stylesheet Built for Elementor Pro. Every widget is self-contained, self-centering and mobile-first so it can live inside a full-width / zero-padding container. ============================================================ */ :root { /* Höhe der fixen Topbar (Logo + Inner-Padding) — wird zur Laufzeit vom JS exakt nachgemessen und auf überschrieben. Diese CSS-Werte sind nur Fallback, falls das JS nicht lädt. */ --chulo-header-h: 184px; --chulo-terracotta: #B5593C; --chulo-terracotta-dark: #9F4730; --chulo-terracotta-soft: #D8896A; --chulo-terracotta-pale: #E8B89C; --chulo-sand: #D9B896; --chulo-sand-light: #E5CBAE; --chulo-cream: #EFDEC4; --chulo-cream-warm: #E9D4B4; --chulo-paper: #F2E4CB; --chulo-paper-light: #F7ECD6; --chulo-ink: #2E1F12; --chulo-ink-soft: #7A5F48; --chulo-ink-light: #A18872; --chulo-line: rgba(46, 31, 18, 0.12); --chulo-radius-sm: 3px; --chulo-radius-md: 6px; --chulo-radius-lg: 12px; --chulo-shadow-card: 0 16px 32px -16px rgba(46, 31, 18, 0.22); --chulo-shadow-img: 0 30px 60px -24px rgba(46, 31, 18, 0.28); --chulo-max: 1500px; --chulo-gutter: clamp(20px, 4vw, 48px); --chulo-ease: cubic-bezier(0.2, 0.8, 0.2, 1); } /* ---------- A11y ---------- */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; padding: 0; overflow: hidden; position: absolute !important; word-wrap: normal !important; } .skip-link { position: absolute; left: 16px; top: -100px; z-index: 9999; background: var(--chulo-ink); color: var(--chulo-paper); padding: 12px 18px; border-radius: 999px; font-size: 13px; letter-spacing: 0.04em; transition: top 0.2s ease; } .skip-link:focus { top: 16px; outline: none; } /* Einheitlicher sichtbarer Tastatur-Fokus für alle interaktiven Elemente. */ body.chulo a:focus-visible, body.chulo button:focus-visible, body.chulo input:focus-visible, body.chulo select:focus-visible, body.chulo textarea:focus-visible { outline: 2px solid var(--chulo-terracotta); outline-offset: 3px; border-radius: 4px; } body.chulo .chulo-btn:focus-visible, body.chulo .chulo-contact-btn:focus-visible, body.chulo .chulo-lang-trigger:focus-visible, body.chulo .chulo-burger:focus-visible { outline-offset: 4px; } body.chulo *:focus { outline: none; } /* Browser-Default unterdrücken, focus-visible greift */ @media (hover: none) and (pointer: coarse) { /* Bessere Tap-Größen auf Touch-Geräten. */ body.chulo .chulo-filter-btn { padding: 10px 4px; } body.chulo .chulo-pagination button, body.chulo .chulo-pagination .page-numbers { min-width: 48px; height: 48px; } } /* ---------- Base ---------- */ html { scroll-behavior: smooth; scroll-padding-top: 80px; } html, body.chulo { margin: 0; padding: 0; } body.chulo { font-family: 'Inter', system-ui, sans-serif; font-weight: 300; color: var(--chulo-ink); background: var(--chulo-paper-light); line-height: 1.65; font-size: 15px; -webkit-font-smoothing: antialiased; overflow-x: hidden; position: relative; min-height: 100vh; } /* Footer wirklich randlos – auch falls ein Plugin/Editor-Wrapper irgendwo eine Außen-Begrenzung gesetzt hat. */ .chulo-footer { width: 100%; margin: 0; } /* warm paper grain */ body.chulo::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.32; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.15 0 0 0 0 0.08 0 0 0 0 0.05 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Sections über den Noise-Layer heben — gezielt nur Inhalts-Wrapper, damit `position: fixed`-Elemente (Topbar, Modal, Toast, Promo) ihre eigene Positionierung behalten. */ body.chulo > main, body.chulo > footer { position: relative; z-index: 2; } /* Header-Höhe automatisch vom Seiteninhalt abziehen — jedes erste Widget startet damit garantiert unterhalb der fixen Topbar. */ body.chulo > main { padding-top: var(--chulo-header-h); } /* Border-Box für alle Theme-Elemente, sonst überlaufen z. B. width:100% + padding-Kombinationen (Sprachmenü-Hover, Form-Inputs, …). */ body.chulo, body.chulo *, body.chulo *::before, body.chulo *::after { box-sizing: border-box; } body.chulo img { display: block; max-width: 100%; } /* Resets über :where() entkräften die Spezifität (0,0,1) – damit jede spätere `.chulo-…`-Klasse Farbe und Hintergrund zuverlässig setzen kann (sonst gewinnt der Reset gegen Klassenselektoren). */ :where(body.chulo) a { color: inherit; text-decoration: none; } :where(body.chulo) button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } /* Headline rhythm — clean H-structure */ .chulo h1, .chulo h2, .chulo h3, .chulo h4 { font-family: 'Fraunces', Georgia, serif; font-weight: 300; color: var(--chulo-ink); line-height: 1.06; letter-spacing: -0.015em; } .chulo em.accent, .chulo .accent-em { font-style: italic; color: var(--chulo-terracotta); font-weight: 400; } /* Generic section wrapper — full-bleed friendly, self-centering */ .chulo-section { width: 100%; } .chulo-inner { max-width: var(--chulo-max); margin: 0 auto; padding-left: var(--chulo-gutter); padding-right: var(--chulo-gutter); } /* ---------- Buttons ---------- */ .chulo-btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px; font-size: 13px; letter-spacing: 0.06em; font-weight: 400; border-radius: 999px; transition: background 0.3s, color 0.3s, transform 0.3s, box-shadow 0.3s, border-color 0.3s; } .chulo-btn i { transition: transform 0.3s; } .chulo-btn:hover i { transform: translateX(4px); } .chulo-btn--primary { background: var(--chulo-terracotta); color: var(--chulo-paper-light); box-shadow: 0 8px 20px -8px rgba(181, 89, 60, 0.5); } .chulo-btn--primary:hover { background: var(--chulo-terracotta-dark); transform: translateY(-1px); box-shadow: 0 12px 24px -8px rgba(181, 89, 60, 0.55); } .chulo-btn--ghost { background: transparent; border: 1px solid var(--chulo-ink); color: var(--chulo-ink); } .chulo-btn--ghost:hover { background: var(--chulo-ink); color: var(--chulo-paper-light); transform: translateY(-1px); } .chulo-btn--dark { background: var(--chulo-ink); color: var(--chulo-paper); } .chulo-btn--dark:hover { background: var(--chulo-terracotta); transform: translateY(-1px); } /* ============================================================ HEADER / TOPBAR ============================================================ */ .chulo-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: rgba(242, 228, 203, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: box-shadow 0.3s; } .chulo-topbar.scrolled { box-shadow: 0 1px 0 var(--chulo-line); } .chulo-topbar-inner { max-width: var(--chulo-max); margin: 0 auto; padding: 18px var(--chulo-gutter); display: flex; justify-content: space-between; align-items: center; gap: 48px; transition: padding 0.3s; } .chulo-topbar.scrolled .chulo-topbar-inner { padding-top: 12px; padding-bottom: 12px; } .chulo-brand { display: block; height: 148px; flex-shrink: 0; transition: height 0.3s; } .chulo-topbar.scrolled .chulo-brand { height: 104px; } .chulo-brand img { height: 100%; width: auto; object-fit: contain; } .chulo-nav ul { display: flex; gap: 40px; list-style: none; margin: 0; padding: 0; } .chulo-nav a { font-size: 15px; color: var(--chulo-ink); letter-spacing: 0.01em; position: relative; padding: 8px 0; transition: color 0.3s; } .chulo-nav a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--chulo-terracotta); transform: scaleX(0); transform-origin: right; transition: transform 0.4s cubic-bezier(0.3, 0.9, 0.3, 1); } .chulo-nav a:hover::after, .chulo-nav a.current-menu-item::after, .chulo-nav a[aria-current]::after { transform: scaleX(1); transform-origin: left; } .chulo-topbar-right { display: flex; align-items: center; justify-content: flex-end; gap: 16px; } /* Language switch (WPML language switcher styled) */ .chulo-lang { position: relative; } .chulo-lang-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; height: 46px; background: var(--chulo-terracotta); border-radius: 999px; font-size: 14px; letter-spacing: 0.04em; color: var(--chulo-paper-light); box-shadow: 0 8px 20px -8px rgba(181, 89, 60, 0.5); transition: background 0.25s, transform 0.25s; } .chulo-lang-trigger:hover { background: var(--chulo-terracotta-dark); transform: translateY(-1px); } /* Sprach-Flaggen: lokales Inline-SVG (siehe chulo_lang_flag()). */ .chulo-lang-flag { display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .chulo-flag { display: block; width: 22px; height: auto; border-radius: 3px; /* feine Innenkontur, damit weiße/helle Flaggen-Flächen klar abgrenzen */ box-shadow: 0 0 0 1px rgba(46, 31, 18, 0.08); flex-shrink: 0; } .chulo-lang-menu .chulo-flag { width: 20px; } .chulo-lang-chevron { width: 11px; height: 11px; opacity: 0.85; transition: transform 0.25s; } .chulo-lang.open .chulo-lang-chevron { transform: rotate(180deg); } .chulo-lang-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 200px; margin: 0; padding: 6px; list-style: none; background: var(--chulo-paper-light); border: 1px solid var(--chulo-line); border-radius: var(--chulo-radius-md); box-shadow: 0 16px 32px -12px rgba(46, 31, 18, 0.25); opacity: 0; transform: translateY(-6px); visibility: hidden; transition: opacity 0.2s, transform 0.2s, visibility 0.2s; z-index: 200; } .chulo-lang.open .chulo-lang-menu { opacity: 1; transform: translateY(0); visibility: visible; } .chulo-lang-menu li { font-size: 14px; color: var(--chulo-ink); border-radius: var(--chulo-radius-sm); transition: background 0.2s; } .chulo-lang-menu li a { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--chulo-radius-sm); color: inherit; width: 100%; } .chulo-lang-menu li:hover, .chulo-lang-menu li a:hover { background: var(--chulo-cream); } .chulo-lang-menu li.current-lang, .chulo-lang-menu li[aria-selected="true"] { color: var(--chulo-terracotta); } .chulo-contact-btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; height: 46px; background: var(--chulo-ink); color: var(--chulo-paper); font-size: 14px; letter-spacing: 0.04em; border-radius: 999px; transition: background 0.25s, transform 0.25s; } .chulo-contact-btn:hover { background: var(--chulo-terracotta); transform: translateY(-1px); } /* Burger – als Drei-Linien-Icon, animiert zum X im offenen Zustand */ .chulo-burger { display: none; width: 46px; height: 46px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: var(--chulo-ink); color: var(--chulo-paper); border-radius: 999px; padding: 0; transition: background 0.25s, transform 0.25s; } .chulo-burger:hover { background: var(--chulo-terracotta); } .chulo-burger__line { display: block; width: 18px; height: 1.6px; background: currentColor; border-radius: 2px; transition: transform 0.3s var(--chulo-ease), opacity 0.2s ease; } .chulo-burger[aria-expanded="true"] .chulo-burger__line:nth-child(1) { transform: translateY(3.3px) rotate(45deg); } .chulo-burger[aria-expanded="true"] .chulo-burger__line:nth-child(2) { transform: translateY(-3.3px) rotate(-45deg); } /* =========================================================== Mobile Overlay Menü Vollbild mit warmem Cream-BG, eigenem Header (Logo + Close), großer Navigation und Footer (CTA + Sprach-Dropdown). =========================================================== */ .chulo-mobile-nav { position: fixed; inset: 0; z-index: 1100; background: var(--chulo-paper-light); opacity: 0; pointer-events: none; visibility: hidden; transition: opacity 0.32s ease, visibility 0.32s; } .chulo-mobile-nav.open { opacity: 1; pointer-events: auto; visibility: visible; } .chulo-mobile-nav::before { /* Warmer Noise-Hauch, gleicher Charakter wie der Seitenhintergrund. */ content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.22; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.15 0 0 0 0 0.08 0 0 0 0 0.05 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .chulo-mobile-nav__panel { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; max-width: 720px; margin: 0 auto; padding: 0 28px 28px; padding-top: max(env(safe-area-inset-top), 16px); padding-bottom: max(env(safe-area-inset-bottom), 28px); } .chulo-mobile-nav__header { display: flex; align-items: center; justify-content: space-between; padding: 8px 0 24px; } .chulo-mobile-nav__logo { display: flex; align-items: center; height: 64px; } .chulo-mobile-nav__logo img { height: 100%; width: auto; object-fit: contain; } .chulo-mobile-nav__close { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 30px; line-height: 1; color: var(--chulo-ink); border-radius: 999px; transition: background 0.2s, color 0.2s, transform 0.25s; } .chulo-mobile-nav__close:hover { background: var(--chulo-cream); color: var(--chulo-terracotta); transform: rotate(90deg); } .chulo-mobile-nav__body { flex: 1; display: flex; align-items: center; padding: 16px 0; } .chulo-mobile-nav__list, .chulo-mobile-nav ul { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 6px; } .chulo-mobile-nav__list li { list-style: none; } .chulo-mobile-nav__list a { display: flex; align-items: center; justify-content: space-between; font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 36, 'SOFT' 100; font-size: clamp(28px, 7vw, 40px); font-weight: 300; line-height: 1.15; letter-spacing: -0.015em; padding: 14px 0; color: var(--chulo-ink); border-bottom: 1px solid var(--chulo-line); position: relative; transition: color 0.3s, padding 0.3s; } .chulo-mobile-nav__list a::after { content: '→'; font-family: 'Inter', sans-serif; font-size: 18px; color: var(--chulo-terracotta); opacity: 0; transform: translateX(-6px); transition: opacity 0.3s, transform 0.3s; } .chulo-mobile-nav__list a:hover, .chulo-mobile-nav__list a:focus-visible { color: var(--chulo-terracotta); padding-left: 4px; } .chulo-mobile-nav__list a:hover::after, .chulo-mobile-nav__list a:focus-visible::after { opacity: 1; transform: translateX(0); } .chulo-mobile-nav__list .current-menu-item a, .chulo-mobile-nav__list a[aria-current] { color: var(--chulo-terracotta); } .chulo-mobile-nav__footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; border-top: 1px solid var(--chulo-line); } .chulo-mobile-nav__cta { flex: 1; justify-content: center; } .chulo-mobile-nav .chulo-lang--drawer .chulo-lang-menu { /* Im Drawer öffnet sich das Sprach-Menü nach oben, damit es nicht aus dem Bild fliegt. */ top: auto; bottom: calc(100% + 8px); transform: translateY(6px); } .chulo-mobile-nav .chulo-lang--drawer.open .chulo-lang-menu { transform: translateY(0); } body.chulo.chulo-no-scroll { overflow: hidden; } /* ============================================================ HERO ============================================================ */ .chulo-hero .chulo-inner { display: grid; grid-template-columns: 1fr 1.15fr; gap: 72px; padding-top: 100px; /* Header-Versatz erledigt main, hier nur optisches Atemholen */ padding-bottom: 96px; align-items: center; } .chulo-hero__content { display: flex; flex-direction: column; align-items: flex-start; max-width: 580px; justify-self: start; } .chulo-hero__label { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--chulo-ink-light); margin-bottom: 28px; } .chulo-hero h1 { font-variation-settings: 'opsz' 144, 'SOFT' 100; font-size: clamp(42px, 5vw, 72px); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 28px; } .chulo-hero h1 em { font-style: italic; font-weight: 400; color: var(--chulo-terracotta); } .chulo-hero__meaning { font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 20, 'SOFT' 60; font-style: italic; font-weight: 300; font-size: 19px; line-height: 1.5; color: var(--chulo-ink-soft); margin: 12px 0 36px; max-width: 520px; } .chulo-hero__meaning em { font-style: normal; color: var(--chulo-terracotta); font-weight: 400; } .chulo-hero__lead { font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 20, 'SOFT' 60; font-weight: 300; font-size: 18px; line-height: 1.55; color: var(--chulo-ink-soft); max-width: 480px; margin: 0 0 36px; } .chulo-hero__cta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .chulo-hero__image { overflow: hidden; border-radius: var(--chulo-radius-lg); box-shadow: var(--chulo-shadow-img); height: 640px; max-width: 760px; width: 100%; justify-self: start; } .chulo-hero__image img { width: 100%; height: 100%; object-fit: cover; } /* ============================================================ PHILOSOPHY / PRINCIPLES (split media + text) ============================================================ */ .chulo-split .chulo-inner { display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; gap: 80px; padding-top: 80px; padding-bottom: 100px; } .chulo-split--media-right .chulo-inner { grid-template-columns: 1fr 1.3fr; } .chulo-split__media { overflow: hidden; position: relative; border-radius: var(--chulo-radius-lg); box-shadow: var(--chulo-shadow-img); height: 620px; max-width: 720px; width: 100%; justify-self: start; } .chulo-split--media-right .chulo-split__media { justify-self: end; order: 2; } .chulo-split__media img { width: 100%; height: 100%; object-fit: cover; } .chulo-split__text { display: flex; flex-direction: column; align-items: flex-start; max-width: 520px; justify-self: end; } .chulo-split--media-right .chulo-split__text { justify-self: start; order: 1; } .chulo-split__text h2 { font-variation-settings: 'opsz' 144, 'SOFT' 100; font-size: clamp(36px, 4.4vw, 58px); line-height: 1.06; margin-bottom: 28px; } .chulo-split__text h2 em { font-style: italic; color: var(--chulo-terracotta); font-weight: 400; } .chulo-split__text > p { font-size: 15px; line-height: 1.7; color: var(--chulo-ink-soft); margin-bottom: 28px; max-width: 460px; } .chulo-principles { list-style: none; margin: 0 0 36px; padding: 0; display: flex; flex-direction: column; gap: 18px; max-width: 460px; } .chulo-principles li { display: grid; grid-template-columns: 36px 1fr; gap: 16px; align-items: start; padding-top: 18px; border-top: 1px solid var(--chulo-line); } .chulo-principles .num { font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 36, 'SOFT' 100; font-style: italic; font-size: 22px; color: var(--chulo-terracotta); line-height: 1; font-weight: 400; } .chulo-principles strong { display: block; font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 18, 'SOFT' 60; font-size: 16px; font-weight: 400; color: var(--chulo-ink); margin-bottom: 4px; line-height: 1.3; } .chulo-principles p { font-size: 14px; line-height: 1.55; color: var(--chulo-ink-soft); margin: 0; } /* ============================================================ SECTION HEADING ============================================================ */ .chulo-section-head .chulo-inner { padding-top: 100px; padding-bottom: 56px; } .chulo-section-head__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .chulo-section-head h1, .chulo-section-head h2, .chulo-section-head h3 { font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 144, 'SOFT' 100; font-size: clamp(38px, 4.6vw, 62px); line-height: 1.02; letter-spacing: -0.02em; font-weight: 300; } .chulo-section-head h1 { font-size: clamp(44px, 5.4vw, 76px); } .chulo-section-head h1 em, .chulo-section-head h2 em, .chulo-section-head h3 em { font-style: italic; color: var(--chulo-terracotta); font-weight: 400; } .chulo-section-head p { font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 18, 'SOFT' 60; font-size: 18px; line-height: 1.7; color: var(--chulo-ink-soft); max-width: 620px; font-weight: 300; } .chulo-section-head p a { color: var(--chulo-terracotta); } .chulo-section-head--center .chulo-section-head__grid { grid-template-columns: 1fr; justify-items: center; text-align: center; } /* Stack-Layout: Titel oben, Beschreibung darunter, linksbündig. Browser-Default-Margins der Überschrift + des Absatzes neutralisieren, damit nur das `gap` den Abstand bestimmt. */ .chulo-section-head--stack .chulo-section-head__grid { grid-template-columns: 1fr; gap: 14px; align-items: start; } .chulo-section-head--stack .chulo-section-head__grid > * { text-align: left; margin: 0; } .chulo-section-head--stack h1, .chulo-section-head--stack h2, .chulo-section-head--stack h3, .chulo-section-head--stack p { margin: 0; } .chulo-section-head--stack p { max-width: 720px; } /* ============================================================ CATEGORY GRID ============================================================ */ .chulo-cats .chulo-inner { padding-top: 20px; padding-bottom: 100px; } .chulo-cat-grid { display: grid; grid-template-columns: repeat(var(--chulo-cols-d, 4), 1fr); gap: 32px; } .chulo-cat-card { display: block; position: relative; cursor: pointer; } .chulo-cat-card__img { aspect-ratio: 3/4; overflow: hidden; background: var(--chulo-cream); margin-bottom: 20px; border-radius: var(--chulo-radius-md); box-shadow: var(--chulo-shadow-card); } .chulo-cat-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(0.2, 0.8, 0.2, 1); } .chulo-cat-card:hover .chulo-cat-card__img img { transform: scale(1.04); } .chulo-cat-card__meta { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px; } .chulo-cat-card h3 { font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 36, 'SOFT' 100; font-size: 26px; font-weight: 400; font-style: italic; color: var(--chulo-ink); line-height: 1; } .chulo-cat-card .count { font-size: 12px; color: var(--chulo-ink-light); letter-spacing: 0.04em; } /* ============================================================ PRODUCT CATALOG + FILTER + PAGINATION ============================================================ */ .chulo-catalog .chulo-inner { padding-top: 100px; padding-bottom: 110px; } .chulo-catalog__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; margin-bottom: 48px; flex-wrap: wrap; } .chulo-catalog__head h2 { font-variation-settings: 'opsz' 144, 'SOFT' 100; font-size: clamp(38px, 4.6vw, 62px); line-height: 1.02; letter-spacing: -0.02em; } .chulo-catalog__head h2 em { font-style: italic; color: var(--chulo-terracotta); font-weight: 400; } .chulo-filter-bar { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding: 24px 0 28px; margin-bottom: 36px; border-bottom: 1px solid var(--chulo-line); } .chulo-filter-bar.sticky { position: sticky; top: 0; background: var(--chulo-paper-light); z-index: 50; } .chulo-filters { display: flex; gap: 26px; flex-wrap: wrap; } .chulo-filter-btn { padding: 6px 0; font-size: 13px; letter-spacing: 0.04em; color: var(--chulo-ink-soft); border-bottom: 1px solid transparent; transition: color 0.3s, border-color 0.3s; } .chulo-filter-btn:hover { color: var(--chulo-ink); } .chulo-filter-btn.active { color: var(--chulo-ink); border-color: var(--chulo-terracotta); } .chulo-result-count { font-size: 13px; color: var(--chulo-ink-light); letter-spacing: 0.04em; white-space: nowrap; } .chulo-product-grid { display: grid; grid-template-columns: repeat(var(--chulo-cols-d, 4), 1fr); gap: 44px 28px; } .chulo-product-grid--4 { grid-template-columns: repeat(var(--chulo-cols-d, 4), 1fr); } .chulo-product-card { display: block; cursor: pointer; position: relative; } .chulo-product-img { /* FESTE Pixel-Höhe statt prozentualer Berechnung — jede Karte hat damit exakt dieselbe Bildhöhe. Bild wird per object-fit cover beschnitten. */ width: 100%; height: 360px; position: relative; overflow: hidden; background: var(--chulo-cream); margin-bottom: 18px; border-radius: var(--chulo-radius-md); box-shadow: 0 16px 32px -16px rgba(46, 31, 18, 0.2); } .chulo-product-img img { position: absolute; inset: 0; transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1); } .chulo-product-card:hover .chulo-product-img img { transform: scale(1.04); } .chulo-product-tag { position: absolute; top: 14px; left: 14px; z-index: 2; /* über den Stacking-Kontext des skalierten Bildes halten */ background: var(--chulo-paper); color: var(--chulo-ink); padding: 5px 11px; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; border-radius: var(--chulo-radius-sm); } .chulo-product-tag.accent { background: var(--chulo-terracotta); color: var(--chulo-paper); } .chulo-product-inquire { position: absolute; bottom: 14px; left: 50%; z-index: 2; transform: translateX(-50%) translateY(8px); opacity: 0; background: var(--chulo-ink); color: var(--chulo-paper); padding: 11px 22px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; transition: all 0.35s cubic-bezier(0.3, 0.9, 0.3, 1); display: inline-flex; align-items: center; gap: 8px; border-radius: var(--chulo-radius-sm); } .chulo-product-card:hover .chulo-product-inquire { transform: translateX(-50%) translateY(0); opacity: 1; } .chulo-product-inquire:hover { background: var(--chulo-terracotta); } .chulo-product-info { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 0 4px; } .chulo-product-info h4, .chulo-product-info .chulo-product-title { font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 24, 'SOFT' 80; font-size: 22px; font-weight: 400; line-height: 1.2; margin: 0 0 4px; color: var(--chulo-ink); } .chulo-product-info h4 em, .chulo-product-info .chulo-product-title em { font-style: italic; color: var(--chulo-terracotta); font-weight: 400; } .chulo-product-info .desc { font-size: 13px; color: var(--chulo-ink-soft); line-height: 1.5; } .chulo-product-price { font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 18, 'SOFT' 60; font-size: 17px; color: var(--chulo-ink); white-space: nowrap; font-weight: 400; } .chulo-product-price.request { font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--chulo-terracotta); font-weight: 400; } .chulo-catalog__more { text-align: center; margin-top: 64px; } .chulo-no-results { text-align: center; padding: 80px 0; color: var(--chulo-ink-soft); font-family: 'Fraunces', serif; font-style: italic; font-size: 20px; } .chulo-pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 72px; flex-wrap: wrap; } .chulo-pagination button, .chulo-pagination .page-numbers { min-width: 44px; height: 44px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; color: var(--chulo-ink); background: transparent; border: 1px solid var(--chulo-line); border-radius: 999px; transition: background 0.25s, color 0.25s, border-color 0.25s; } .chulo-pagination button:hover:not(:disabled):not(.active), .chulo-pagination a.page-numbers:hover { background: var(--chulo-cream); } .chulo-pagination button.active, .chulo-pagination .page-numbers.current { background: var(--chulo-terracotta); color: var(--chulo-paper-light); border-color: var(--chulo-terracotta); } .chulo-pagination button:disabled { opacity: 0.4; cursor: not-allowed; } .chulo-pagination .ellipsis { color: var(--chulo-ink-light); padding: 0 4px; } /* ============================================================ INQUIRY (contact links) ============================================================ */ .chulo-inquiry .chulo-inner { padding-top: 64px; padding-bottom: 64px; } .chulo-inquiry__box { max-width: 820px; margin: 0 auto; text-align: center; } .chulo-inquiry h2 { font-variation-settings: 'opsz' 144, 'SOFT' 100; font-size: clamp(36px, 4.4vw, 58px); line-height: 1.1; margin-bottom: 24px; } .chulo-inquiry h2 em { font-style: italic; color: var(--chulo-terracotta); font-weight: 400; } .chulo-inquiry__lead { font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 18, 'SOFT' 60; font-size: 17px; line-height: 1.65; color: var(--chulo-ink-soft); margin: 0 auto 44px; max-width: 560px; font-weight: 300; } .chulo-inquiry__contacts { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .chulo-inquiry__contact { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; font-size: 14px; color: var(--chulo-ink); background: var(--chulo-cream); border: 1px solid var(--chulo-line); border-radius: 999px; transition: background 0.3s, color 0.3s, border-color 0.3s; } .chulo-inquiry__contact i { color: var(--chulo-terracotta); transition: color 0.3s; } .chulo-inquiry__contact:hover { background: var(--chulo-ink); color: var(--chulo-paper); border-color: var(--chulo-ink); } .chulo-inquiry__contact:hover i { color: var(--chulo-terracotta-soft); } /* ============================================================ VISIT (info list + map) ============================================================ */ .chulo-visit .chulo-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; padding-top: 100px; padding-bottom: 100px; } .chulo-visit__text { display: flex; flex-direction: column; align-items: flex-start; max-width: 520px; justify-self: center; } .chulo-visit__text h2 { font-variation-settings: 'opsz' 144, 'SOFT' 100; font-size: clamp(36px, 4.4vw, 58px); line-height: 1.06; margin-bottom: 28px; } .chulo-visit__text h2 em { font-style: italic; color: var(--chulo-terracotta); font-weight: 400; } .chulo-visit__lead { font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 18, 'SOFT' 60; font-size: 16px; line-height: 1.7; color: var(--chulo-ink-soft); max-width: 440px; margin-bottom: 36px; font-weight: 300; } .chulo-visit__lead em { font-style: italic; color: var(--chulo-terracotta); } .chulo-info-list { display: flex; flex-direction: column; margin-bottom: 32px; max-width: 440px; } .chulo-info-row { display: grid; grid-template-columns: 140px 1fr; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--chulo-line); align-items: start; } .chulo-info-row:first-child { padding-top: 0; } .chulo-info-row:last-child { border-bottom: none; padding-bottom: 0; } .chulo-info-row .k { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--chulo-ink-soft); padding-top: 3px; } .chulo-info-row .v { font-size: 15px; color: var(--chulo-ink); line-height: 1.6; } .chulo-info-row .v a { color: inherit; transition: color 0.3s; } .chulo-info-row .v a:hover { color: var(--chulo-terracotta); } .chulo-visit__cta { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; } .chulo-visit__map { overflow: hidden; border-radius: var(--chulo-radius-lg); box-shadow: var(--chulo-shadow-img); height: 580px; max-width: 580px; width: 100%; justify-self: start; background: var(--chulo-cream); } .chulo-visit__map iframe { width: 100%; height: 100%; border: 0; display: block; } /* ============================================================ INFO BANNER ============================================================ */ .chulo-info-banner .chulo-inner { padding-top: 10px; padding-bottom: 10px; } .chulo-info-banner__inner { display: flex; align-items: flex-start; gap: 16px; background: var(--chulo-cream); border: 1px solid var(--chulo-line); border-left: 3px solid var(--chulo-terracotta); border-radius: var(--chulo-radius-md); padding: 20px 26px; font-size: 15px; line-height: 1.6; color: var(--chulo-ink); max-width: 880px; } .chulo-info-banner__inner i { color: var(--chulo-terracotta); font-size: 22px; flex-shrink: 0; margin-top: 1px; } /* ============================================================ TEXT-WIDGET (Fließtext mit Chulo-Typografie) ============================================================ */ .chulo-text { font-family: 'Inter', system-ui, sans-serif; font-size: 15px; line-height: 1.7; color: var(--chulo-ink-soft); } .chulo-text h2, .chulo-text h3, .chulo-text h4 { font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 36, 'SOFT' 80; font-weight: 400; color: var(--chulo-ink); line-height: 1.25; letter-spacing: -0.01em; } .chulo-text h2 { font-size: 22px; } .chulo-text h3 { font-size: 19px; } .chulo-text h4 { font-size: 17px; } .chulo-text h2:first-child, .chulo-text h3:first-child, .chulo-text h4:first-child { margin-top: 0 !important; } .chulo-text p { margin: 0 0 14px; } .chulo-text > *:last-child { margin-bottom: 0; } .chulo-text ul, .chulo-text ol { margin: 0 0 16px 22px; } .chulo-text li { margin-bottom: 6px; } .chulo-text strong { color: var(--chulo-ink); font-weight: 500; } .chulo-text a { color: var(--chulo-terracotta); } .chulo-text a:hover { text-decoration: underline; } .chulo-text blockquote { font-family: 'Fraunces', serif; font-style: italic; border-left: 3px solid var(--chulo-terracotta); padding: 4px 0 4px 18px; margin: 18px 0; color: var(--chulo-ink); } /* ============================================================ BREADCRUMB + LEGAL PAGES ============================================================ */ .chulo-legal { max-width: 860px; margin: 0 auto; padding: 100px var(--chulo-gutter) 110px; } .chulo-breadcrumb { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--chulo-ink-light); margin-bottom: 22px; display: flex; gap: 10px; align-items: center; } .chulo-breadcrumb a { color: var(--chulo-ink-light); transition: color 0.3s; } .chulo-breadcrumb a:hover { color: var(--chulo-terracotta); } .chulo-legal h1 { font-variation-settings: 'opsz' 144, 'SOFT' 100; font-size: clamp(40px, 5vw, 68px); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 16px; } .chulo-legal h1 em { font-style: italic; color: var(--chulo-terracotta); font-weight: 400; } .chulo-legal__intro { font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 18, 'SOFT' 60; font-size: 18px; color: var(--chulo-ink-soft); font-weight: 300; margin-bottom: 48px; max-width: 620px; } .chulo-legal__body h2 { font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 36, 'SOFT' 80; font-size: 22px; font-weight: 400; color: var(--chulo-ink); margin: 36px 0 10px; padding-top: 28px; border-top: 1px solid var(--chulo-line); } .chulo-legal__body h2:first-child { margin-top: 0; padding-top: 0; border-top: none; } .chulo-legal__body p { margin-bottom: 14px; color: var(--chulo-ink-soft); } .chulo-legal__body ul { margin: 0 0 16px 20px; color: var(--chulo-ink-soft); } .chulo-legal__body li { margin-bottom: 8px; } .chulo-legal__body strong { color: var(--chulo-ink); font-weight: 500; } .chulo-legal__body a { color: var(--chulo-terracotta); } .chulo-legal__body a:hover { text-decoration: underline; } /* ============================================================ PROMO POPUP ============================================================ */ .chulo-promo { position: fixed; right: 28px; bottom: 28px; z-index: 1100; width: 340px; max-width: calc(100vw - 40px); background: var(--chulo-ink); color: var(--chulo-paper); border-radius: var(--chulo-radius-lg); box-shadow: 0 24px 50px -16px rgba(46, 31, 18, 0.55); padding: 26px 26px 24px; transform: translateY(24px); opacity: 0; pointer-events: none; transition: opacity 0.5s ease, transform 0.5s var(--chulo-ease); } .chulo-promo.show { transform: translateY(0); opacity: 1; pointer-events: auto; } .chulo-promo__icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--chulo-terracotta); border-radius: 999px; margin-bottom: 16px; } .chulo-promo__icon i { font-size: 22px; color: var(--chulo-paper-light); } .chulo-promo__title { display: block; font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 24, 'SOFT' 80; font-style: italic; font-weight: 400; font-size: 21px; line-height: 1.25; margin-bottom: 10px; color: var(--chulo-paper-light); } .chulo-promo p { font-size: 14px; line-height: 1.6; color: rgba(242, 228, 203, 0.82); margin-bottom: 18px; } .chulo-promo__cta { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--chulo-terracotta-soft); transition: color 0.3s; } .chulo-promo__cta:hover { color: var(--chulo-paper-light); } .chulo-promo__close { position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 999px; color: rgba(242, 228, 203, 0.7); font-size: 18px; line-height: 1; transition: background 0.25s, color 0.25s; } .chulo-promo__close:hover { background: rgba(242, 228, 203, 0.12); color: var(--chulo-paper-light); } /* ============================================================ INQUIRY MODAL + TOAST ============================================================ */ .chulo-modal-overlay { position: fixed; inset: 0; z-index: 1200; background: rgba(46, 31, 18, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; } .chulo-modal-overlay.show { opacity: 1; visibility: visible; } .chulo-modal { background: var(--chulo-paper-light); border-radius: var(--chulo-radius-lg); box-shadow: 0 30px 70px -20px rgba(46, 31, 18, 0.5); width: 460px; max-width: 100%; padding: 40px 36px 36px; position: relative; transform: translateY(20px) scale(0.98); transition: transform 0.35s var(--chulo-ease); } .chulo-modal__close { top: 12px; right: 12px; } .chulo-modal-overlay.show .chulo-modal { transform: translateY(0) scale(1); } .chulo-modal__close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 999px; color: var(--chulo-ink-soft); font-size: 20px; line-height: 1; transition: background 0.25s, color 0.25s; } .chulo-modal__close:hover { background: var(--chulo-cream); color: var(--chulo-ink); } .chulo-modal .eyebrow { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--chulo-ink-light); margin-bottom: 10px; } .chulo-modal h3 { font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 36, 'SOFT' 100; font-weight: 400; font-size: 26px; line-height: 1.2; color: var(--chulo-ink); margin-bottom: 6px; } .chulo-modal h3 em { font-style: italic; color: var(--chulo-terracotta); } .chulo-modal__sub { font-size: 14px; color: var(--chulo-ink-soft); margin-bottom: 24px; } .chulo-modal .field { margin-bottom: 16px; } .chulo-modal label { display: block; font-size: 12px; letter-spacing: 0.06em; color: var(--chulo-ink-soft); margin-bottom: 6px; } .chulo-modal input[type="text"], .chulo-modal input[type="tel"], .chulo-modal input[type="email"] { width: 100%; padding: 12px 14px; font-family: inherit; font-size: 15px; color: var(--chulo-ink); background: var(--chulo-paper); border: 1px solid var(--chulo-line); border-radius: var(--chulo-radius-sm); transition: border-color 0.25s, box-shadow 0.25s; } .chulo-modal input:focus { outline: none; border-color: var(--chulo-terracotta); box-shadow: 0 0 0 3px rgba(181, 89, 60, 0.12); } .chulo-modal input.invalid { border-color: #C0492B; background: #F8E3DA; } .chulo-modal .field-check { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 18px; } .chulo-modal .field-check input { width: 17px; height: 17px; margin-top: 2px; flex-shrink: 0; accent-color: var(--chulo-terracotta); cursor: pointer; } .chulo-modal .field-check label { font-size: 13px; line-height: 1.5; color: var(--chulo-ink-soft); margin: 0; letter-spacing: 0; } .chulo-modal .field-check a { color: var(--chulo-terracotta); text-decoration: underline; } .chulo-modal .field-check.invalid label { color: #C0492B; } .chulo-modal__submit { width: 100%; margin-top: 8px; padding: 15px 28px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--chulo-terracotta); color: var(--chulo-paper-light); font-size: 13px; letter-spacing: 0.06em; border-radius: 999px; transition: background 0.3s, transform 0.2s; } .chulo-modal__submit:hover { background: var(--chulo-terracotta-dark); transform: translateY(-1px); } .chulo-modal__submit:disabled { opacity: 0.6; cursor: progress; transform: none; } .chulo-modal__hint { margin-top: 14px; font-size: 12px; color: var(--chulo-ink-light); text-align: center; line-height: 1.5; } .chulo-toast { position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(24px); z-index: 1300; background: var(--chulo-ink); color: var(--chulo-paper); padding: 16px 24px; border-radius: 999px; box-shadow: 0 20px 40px -14px rgba(46, 31, 18, 0.5); display: flex; align-items: center; gap: 12px; font-size: 14px; max-width: calc(100vw - 40px); opacity: 0; pointer-events: none; transition: opacity 0.4s, transform 0.4s var(--chulo-ease); } .chulo-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .chulo-toast i { color: var(--chulo-paper-light); background: var(--chulo-terracotta); width: 28px; height: 28px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; } /* ============================================================ FOOTER ============================================================ */ .chulo-footer { background: var(--chulo-ink); color: var(--chulo-paper); padding: 72px var(--chulo-gutter) 32px; position: relative; } .chulo-footer__top { max-width: 1400px; margin: 0 auto 48px; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 64px; padding-bottom: 44px; border-bottom: 1px solid rgba(242, 228, 203, 0.15); } .chulo-footer__logo { width: 170px; margin-bottom: 32px; padding: 16px; background: var(--chulo-paper-light); border-radius: var(--chulo-radius-sm); } .chulo-footer__logo img { width: 100%; height: auto; } .chulo-footer__slogan { font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 24, 'SOFT' 80; font-size: 22px; font-weight: 400; line-height: 1.3; color: rgba(242, 228, 203, 0.9); } .chulo-footer__slogan em { font-style: italic; color: var(--chulo-terracotta-soft); } .chulo-footer__sign { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(242, 228, 203, 0.15); font-family: 'Fraunces', serif; font-size: 14px; color: rgba(242, 228, 203, 0.6); max-width: 280px; } .chulo-footer__label { display: block; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--chulo-terracotta-soft); margin-bottom: 24px; font-weight: 400; } .chulo-footer ul { list-style: none; margin: 0; padding: 0; } .chulo-footer ul li { margin-bottom: 14px; font-size: 14px; color: rgba(242, 228, 203, 0.78); } .chulo-footer ul a { color: rgba(242, 228, 203, 0.78); transition: color 0.3s; display: inline-flex; align-items: center; gap: 8px; } .chulo-footer ul a:hover { color: var(--chulo-paper); } .chulo-footer__bottom { max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: rgba(242, 228, 203, 0.5); flex-wrap: wrap; gap: 16px; } .chulo-footer__bottom .legal { display: flex; gap: 24px; list-style: none; padding: 0; margin: 0; } .chulo-footer__bottom .legal li { list-style: none; } .chulo-footer__bottom a { color: rgba(242, 228, 203, 0.5); transition: color 0.3s; } .chulo-footer__bottom a:hover { color: var(--chulo-paper); } /* ============================================================ REVEAL ON SCROLL Nur wenn das Theme-JS aktiv ist (html.chulo-js) starten die Elemente unsichtbar. Ohne JS (z. B. Elementor-Editor, Reader) sind sie sichtbar — niemals "verschwundene" Inhalte. ============================================================ */ html.chulo-js .chulo-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.8s ease, transform 0.8s ease; } html.chulo-js .chulo-reveal.in { opacity: 1; transform: translateY(0); } /* Exit-Animation für Karten-Tausch (Kategoriefilter, Pagination). */ .chulo-product-card.chulo-out { opacity: 0; transform: translateY(-10px) scale(0.985); transition: opacity 0.25s ease, transform 0.25s ease; pointer-events: none; } @media (prefers-reduced-motion: reduce) { html.chulo-js .chulo-reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } } /* ============================================================ BILD-FÜLLREGELN — schlagen Elementors `.elementor-widget img` Reset (`height: auto`). Containerhöhe wird voll ausgenutzt. ============================================================ */ body.chulo .chulo-hero__image img, body.chulo .chulo-split__media img, body.chulo .chulo-cat-card__img img, body.chulo .chulo-product-img img, body.chulo .chulo-cat-card__img img { /* Bulletproof gegen Elementors `.elementor-widget img { height: auto }`. */ width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1100px) { :root { --chulo-header-h: 136px; } html { scroll-padding-top: 70px; } .chulo-nav { display: none; } .chulo-burger { display: flex; } .chulo-topbar-inner { gap: 16px; } .chulo-brand { height: 108px; } .chulo-topbar.scrolled .chulo-brand { height: 84px; } .chulo-hero .chulo-inner { grid-template-columns: 1fr; padding-top: 60px; padding-bottom: 48px; gap: 40px; } .chulo-hero__content { max-width: 100%; justify-self: stretch; } .chulo-hero__image { height: 440px; max-width: 100%; } .chulo-split .chulo-inner, .chulo-split--media-right .chulo-inner { grid-template-columns: 1fr; gap: 36px; padding-top: 60px; padding-bottom: 60px; } .chulo-split__media, .chulo-visit__map { max-width: 100%; height: 420px; justify-self: stretch; order: 2; } .chulo-split__text { max-width: 100%; justify-self: stretch; order: 1; } .chulo-visit .chulo-inner { grid-template-columns: 1fr; gap: 36px; padding-top: 60px; padding-bottom: 60px; } .chulo-visit__text { max-width: 100%; justify-self: stretch; } .chulo-cat-grid, .chulo-product-grid, .chulo-product-grid--4 { grid-template-columns: repeat(3, 1fr); } .chulo-section-head__grid { grid-template-columns: 1fr; gap: 20px; } .chulo-footer__top { grid-template-columns: 1fr 1fr; gap: 40px; } /* Tablet: feste Bildhöhe für Produktkarten. */ body.chulo .chulo-product-img { height: 300px !important; padding-top: 0 !important; } } @media (max-width: 640px) { :root { --chulo-header-h: 96px; } /* Noise-Layer auf Mobil dezent reduzieren: bessere Scroll-Performance bei OLED-/Low-End-Geräten, kein optischer Verlust. */ body.chulo::before { opacity: 0.18; } html { scroll-padding-top: 40px; } .chulo-topbar-inner { padding-left: 16px; padding-right: 16px; gap: 12px; } .chulo-brand { height: 72px; } .chulo-topbar.scrolled .chulo-brand { height: 58px; } /* Sprach-Switcher und Kontakt-Pille auf Mobil aus dem Topbar nehmen — beide leben im Burger-Drawer, damit Logo + Burger frei atmen. `:not(.chulo-lang--drawer)` schont das Drawer-Sprachmenü. */ .chulo-topbar .chulo-lang:not(.chulo-lang--drawer) { display: none; } .chulo-topbar .chulo-contact-btn { display: none; } .chulo-burger { width: 42px; height: 42px; } .chulo-hero .chulo-inner { padding-top: 40px; padding-bottom: 32px; gap: 32px; } .chulo-hero__image { height: 360px; } .chulo-cat-grid, .chulo-product-grid, .chulo-product-grid--4 { grid-template-columns: repeat(2, 1fr); gap: 24px 14px; } /* Kategorien-Karten mobil: Titel und Anzahl untereinander, damit lange Namen wie „Dekoration" nicht in den Zähler rauschen, und beide Karten gleich hoch bleiben. */ .chulo-cat-card__meta { flex-direction: column; align-items: flex-start; gap: 4px; } .chulo-cat-card h3 { font-size: 22px; line-height: 1.1; word-break: break-word; } .chulo-cat-card .count { font-size: 11px; } /* Karten gleiche Höhe via Grid-Auto-Rows. */ .chulo-cat-grid { grid-auto-rows: 1fr; } .chulo-cat-card { display: flex; flex-direction: column; height: 100%; } .chulo-cat-card__img { flex: 0 0 auto; } .chulo-info-row { grid-template-columns: 1fr; gap: 6px; } .chulo-visit__map { height: 340px; } /* Breadcrumb braucht auf Mobil mehr Atemraum zur Topbar. */ .chulo-breadcrumb { margin-top: 28px; } .chulo-footer { padding: 56px 20px 24px; } .chulo-footer__top { grid-template-columns: 1fr; gap: 28px; margin-bottom: 32px; padding-bottom: 28px; } .chulo-footer__logo { width: 140px; margin-bottom: 20px; } .chulo-footer__slogan { font-size: 19px; } .chulo-footer__bottom { flex-direction: column; align-items: flex-start; gap: 10px; } .chulo-filter-bar.sticky { position: static; } .chulo-modal { padding: 32px 24px 28px; } .chulo-promo { right: 16px; bottom: 16px; padding: 22px 22px 20px; } .chulo-legal { padding-top: 40px; padding-bottom: 64px; } /* ============================================================ MOBILE SECTION-SPACING OVERRIDE (HARDCAP) Erzwingt enge Sektionsabstände auf Phone-Viewports, unabhängig davon, was Elementor pro Widget in den responsive Slidern gespeichert hat. Hohe Spezifität schlägt Elementors generierte Inline-CSS für .elementor-element-XYZ .chulo-inner. ============================================================ */ body.chulo .chulo-hero .chulo-inner, body.chulo .chulo-split .chulo-inner, body.chulo .chulo-section-head .chulo-inner, body.chulo .chulo-cats .chulo-inner, body.chulo .chulo-catalog .chulo-inner, body.chulo .chulo-inquiry .chulo-inner, body.chulo .chulo-visit .chulo-inner, body.chulo .chulo-info-banner .chulo-inner { padding-top: 24px !important; padding-bottom: 28px !important; } /* Hero darf etwas mehr Luft oben — sonst wirkt es zu gedrungen. */ body.chulo .chulo-hero .chulo-inner { padding-top: 32px !important; padding-bottom: 36px !important; } body.chulo .chulo-info-banner .chulo-inner { padding-top: 8px !important; padding-bottom: 8px !important; } /* Produkt-Bilder bombenfest auf gleiche Höhe nageln. */ body.chulo .chulo-product-img { width: 100% !important; height: 240px !important; padding-top: 0 !important; } body.chulo .chulo-product-img > img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; } /* content-visibility kann während Lazy-Render Höhen-Flicker erzeugen — auf Mobil ausschalten. */ body.chulo .chulo-product-card { content-visibility: visible !important; contain-intrinsic-size: auto !important; } } /* ============================================================ SPEZIFITÄTS-GARANTIE Hält die Farben interaktiver Elemente über den `body.chulo a { color: inherit }` / `.chulo button` Resets (und über Elementor-Kit-Linkfarben). Kein !important nötig. ============================================================ */ body.chulo .chulo-btn { text-decoration: none; } body.chulo .chulo-btn--primary, body.chulo .chulo-btn--primary:hover, body.chulo .chulo-btn--primary:focus, body.chulo .chulo-modal__submit, body.chulo .chulo-modal__submit:hover { color: var(--chulo-paper-light); } body.chulo .chulo-btn--dark, body.chulo .chulo-btn--dark:hover, body.chulo .chulo-contact-btn, body.chulo .chulo-contact-btn:hover { color: var(--chulo-paper); } body.chulo .chulo-btn--ghost { color: var(--chulo-ink); } body.chulo .chulo-btn--ghost:hover { color: var(--chulo-paper-light); } body.chulo .chulo-lang-trigger, body.chulo .chulo-lang-trigger:hover { color: var(--chulo-paper-light); } body.chulo .chulo-product-inquire, body.chulo .chulo-product-inquire:hover { color: var(--chulo-paper); } body.chulo .chulo-inquiry__contact { color: var(--chulo-ink); } body.chulo .chulo-inquiry__contact:hover { color: var(--chulo-paper); } body.chulo .chulo-promo__cta { color: var(--chulo-terracotta-soft); } body.chulo .chulo-promo__cta:hover { color: var(--chulo-paper-light); } body.chulo .chulo-filter-btn { color: var(--chulo-ink-soft); } body.chulo .chulo-filter-btn:hover, body.chulo .chulo-filter-btn.active { color: var(--chulo-ink); } /* Elementor: Theme-Button-Farben nicht vom Kit überschreiben lassen */ .elementor-widget-container .chulo-btn--primary { color: var(--chulo-paper-light); } .elementor-widget-container .chulo-btn--ghost { color: var(--chulo-ink); } .elementor-widget-container .chulo-btn--dark { color: var(--chulo-paper); } /* Sprach-Switcher: gegen Elementor-Kit-Linkfarben absichern. Sowohl Trigger als auch Menü-Items inkl. der -Wrapper. */ body.chulo .chulo-lang-trigger, body.chulo .chulo-lang-trigger:hover, body.chulo .chulo-lang-trigger:focus, body.chulo .chulo-lang-trigger .chulo-lang-current, body.chulo .chulo-lang-trigger .chulo-lang-flag, body.chulo .chulo-lang-chevron { color: var(--chulo-paper-light); } body.chulo .chulo-lang-menu li, body.chulo .chulo-lang-menu li a, body.chulo .chulo-lang-menu li a:visited { color: var(--chulo-ink); } body.chulo .chulo-lang-menu li.current-lang, body.chulo .chulo-lang-menu li.current-lang a, body.chulo .chulo-lang-menu li[aria-selected="true"], body.chulo .chulo-lang-menu li[aria-selected="true"] a { color: var(--chulo-terracotta); }