/* ========================================================== Modern Reset (cmart) - Vereinheitlicht Browser Defaults - Barrierefrei (keine Focus-Styles entfernt) - Kompatibel mit Fluid Typography & Grid System ========================================================== */ /* 1. Box-Modell */ @import "../../node_modules/swiper/swiper-bundle.css"; *, *::before, *::after { box-sizing: border-box; } /* 2. Entferne Default Margin */ body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; } /* 3. Basiswerte */ html, body { min-height: 100%; padding: 0; border: 0; line-height: 1.5; font-family: var(--font-body, system-ui, sans-serif); color: var(--color-text, #111); background: var(--color-bg, #fff); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 4. Listen */ ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; } /* 5. Links */ a { color: inherit; text-decoration: none; } a:hover, a:focus-visible { text-decoration: underline; } /* 6. Medien */ img, picture, video, canvas, svg { display: block; max-width: 100%; } img { height: auto; } /* 7. Tabellen */ table { border-collapse: collapse; border-spacing: 0; width: 100%; } th, td { text-align: left; vertical-align: middle; } /* 8. Formulare */ input, button, textarea, select { font: inherit; color: inherit; margin: 0; border: none; background: none; } /* 9. Fokus sichtbar lassen */ :focus-visible { outline: 2px solid var(--color-accent, #3a6cf4); outline-offset: 2px; } /* 10. Root Block Elements */ :where(article, aside, nav, section, header, footer, main) { display: block; } /* 11. Utility: smoother scroll + motion respect */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .hide { display: none; } #loading, #successmessage, #errormessage { display: none; } @keyframes bounceOut { from { transform: scale(1); } to { transform: scale(1.2); } } @keyframes slideInShort { from { transform: rotateX(-15deg) translateY(100px); } to { transform: rotateX(0) translateY(0px); } } @keyframes slideMeIn { from { transform: rotateX(-60deg) translateY(300px); } to { transform: rotateX(0) translateY(0px); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } ul { list-style-type: none; } ul { margin: 0px; padding: 0px; } a:focus { outline: none; } /* =================================== COLOR SYSTEM =================================== */ :root { /* Grundfarben */ --color-black: #222222; --color-dark: #222222; --color-white: #ffffff; --color-grey: #D6D2C7; --color-lightgrey: #e9e7e2; /* Akzentfarbe */ --color-accent: #EB4F27; --color-accent-dark: #c84221; --color-accent-light: #f16846; /* Semantische Farben */ --color-text: var(--color-black); --color-sitebg: var(--color-grey); /* Typografie-Farben */ --color-h1: var(--color-black); --color-h2: var(--color-black); --color-h2-b: var(--color-accent); --color-h3: var(--color-black); --color-h4: var(--color-accent); --color-button: var(--color-accent); /* Logo */ --logocolor: var(--color-black); /* UI Variablen */ --var-borderradius: 2rem; --var-buttonborderraduis: 50px; --var-ease: cubic-bezier(0.4, 0, 0.2, 1); } /* ---------- BACKGROUND UTILITY MIXIN ---------- */ /* Generierte Utility-Klassen */ .bg--black { background-color: var(--color-black); } .bg--dark { background-color: var(--color-dark); } .bg--white { background-color: var(--color-white); } .bg--grey { background-color: var(--color-grey); } .bg--lightgrey { background-color: var(--color-lightgrey); } .bg--accent { background-color: var(--color-accent); } .bg--accent-dark { background-color: var(--color-accent-dark); } .bg--sitebg { background-color: var(--color-sitebg); } /* =================================== TYPOGRAPHY SYSTEM (LESS, MQ-gestuft) - 500→1700: Variablen in Stufen (ohne calc/clamp) - >1700: Upscale via html { font-size } (3 Stufen) - .fs(@name) Mixin mit automatischen Options =================================== */ /* ---------- 0) FONTS ---------- */ @font-face { font-family: "Mabry Pro"; src: url("/public/fonts/MabryRegular/font.woff2") format("woff2"), url("/public/fonts/MabryRegular/font.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Mabry Pro"; src: url("/public/fonts/MabryBold/font.woff2") format("woff2"), url("/public/fonts/MabryBold/font.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; } /* ---------- 1) DESIGN-TOKENS ---------- */ :root { --font-sans: "Mabry Pro", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-serif: Georgia, "Times New Roman", serif; --font-mono: ui-monospace, "SF Mono", Consolas, monospace; --font-body: var(--font-sans); --font-headings: var(--font-sans); --font-code: var(--font-mono); --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --fs-body-lh: 160%; --fs-eyebrow-lh: 1.3; --fs-subtitle-lh: 1.3; --fs-lead-lh: 1.4; --fs-imagecaption-lh: 105%; --fs-h3-lh: 1.15; --fs-bigtext-lh: 120%; --fs-h2-lh: 0.9; --fs-h1-lh: 0.9; --fs-button-lh: 1; } /* ---------- 2) PARAMS ---------- */ html { font-size: 10px; } /* ---------- 3) HELPER MIXINS ---------- */ /* A) Root-Up-Scale: staffelt html { font-size } in @levels Stufen */ /* B) Var-Scale: setzt --@name in Stufen von @min→@max */ /* ---------- 4) TYPO-TOKENS ---------- */ :root { --fs-body: 1.55rem; --fs-imagecaption: 1.25rem; --fs-h3: 2.6rem; --fs-bigtext: 2.8rem; --fs-h2: 4rem; --fs-h1: 4rem; --fs-eyebrow: 1.1rem; --fs-subtitle: 1.2rem; --fs-lead: 1.8rem; --fs-button: 1.67rem; } @media (min-width: 800px) { :root { --fs-body: 1.6375rem; } } @media (min-width: 1100px) { :root { --fs-body: 1.725rem; } } @media (min-width: 1400px) { :root { --fs-body: 1.8125rem; } } @media (min-width: 1700px) { :root { --fs-body: 1.9rem; } } @media (min-width: 800px) { :root { --fs-imagecaption: 1.3375rem; } } @media (min-width: 1100px) { :root { --fs-imagecaption: 1.425rem; } } @media (min-width: 1400px) { :root { --fs-imagecaption: 1.5125rem; } } @media (min-width: 1700px) { :root { --fs-imagecaption: 1.6rem; } } @media (min-width: 800px) { :root { --fs-h3: 2.95rem; } } @media (min-width: 1100px) { :root { --fs-h3: 3.3rem; } } @media (min-width: 1400px) { :root { --fs-h3: 3.65rem; } } @media (min-width: 1700px) { :root { --fs-h3: 4rem; } } @media (min-width: 800px) { :root { --fs-bigtext: 3.35rem; } } @media (min-width: 1100px) { :root { --fs-bigtext: 3.9rem; } } @media (min-width: 1400px) { :root { --fs-bigtext: 4.45rem; } } @media (min-width: 1700px) { :root { --fs-bigtext: 5rem; } } @media (min-width: 800px) { :root { --fs-h2: 5.25rem; } } @media (min-width: 1100px) { :root { --fs-h2: 6.5rem; } } @media (min-width: 1400px) { :root { --fs-h2: 7.75rem; } } @media (min-width: 1700px) { :root { --fs-h2: 9rem; } } @media (min-width: 800px) { :root { --fs-h1: 5.25rem; } } @media (min-width: 1100px) { :root { --fs-h1: 6.5rem; } } @media (min-width: 1400px) { :root { --fs-h1: 7.75rem; } } @media (min-width: 1700px) { :root { --fs-h1: 9rem; } } @media (min-width: 800px) { :root { --fs-eyebrow: 1.175rem; } } @media (min-width: 1100px) { :root { --fs-eyebrow: 1.25rem; } } @media (min-width: 1400px) { :root { --fs-eyebrow: 1.325rem; } } @media (min-width: 1700px) { :root { --fs-eyebrow: 1.4rem; } } @media (min-width: 800px) { :root { --fs-subtitle: 1.3rem; } } @media (min-width: 1100px) { :root { --fs-subtitle: 1.4rem; } } @media (min-width: 1400px) { :root { --fs-subtitle: 1.5rem; } } @media (min-width: 1700px) { :root { --fs-subtitle: 1.6rem; } } @media (min-width: 800px) { :root { --fs-lead: 1.95rem; } } @media (min-width: 1100px) { :root { --fs-lead: 2.1rem; } } @media (min-width: 1400px) { :root { --fs-lead: 2.25rem; } } @media (min-width: 1700px) { :root { --fs-lead: 2.4rem; } } @media (min-width: 800px) { :root { --fs-button: 1.7775rem; } } @media (min-width: 1100px) { :root { --fs-button: 1.885rem; } } @media (min-width: 1400px) { :root { --fs-button: 1.9925rem; } } @media (min-width: 1700px) { :root { --fs-button: 2.1rem; } } /* ---------- 5) UPSCALE > 1700 ---------- */ @media (min-width: 1900px) { html { font-size: 11px; } } @media (min-width: 2556px) { html { font-size: 12px; } } @media (min-width: 2884px) { html { font-size: 13px; } } @media (min-width: 3212px) { html { font-size: 14px; } } @media (min-width: 3540px) { html { font-size: 15px; } } /* ---------- 6) .fs() MIXIN ---------- */ /* Default options */ /* Heading options */ /* ---------- 7) BASE STYLES ---------- */ html { font-family: var(--font-body); font-weight: var(--weight-regular); color: var(--color-text); font-kerning: normal; font-variant-ligatures: common-ligatures contextual; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #wrap { font-size: var(--fs-body); line-height: var(--fs-body-lh); } /* ---------- 8) SEMANTIC ELEMENTS ---------- */ h1 { font-size: var(--fs-h1); line-height: var(--fs-h1-lh); color: var(--color-h1, inherit); font-family: var(--font-headings); font-weight: var(--weight-regular); } h1 strong, h1 b { font-weight: inherit; color: var(--color-accent); } h2 { font-size: var(--fs-h2); line-height: var(--fs-h2-lh); color: var(--color-h2, inherit); font-family: var(--font-headings); font-weight: var(--weight-regular); margin-bottom: 0.8em; } h2 strong, h2 b { font-weight: inherit; color: var(--color-accent); } h3 { font-size: var(--fs-h3); line-height: var(--fs-h3-lh); color: var(--color-h3, inherit); font-family: var(--font-headings); font-weight: var(--weight-regular); } h3 strong, h3 b { font-weight: inherit; color: var(--color-accent); } h4 { font-size: var(--fs-subtitle); line-height: var(--fs-subtitle-lh); color: var(--color-subtitle, inherit); font-family: var(--font-sans); font-weight: var(--weight-regular); text-transform: uppercase; letter-spacing: 0.04em; } /* ---------- 9) ROLE MIXINS ---------- */ /* ---------- 10) UTILITY CLASSES ---------- */ .eyebrow, .cm-eyebrow { font-size: var(--fs-eyebrow); line-height: var(--fs-eyebrow-lh); color: var(--color-eyebrow, inherit); font-family: var(--font-sans); font-weight: var(--weight-regular); text-transform: uppercase; letter-spacing: 0.06em; } .subtitle, .cm-subtitle { font-size: var(--fs-subtitle); line-height: var(--fs-subtitle-lh); color: var(--color-subtitle, inherit); font-family: var(--font-sans); font-weight: var(--weight-regular); text-transform: uppercase; letter-spacing: 0.04em; } .lead, .cm-lead { font-size: var(--fs-lead); line-height: var(--fs-lead-lh); color: var(--color-lead, inherit); font-weight: var(--weight-regular); } .btn-text, .cm-btn-text { font-size: var(--fs-button); line-height: var(--fs-button-lh); color: var(--color-button, inherit); font-family: var(--font-sans); font-weight: var(--weight-regular); } .bigtext, .cm-bigtext { font-size: var(--fs-bigtext); line-height: var(--fs-bigtext-lh); color: var(--color-bigtext, inherit); font-family: var(--font-headings); font-weight: var(--weight-regular); } /* ========================================================= LAYOUT SYSTEM (cm-) - Spacing Tokens + Mixins (stack/cluster/inset/bleed) - Grid mit benannten Linien (m, c, m-end) - Column-Mixins (.col / .col-md / .col-sm / .col-at) - Presets (content/narrow/wide/center/full/bleed/sidebars) ========================================================= */ /* ---------- PARAMS ---------- */ /* ---------- Spacing Tokens (stufig, ohne calc/clamp) ---------- */ :root { --var-margin-default: 12rem; --var-margin-small: 5rem; --var-margin-medium: 12rem; --var-margin-negative: -5rem; --var-margin-row: 2rem; /* Gaps */ --var-row-gap: 3rem; --var-grid-gap: 1rem; /* Bodymargin */ --var-bodymargin: 2.4rem; --var-margin-left: 1rem; } @media (min-width: 800px) { :root { --var-margin-default: 16.5rem; } } @media (min-width: 1100px) { :root { --var-margin-default: 21rem; } } @media (min-width: 1400px) { :root { --var-margin-default: 25.5rem; } } @media (min-width: 1700px) { :root { --var-margin-default: 30rem; } } @media (min-width: 800px) { :root { --var-margin-small: 7.5rem; } } @media (min-width: 1100px) { :root { --var-margin-small: 10rem; } } @media (min-width: 1400px) { :root { --var-margin-small: 12.5rem; } } @media (min-width: 1700px) { :root { --var-margin-small: 15rem; } } @media (min-width: 800px) { :root { --var-margin-medium: 14.5rem; } } @media (min-width: 1100px) { :root { --var-margin-medium: 17rem; } } @media (min-width: 1400px) { :root { --var-margin-medium: 19.5rem; } } @media (min-width: 1700px) { :root { --var-margin-medium: 22rem; } } @media (min-width: 800px) { :root { --var-margin-negative: -7.5rem; } } @media (min-width: 1100px) { :root { --var-margin-negative: -10rem; } } @media (min-width: 1400px) { :root { --var-margin-negative: -12.5rem; } } @media (min-width: 1700px) { :root { --var-margin-negative: -15rem; } } @media (min-width: 800px) { :root { --var-margin-row: 3rem; } } @media (min-width: 1100px) { :root { --var-margin-row: 4rem; } } @media (min-width: 1400px) { :root { --var-margin-row: 5rem; } } @media (min-width: 1700px) { :root { --var-margin-row: 6rem; } } @media (min-width: 800px) { :root { --var-row-gap: 4rem; } } @media (min-width: 1100px) { :root { --var-row-gap: 5rem; } } @media (min-width: 1400px) { :root { --var-row-gap: 6rem; } } @media (min-width: 1700px) { :root { --var-row-gap: 7rem; } } @media (min-width: 800px) { :root { --var-grid-gap: 1.25rem; } } @media (min-width: 1100px) { :root { --var-grid-gap: 1.5rem; } } @media (min-width: 1400px) { :root { --var-grid-gap: 1.75rem; } } @media (min-width: 1700px) { :root { --var-grid-gap: 2rem; } } @media (min-width: 800px) { :root { --var-bodymargin: 3.3rem; } } @media (min-width: 1100px) { :root { --var-bodymargin: 4.2rem; } } @media (min-width: 1400px) { :root { --var-bodymargin: 5.1rem; } } @media (min-width: 1700px) { :root { --var-bodymargin: 6rem; } } @media (min-width: 800px) { :root { --var-margin-left: 1.75rem; } } @media (min-width: 1100px) { :root { --var-margin-left: 2.5rem; } } @media (min-width: 1400px) { :root { --var-margin-left: 3.25rem; } } @media (min-width: 1700px) { :root { --var-margin-left: 4rem; } } /* ---------- Grid Basis ---------- */ /* ---------- SPACING UTILITIES ---------- */ /* Oeffentliche Utilities */ .cm-mt, .margintop { margin-top: var(--var-margin-default); } .cm-mt--50vh, .margintop--50vh { margin-top: 50vh; } .cm-mt--small, .margintop--small { margin-top: var(--var-margin-small); } .cm-mt--negative, .margintop--negative { margin-top: var(--var-margin-negative); } .cm-mt--medium, .margintop--medium { margin-top: var(--var-margin-medium); } .cm-mt--row, .margintop--row { margin-top: var(--var-margin-row); } .cm-mt--none, .margintop--none { margin-top: 0; } .cm-pt, .paddingtop { padding-top: var(--var-margin-default); } .cm-pt--50vh, .paddingtop--50vh { padding-top: 50vh; } .cm-pt--small, .paddingtop--small { padding-top: var(--var-margin-small); } .cm-pt--negative, .paddingtop--negative { padding-top: var(--var-margin-negative); } .cm-pt--medium, .paddingtop--medium { padding-top: var(--var-margin-medium); } .cm-pt--row, .paddingtop--row { padding-top: var(--var-margin-row); } .cm-pt--none, .paddingtop--none { padding-top: 0; } .cm-mb, .marginbottom { margin-bottom: var(--var-margin-default); } .cm-mb--50vh, .marginbottom--50vh { margin-bottom: 50vh; } .cm-mb--small, .marginbottom--small { margin-bottom: var(--var-margin-small); } .cm-mb--negative, .marginbottom--negative { margin-bottom: var(--var-margin-negative); } .cm-mb--medium, .marginbottom--medium { margin-bottom: var(--var-margin-medium); } .cm-mb--row, .marginbottom--row { margin-bottom: var(--var-margin-row); } .cm-mb--none, .marginbottom--none { margin-bottom: 0; } .cm-pb, .paddingbottom { padding-bottom: var(--var-margin-default); } .cm-pb--50vh, .paddingbottom--50vh { padding-bottom: 50vh; } .cm-pb--small, .paddingbottom--small { padding-bottom: var(--var-margin-small); } .cm-pb--negative, .paddingbottom--negative { padding-bottom: var(--var-margin-negative); } .cm-pb--medium, .paddingbottom--medium { padding-bottom: var(--var-margin-medium); } .cm-pb--row, .paddingbottom--row { padding-bottom: var(--var-margin-row); } .cm-pb--none, .paddingbottom--none { padding-bottom: 0; } /* Legacy Utilities (margintop, marginbottom, etc.) */ .margintop { margin-top: var(--var-margin-default); } .margintop--50vh { margin-top: 50vh; } .margintop--small { margin-top: var(--var-margin-small); } .margintop--negative { margin-top: var(--var-margin-negative); } .margintop--medium { margin-top: var(--var-margin-medium); } .margintop--row { margin-top: var(--var-margin-row); } .margintop--none { margin-top: 0; } .marginbottom { margin-bottom: var(--var-margin-default); } .marginbottom--50vh { margin-bottom: 50vh; } .marginbottom--small { margin-bottom: var(--var-margin-small); } .marginbottom--negative { margin-bottom: var(--var-margin-negative); } .marginbottom--medium { margin-bottom: var(--var-margin-medium); } .marginbottom--row { margin-bottom: var(--var-margin-row); } .marginbottom--none { margin-bottom: 0; } .paddingtop { padding-top: var(--var-margin-default); } .paddingtop--50vh { padding-top: 50vh; } .paddingtop--small { padding-top: var(--var-margin-small); } .paddingtop--negative { padding-top: var(--var-margin-negative); } .paddingtop--medium { padding-top: var(--var-margin-medium); } .paddingtop--row { padding-top: var(--var-margin-row); } .paddingtop--none { padding-top: 0; } .paddingbottom { padding-bottom: var(--var-margin-default); } .paddingbottom--50vh { padding-bottom: 50vh; } .paddingbottom--small { padding-bottom: var(--var-margin-small); } .paddingbottom--negative { padding-bottom: var(--var-margin-negative); } .paddingbottom--medium { padding-bottom: var(--var-margin-medium); } .paddingbottom--row { padding-bottom: var(--var-margin-row); } .paddingbottom--none { padding-bottom: 0; } /* ---------- CONTENT SPACING (mit :has()) ---------- */ /* ======== */ /* ======== */ /* ABSTÄNDE */ /* ======== */ /* ======== */ li.content + li.content, #content > div + div, .contentbox > div + div, #content > div + ul, #content > ul + div, .contentbox > div + ul, .contentbox > ul + div { margin-top: var(--var-margin-default); } li.content + li.content.cm-listinfos--card, #content > div + div.cm-listinfos--card, .contentbox > div + div.cm-listinfos--card, #content > div + ul.cm-listinfos--card, #content > ul + div.cm-listinfos--card, .contentbox > div + ul.cm-listinfos--card, .contentbox > ul + div.cm-listinfos--card { margin-top: var(--var-margin-small); } #content div.textblock + ul.listinfos.button, #content li.content.textblock + li.listinfos.button { margin-top: var(--var-margin-small); } #content li.content.headline + li.content.textblock, #content .singleheadline + div.textblock { margin-top: var(--var-margin-small); } #content li.cover:has(.cm-cover--default) + li.content { margin-top: 0; } #content div.cm-cover--default + div { margin-top: 0; } /* ---------- ABSOLUTE MEDIA MIXIN ---------- */ /* ---------- VIDEO PLAY INDICATOR ---------- */ .has-video { position: relative; } .has-video::after { content: "\25B6"; /* Play Symbol */ position: absolute; inset: 0; display: grid; place-items: center; font-size: 5rem; color: white; text-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2); opacity: 1; pointer-events: none; transition: opacity 0.3s ease; } .has-video.is-playing::after { opacity: 0; } /* Cover: Play-Button unten */ div.cover .has-video::after { align-items: end; justify-items: center; padding-bottom: 1.5rem; } /* ---------- CENTERING UTILITIES ---------- */ .cm-center { text-align: center; } .cm-text-center, .textcentering { text-align: center; } .cm-text-center p, .textcentering p { text-align: center; } .bistro-menus { width: 90%; margin-left: 5%; display: flex; justify-content: space-between; } .bistro-menus a { border-radius: 30px 0 0 30px; font-size: var(--fs-h1); line-height: var(--fs-h1-lh); color: var(--color-h1, inherit); font-family: var(--font-headings); font-weight: var(--weight-regular); text-align: center; position: relative; display: inline-block; height: 50rem; width: calc(50% - 2px); padding-top: 10rem; line-height: 0.9; background: var(--color-accent); color: var(--color-sitebg); text-decoration: none; transition: 0.4s all ease; } .bistro-menus a strong, .bistro-menus a b { font-weight: inherit; color: var(--color-accent); } .bistro-menus a strong { font-weight: normal; color: var(--color-sitebg); display: block; margin-bottom: 4rem; } .bistro-menus a:nth-child(2) { border-radius: 0 30px 30px 0px; } .bistro-menus a:hover { background: var(--color-black); color: var(--color-accent); transform: translate(0, -5px); } .bistro-menus svg { max-height: 7rem; display: inline-block; pointer-events: none; } .bistro-menu { width: 90%; margin-left: 5%; max-width: 70rem; margin-left: auto; margin-right: auto; } .bistro-menu a { border-radius: 30px; font-size: var(--fs-h1); line-height: var(--fs-h1-lh); color: var(--color-h1, inherit); font-family: var(--font-headings); font-weight: var(--weight-regular); text-align: center; position: relative; display: inline-block; height: auto; width: 100%; padding: 10rem 0; line-height: 0.9; background: var(--color-accent); color: var(--color-sitebg); text-decoration: none; transition: 0.4s all ease; } .bistro-menu a strong, .bistro-menu a b { font-weight: inherit; color: var(--color-accent); } .bistro-menu a strong { font-weight: normal; color: var(--color-sitebg); display: block; margin-bottom: 4rem; } .bistro-menu a:hover { background: var(--color-black); color: var(--color-accent); transform: translate(0, -5px); } .bistro-menu svg { max-height: 7rem; display: inline-block; pointer-events: none; } @font-face { font-family: 'icomoon'; src: url('/public/fonts/icomoon.eot?u8ox1g'); src: url('/public/fonts/icomoon.eot?u8ox1g#iefix') format('embedded-opentype'), url('/public/fonts/icomoon.ttf?u8ox1g') format('truetype'), url('/public/fonts/icomoon.woff?u8ox1g') format('woff'), url('/public/fonts/icomoon.svg?u8ox1g#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; } [class^="icon-"], [class*=" icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'icomoon' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-gondola:before { content: "\e920"; } .icon-phone:before { content: "\e967"; } .icon-link:before { content: "\e980"; } .icon-house:before { content: "\e90c"; } .icon-home:before { content: "\e90e"; } .icon-glass:before { content: "\e985"; } .icon-glass-whiskey:before { content: "\e987"; } .icon-facebook:before { content: "\e905"; } .icon-instagram:before { content: "\e907"; } .icon-spotify:before { content: "\e90a"; } .icon-tripadvisor:before { content: "\e970"; } .icon-youtube:before { content: "\e90d"; } .icon-arrow-down:before { content: "\e914"; } .icon-arrow-left:before { content: "\e915"; } .icon-arrow-right:before { content: "\e916"; } .icon-arrow-up:before { content: "\e917"; } .icon-comment:before { content: "\e92a"; } .icon-comments:before { content: "\e92b"; } .icon-envelope:before { content: "\e92d"; } .icon-external-link:before { content: "\e902"; } .icon-external-link-square:before { content: "\e903"; } .icon-map-marker:before { content: "\e93e"; } .icon-map:before { content: "\e940"; } .icon-money-bill:before { content: "\e904"; } .icon-newspaper:before { content: "\e943"; } .icon-print:before { content: "\e948"; } .icon-quote-right:before { content: "\e906"; } .icon-snowflake:before { content: "\e974"; } .icon-tag:before { content: "\e950"; } .icon-tags:before { content: "\e951"; } .icon-thumbs-down:before { content: "\e953"; } .icon-thumbs-up:before { content: "\e954"; } .icon-toggle-off:before { content: "\e908"; } .icon-toggle-on:before { content: "\e909"; } .icon-trash:before { content: "\e90b"; } .icon-eat:before { content: "\e95b"; } /* ================================= HEADER - Basis-Styles ================================= */ #header { position: relative; z-index: 100; width: 100%; padding: 2rem var(--var-bodymargin, 2rem); display: flex; margin-top: 10rem; align-items: center; justify-content: space-between; } @media screen and (max-width: 1000px) { #header { margin-top: 8rem; } } @media screen and (max-width: 800px) { #header { margin-top: 6rem; } } #header > a, #header > div { border-radius: 100px; border: 1px solid var(--color-black); } #header > a, #header > div a { padding: 1rem 1.4rem; text-decoration: none; font-size: 1.6rem; line-height: normal; display: inline-block; } #header > div { padding: 0 1rem; } #header > div a { padding: 1rem 1rem; } @media screen and (max-width: 620px) { #header { margin-top: 2rem; } #header > a, #header > div { display: inline-block; } #header > a:nth-child(2) { display: none; } } @media screen and (max-width: 530px) { #header > a:nth-child(1) { display: none; } } @media screen and (max-width: 370px) { #header > a:nth-child(3) { display: none; } } #header .langs { text-transform: uppercase; } #header .langs .long { display: none; } #header .langs .active { display: none; } /* ================================= FOOTER - Basis-Styles ================================= */ #footer { width: 100%; padding: 4rem var(--var-bodymargin, 2rem); } #footer #footer__content { margin-bottom: 2rem; padding: 8rem 0; text-align: center; display: flex; align-items: center; justify-content: center; gap: 4rem; flex-wrap: wrap; } #footer #footer__content a { font-size: 3rem; text-decoration: none; line-height: 1; } @media screen and (max-width: 900px) { #footer #footer__content a { font-size: 2.8rem; } } @media screen and (max-width: 600px) { #footer #footer__content a { font-size: 2.2rem; } } #footer #footer__content a strong { font-weight: normal; } #footer #footer__partner { text-align: center; display: flex; gap: 5rem; align-items: center; justify-content: center; margin-bottom: 4rem; } #footer #footer__partner img { height: 5rem; } #footer #footer__imprint { display: flex; flex-wrap: wrap; gap: 1rem 2rem; border-top: 1px solid var(--color-black); padding-top: 2rem; font-size: 1.4rem; } @media screen and (max-width: 768px) { #footer #footer__imprint { flex-direction: column; text-align: center; } } #footer #footer__imprint a { color: var(--color-text); transition: 0.2s color var(--var-ease); text-decoration: none; } #footer #footer__imprint a:hover { color: var(--color-accent); text-decoration: none; } #footer #footer__imprint a.zmart { margin-left: auto; } @media screen and (max-width: 768px) { #footer #footer__imprint a.zmart { margin-left: 0; margin-top: 1rem; } } /* =========================== BUTTON SYSTEM (cm-) Beispiel-Markup: Kontakt aufnehmen Mehr erfahren =========================== */ /* Tokens */ :root { --button-radius: var(--var-buttonborderraduis, 100px); --button-ease: var(--var-ease, cubic-bezier(0.2, 0.8, 0.2, 1)); --btn-gap: 0.6rem; --btn-py: 0.7em; --btn-px: 1.3em; --btn-bg: transparent; --btn-fg: var(--color-accent); --btn-bg-light: transparent; --btn-fg-light: var(--color-text); } /* Mixins */ /* Hover mit Fuell-Effekt */ @keyframes icon-shoot { 0% { transform: translate(0, -50%) rotate(-45deg) scale(1); } 20% { transform: translate(-0.3rem, -50%) rotate(-45deg) scale(0.8); } 40% { transform: translate(1.2rem, -50%) rotate(-20deg) scale(1.15); } 60% { transform: translate(-0.2rem, -50%) rotate(-55deg) scale(0.95); } 80% { transform: translate(0.1rem, -50%) rotate(-42deg) scale(1.02); } 100% { transform: translate(0, -50%) rotate(-45deg) scale(1); } } /* Hauptklasse: cm-button (+ Alias: c-button) */ .cm-button, .c-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--btn-gap); position: relative; text-decoration: none; cursor: pointer; padding: var(--btn-py) var(--btn-px); border-radius: var(--button-radius); border: 1px solid var(--btn-fg); background: var(--btn-bg); color: var(--btn-fg); overflow: hidden; -webkit-tap-highlight-color: transparent; font-size: var(--fs-button); line-height: var(--fs-button-lh); color: var(--color-button, inherit); font-family: var(--font-sans); font-weight: var(--weight-regular); /* Fuell-Element fuer Hover-Effekt */ transition: 0.2s all var(--button-ease); } .cm-button > span, .c-button > span { display: inline-block; position: relative; } .cm-button:focus-visible, .c-button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .cm-button span.cm-button__icon, .c-button span.cm-button__icon { position: absolute; right: 2rem; top: 50%; transform: translate(0, -50%) rotate(-45deg); font-size: 0.7em; z-index: 2; } .cm-button::before, .c-button::before { content: ''; position: absolute; left: 0; top: 0; width: 0; height: 100%; background: var(--btn-fg); z-index: 1; } .cm-button .cm-button__title, .c-button .cm-button__title, .cm-button .cm-button__label, .c-button .cm-button__label { position: relative; z-index: 2; } .cm-button .cm-button__title, .c-button .cm-button__title, .cm-button .cm-button__label, .c-button .cm-button__label { transition: color 0.25s var(--button-ease), transform 0.3s var(--button-ease); } .cm-button .cm-button__icon, .c-button .cm-button__icon { transition: color 0.25s var(--button-ease); } .cm-button::before, .c-button::before { transition: width 0.25s var(--button-ease); } @media (hover: hover) { .cm-button:hover, .c-button:hover { text-decoration: none; transform: scale(1.02); } .cm-button:hover::before, .c-button:hover::before { width: 100%; } .cm-button:hover .cm-button__title, .c-button:hover .cm-button__title, .cm-button:hover .cm-button__label, .c-button:hover .cm-button__label { color: var(--color-text); } .cm-button:hover .cm-button__icon, .c-button:hover .cm-button__icon { color: var(--color-text); animation: icon-shoot 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.1s; } } .cm-button:active, .c-button:active { transform: translateY(1px) scale(0.98); } .cm-button__icon, .c-button__icon { line-height: 0; display: inline-flex; align-items: center; justify-content: center; } .cm-button__label, .c-button__label { display: inline-block; } .cm-button--light, .c-button--light { --btn-bg: var(--btn-bg-light); --btn-fg: var(--btn-fg-light); } .cm-button--text, .c-button--text { background: none; padding: 0; border-radius: 0; border: none; --btn-bg: transparent; --btn-fg: var(--color-accent); gap: 0.4rem; padding-right: 0; } .cm-button--text::before, .c-button--text::before { display: none; } @media (hover: hover) { .cm-button--text:hover, .c-button--text:hover { text-decoration: underline; filter: none; transform: none; } } .cm-button--text .cm-button__icon, .c-button--text .cm-button__icon { display: none; } .cm-button--sm, .c-button--sm { --btn-py: 0.6rem; --btn-px: 1.2rem; font-size: var(--fs-button); } .cm-button--lg, .c-button--lg { --btn-py: 2em; --btn-px: 4rem; font-size: var(--fs-button); } .cm-button--lg span, .c-button--lg span { font-size: 1.5em; } .cm-button:disabled, .c-button:disabled, .cm-button[aria-disabled="true"], .c-button[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* Button Spacing */ a.cm-button + a.cm-button, a.cm-button + span.cm-button, span.cm-button + a.cm-button, span.cm-button + span.cm-button { margin-left: 2rem; } @media (hover: hover) { a.cm-button, span.cm-button { transition: 0.2s all var(--button-ease); } a.cm-button .cm-button__title, span.cm-button .cm-button__title, a.cm-button .cm-button__label, span.cm-button .cm-button__label { transition: color 0.25s var(--button-ease), transform 0.3s var(--button-ease); } a.cm-button .cm-button__icon, span.cm-button .cm-button__icon { transition: color 0.25s var(--button-ease); } a.cm-button::before, span.cm-button::before { transition: width 0.25s var(--button-ease); } a.cm-button:active, span.cm-button:active { transform: translateY(1px) scale(0.98); } } @media (hover: hover) and (hover: hover) { a.cm-button:hover, span.cm-button:hover { text-decoration: none; transform: scale(1.02); } a.cm-button:hover::before, span.cm-button:hover::before { width: 100%; } a.cm-button:hover .cm-button__title, span.cm-button:hover .cm-button__title, a.cm-button:hover .cm-button__label, span.cm-button:hover .cm-button__label { color: var(--color-text); } a.cm-button:hover .cm-button__icon, span.cm-button:hover .cm-button__icon { color: var(--color-text); animation: icon-shoot 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.1s; } } /* Alias-Mixins */ /* Button in Listen */ ul.listinfos.button { text-align: center; } ul.listinfos.button li.button { display: inline-block; } ul.listinfos.button li.button + li.button { margin-left: 1rem; } ul.listinfos.button.style--large .cm-button { --btn-py: 2em; --btn-px: 4rem; font-size: var(--fs-button); } ul.listinfos.button.style--large .cm-button span { font-size: 1.5em; } div.singleheadline { position: relative; float: none; margin: 0 auto; clear: left; display: grid; width: 100%; column-gap: var(--var-grid-gap); grid-template-columns: [m] var(--var-bodymargin) repeat(12, [c] 1fr) [m-end] var(--var-bodymargin); } div.singleheadline h1, div.singleheadline h2, div.singleheadline h3 { grid-column: 2 / span 12; max-width: 30ch; margin: 0 auto; } @media screen and (max-width: 900px) { div.singleheadline.longtext h1 { font-size: var(--fs-h3); } } div.singleheadline h3 { max-width: 42ch; } #content { /* Haupttextbereiche */ /* Abstand zwischen aufeinanderfolgenden Blöcken */ } #content .cm-text-center, #content .textcentering { text-align: center; } #content .cm-text-center p, #content .textcentering p { text-align: center; } #content .cm-text, #content .textobj { /* Basis-Elemente */ /* Abstände zwischen Elementen */ /* Verhindere zusätzliche p-Margins in verschachtelten Strukturen */ /* Unordered Lists mit einfachem Bullet */ /* Bilder im Fließtext */ } #content .cm-text p, #content .textobj p, #content .cm-text li, #content .textobj li, #content .cm-text td, #content .textobj td { font-size: var(--fs-body); line-height: var(--fs-body-lh); color: var(--color-body, inherit); font-weight: var(--weight-regular); max-width: 65ch; } #content .cm-text p + ul, #content .textobj p + ul, #content .cm-text p + p, #content .textobj p + p, #content .cm-text ul + p, #content .textobj ul + p, #content .cm-text ul + h2, #content .textobj ul + h2, #content .cm-text ul + h3, #content .textobj ul + h3, #content .cm-text ul + h4, #content .textobj ul + h4, #content .cm-text p + h2, #content .textobj p + h2, #content .cm-text p + h3, #content .textobj p + h3 { margin-top: 1em; } #content .cm-text h2 + p, #content .textobj h2 + p, #content .cm-text h3 + p, #content .textobj h3 + p, #content .cm-text h4 + p, #content .textobj h4 + p, #content .cm-text h2 + ul, #content .textobj h2 + ul, #content .cm-text h3 + ul, #content .textobj h3 + ul, #content .cm-text h4 + ul, #content .textobj h4 + ul { margin-top: 3rem; } #content .cm-text h1 p, #content .textobj h1 p, #content .cm-text h2 p, #content .textobj h2 p, #content .cm-text h3 p, #content .textobj h3 p, #content .cm-text h4 p, #content .textobj h4 p, #content .cm-text p p, #content .textobj p p, #content .cm-text ul p, #content .textobj ul p { margin-bottom: 0; } #content .cm-text ul, #content .textobj ul { list-style: none; position: relative; width: 100%; margin-left: 0; } #content .cm-text ul li, #content .textobj ul li { position: relative; box-sizing: border-box; width: 100%; margin-bottom: 0; padding: 0.3em 0.5em 0.3em 1.4em; line-height: 1.4; } #content .cm-text ul li::before, #content .textobj ul li::before { content: "•"; position: absolute; top: 0.3em; left: 0; width: 1.4em; height: 1.6em; font-size: 1.2em; color: var(--color-accent); } #content .cm-text img, #content .textobj img { position: relative; max-width: 100%; height: auto; } #content .textblock + .textblock { margin-top: 1.5em; } #content .cm-text + .cm-text, #content .textobj + .textobj { margin-top: 1.5em; } #content div.textblock { position: relative; width: 100%; z-index: 2; } #content div.textblock p strong, #content div.textblock p b { font-weight: normal; color: var(--color-accent); } #content div.textblock.style--columns.style--columns { max-width: 80ch; margin: 0 auto; } @media screen and (max-width: 700px) { #content div.textblock.style--columns.style--columns { max-width: 90%; } } #content div.textblock.style--columns div.cm-text, #content div.textblock.style--columns div.textobj { column-count: 2; column-gap: 4em; } @media screen and (max-width: 900px) { #content div.textblock.style--columns div.cm-text, #content div.textblock.style--columns div.textobj { column-gap: 3em; } } @media screen and (max-width: 700px) { #content div.textblock.style--columns div.cm-text, #content div.textblock.style--columns div.textobj { column-count: 1; } } #content div.textblock.default .textblockwrap, #content div.textblock.style-- .textblockwrap, #content div.textblock.style--default .textblockwrap { display: grid; width: 100%; column-gap: var(--var-grid-gap); grid-template-columns: [m] var(--var-bodymargin) repeat(12, [c] 1fr) [m-end] var(--var-bodymargin); row-gap: var(--var-row-gap); } #content div.textblock.default .textblockwrap .textobj, #content div.textblock.style-- .textblockwrap .textobj, #content div.textblock.style--default .textblockwrap .textobj { grid-column: 5 / span 6; } @media screen and (max-width: 800px) { #content div.textblock.default .textblockwrap .textobj, #content div.textblock.style-- .textblockwrap .textobj, #content div.textblock.style--default .textblockwrap .textobj { grid-column: 4 / span 8; } } @media screen and (max-width: 600px) { #content div.textblock.default .textblockwrap .textobj, #content div.textblock.style-- .textblockwrap .textobj, #content div.textblock.style--default .textblockwrap .textobj { grid-column: 3 / span 10; } } #content div.textblock.default .textblockwrap .textblockbutton, #content div.textblock.style-- .textblockwrap .textblockbutton, #content div.textblock.style--default .textblockwrap .textblockbutton { grid-column: 8 / span 6; } #content div.textblock.centering { text-align: center; } .textblock .textblockwrap > * { will-change: transform, opacity; } #cm-gmaplink { min-height: 10rem; } #cm-gmaplink > a { display: block; width: 100%; position: relative; transition: 0.5s all ease; } #cm-gmaplink > a:hover #cm-gmaplink-image { opacity: 0.6; } #cm-gmaplink > a:hover strong { color: var(--color-accent); top: 46%; } #cm-gmaplink > a:hover svg { --logocolor: var(--color-text); left: 28%; top: 45%; } #cm-gmaplink #cm-gmaplink-image { width: 100%; position: relative; transition: 0.5s all ease; } #cm-gmaplink #cm-gmaplink-image picture, #cm-gmaplink #cm-gmaplink-image img { width: 100%; display: block; } #cm-gmaplink strong { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: var(--fs-h1); line-height: var(--fs-h1-lh); color: var(--color-h1, inherit); font-weight: var(--weight-regular); font-family: var(--font-headings); color: var(--color-black); width: 80%; transition: 0.5s all ease; } #cm-gmaplink strong strong, #cm-gmaplink strong b { font-weight: inherit; color: var(--color-accent); } #cm-gmaplink svg { top: 50%; position: absolute; height: 7rem; width: auto; left: 30%; --logocolor: var(--color-accent); transform: translate(0, -50%); transition: 0.35s all ease; } /* content-layouts.less (cmart + cb alias) - cb-* bleibt funktionsfähig - cm-* ist der neue Namensraum */ /* Basis-Layout-Block */ div.cb-layout, div.cm-layout { width: 100%; clear: left; position: relative; } /* Dark/Accent Kontexte */ /* Wrapper: Grid aktivieren */ div.cb-layout--imageleft-textright .cb-layout__wrap, div.cb-layout--imageright-textleft .cb-layout__wrap, div.cm-layout--imageleft-textright .cb-layout__wrap, div.cm-layout--imageright-textleft .cb-layout__wrap, div.cb-layout--imageleft-textright .cm-layout__wrap, div.cb-layout--imageright-textleft .cm-layout__wrap, div.cm-layout--imageleft-textright .cm-layout__wrap, div.cm-layout--imageright-textleft .cm-layout__wrap { display: grid; width: 100%; column-gap: var(--var-grid-gap); grid-template-columns: [m] var(--var-bodymargin) repeat(12, [c] 1fr) [m-end] var(--var-bodymargin); gap: var(--var-grid-gap); grid-auto-flow: dense; align-items: center; } /* Gemeinsame Grundstruktur */ div.cb-layout--imageleft-textright .cb-layout__text, div.cb-layout--imageright-textleft .cb-layout__text, div.cm-layout--imageleft-textright .cb-layout__text, div.cm-layout--imageright-textleft .cb-layout__text, div.cb-layout--imageleft-textright .cb-layout__image, div.cb-layout--imageright-textleft .cb-layout__image, div.cm-layout--imageleft-textright .cb-layout__image, div.cm-layout--imageright-textleft .cb-layout__image, div.cb-layout--imageleft-textright .cm-layout__text, div.cb-layout--imageright-textleft .cm-layout__text, div.cm-layout--imageleft-textright .cm-layout__text, div.cm-layout--imageright-textleft .cm-layout__text, div.cb-layout--imageleft-textright .cm-layout__image, div.cb-layout--imageright-textleft .cm-layout__image, div.cm-layout--imageleft-textright .cm-layout__image, div.cm-layout--imageright-textleft .cm-layout__image { position: relative; } div.cb-layout--imageleft-textright .cb-layout__text, div.cb-layout--imageright-textleft .cb-layout__text, div.cm-layout--imageleft-textright .cb-layout__text, div.cm-layout--imageright-textleft .cb-layout__text, div.cb-layout--imageleft-textright .cm-layout__text, div.cb-layout--imageright-textleft .cm-layout__text, div.cm-layout--imageleft-textright .cm-layout__text, div.cm-layout--imageright-textleft .cm-layout__text { padding: 10rem 0; } @media screen and (max-width: 768px) { div.cb-layout--imageleft-textright .cb-layout__text, div.cb-layout--imageright-textleft .cb-layout__text, div.cm-layout--imageleft-textright .cb-layout__text, div.cm-layout--imageright-textleft .cb-layout__text, div.cb-layout--imageleft-textright .cm-layout__text, div.cb-layout--imageright-textleft .cm-layout__text, div.cm-layout--imageleft-textright .cm-layout__text, div.cm-layout--imageright-textleft .cm-layout__text { padding: 3rem 0; } } div.cb-layout--imageleft-textright .cb-layout__text > div, div.cb-layout--imageright-textleft .cb-layout__text > div, div.cm-layout--imageleft-textright .cb-layout__text > div, div.cm-layout--imageright-textleft .cb-layout__text > div, div.cb-layout--imageleft-textright .cm-layout__text > div, div.cb-layout--imageright-textleft .cm-layout__text > div, div.cm-layout--imageleft-textright .cm-layout__text > div, div.cm-layout--imageright-textleft .cm-layout__text > div, div.cb-layout--imageleft-textright .cb-layout__text > div > div, div.cb-layout--imageright-textleft .cb-layout__text > div > div, div.cm-layout--imageleft-textright .cb-layout__text > div > div, div.cm-layout--imageright-textleft .cb-layout__text > div > div, div.cb-layout--imageleft-textright .cm-layout__text > div > div, div.cb-layout--imageright-textleft .cm-layout__text > div > div, div.cm-layout--imageleft-textright .cm-layout__text > div > div, div.cm-layout--imageright-textleft .cm-layout__text > div > div { margin-top: var(--var-row-gap); } div.cb-layout--imageleft-textright .cb-layout__slideshow, div.cb-layout--imageright-textleft .cb-layout__slideshow, div.cm-layout--imageleft-textright .cb-layout__slideshow, div.cm-layout--imageright-textleft .cb-layout__slideshow, div.cb-layout--imageleft-textright .cm-layout__slideshow, div.cb-layout--imageright-textleft .cm-layout__slideshow, div.cm-layout--imageleft-textright .cm-layout__slideshow, div.cm-layout--imageright-textleft .cm-layout__slideshow { display: flex; align-items: center; } div.cb-layout--imageleft-textright .cb-layout__slideshow .swiper .sliderarrows, div.cb-layout--imageright-textleft .cb-layout__slideshow .swiper .sliderarrows, div.cm-layout--imageleft-textright .cb-layout__slideshow .swiper .sliderarrows, div.cm-layout--imageright-textleft .cb-layout__slideshow .swiper .sliderarrows, div.cb-layout--imageleft-textright .cm-layout__slideshow .swiper .sliderarrows, div.cb-layout--imageright-textleft .cm-layout__slideshow .swiper .sliderarrows, div.cm-layout--imageleft-textright .cm-layout__slideshow .swiper .sliderarrows, div.cm-layout--imageright-textleft .cm-layout__slideshow .swiper .sliderarrows { left: 0; } @media screen and (max-width: 800px) { div.cb-layout--imageleft-textright .cb-layout__slideshow, div.cb-layout--imageright-textleft .cb-layout__slideshow, div.cm-layout--imageleft-textright .cb-layout__slideshow, div.cm-layout--imageright-textleft .cb-layout__slideshow, div.cb-layout--imageleft-textright .cm-layout__slideshow, div.cb-layout--imageright-textleft .cm-layout__slideshow, div.cm-layout--imageleft-textright .cm-layout__slideshow, div.cm-layout--imageright-textleft .cm-layout__slideshow { width: 100%; margin-bottom: 10rem; } div.cb-layout--imageleft-textright .cb-layout__slideshow .swiper .sliderarrows, div.cb-layout--imageright-textleft .cb-layout__slideshow .swiper .sliderarrows, div.cm-layout--imageleft-textright .cb-layout__slideshow .swiper .sliderarrows, div.cm-layout--imageright-textleft .cb-layout__slideshow .swiper .sliderarrows, div.cb-layout--imageleft-textright .cm-layout__slideshow .swiper .sliderarrows, div.cb-layout--imageright-textleft .cm-layout__slideshow .swiper .sliderarrows, div.cm-layout--imageleft-textright .cm-layout__slideshow .swiper .sliderarrows, div.cm-layout--imageright-textleft .cm-layout__slideshow .swiper .sliderarrows { left: 7%; } div.cb-layout--imageleft-textright .cb-layout__slideshow .swiper .swiper-slide picture, div.cb-layout--imageright-textleft .cb-layout__slideshow .swiper .swiper-slide picture, div.cm-layout--imageleft-textright .cb-layout__slideshow .swiper .swiper-slide picture, div.cm-layout--imageright-textleft .cb-layout__slideshow .swiper .swiper-slide picture, div.cb-layout--imageleft-textright .cm-layout__slideshow .swiper .swiper-slide picture, div.cb-layout--imageright-textleft .cm-layout__slideshow .swiper .swiper-slide picture, div.cm-layout--imageleft-textright .cm-layout__slideshow .swiper .swiper-slide picture, div.cm-layout--imageright-textleft .cm-layout__slideshow .swiper .swiper-slide picture { height: 40rem; } } div.cb-layout--imageleft-textright .cb-layout__image, div.cb-layout--imageright-textleft .cb-layout__image, div.cm-layout--imageleft-textright .cb-layout__image, div.cm-layout--imageright-textleft .cb-layout__image, div.cb-layout--imageleft-textright .cm-layout__image, div.cb-layout--imageright-textleft .cm-layout__image, div.cm-layout--imageleft-textright .cm-layout__image, div.cm-layout--imageright-textleft .cm-layout__image { min-height: 90vh; min-height: 90svh; /* mobiles Viewport-Handling */ height: 100%; /* vormals .absolutemedia() */ } div.cb-layout--imageleft-textright .cb-layout__image .filedropbox, div.cb-layout--imageright-textleft .cb-layout__image .filedropbox, div.cm-layout--imageleft-textright .cb-layout__image .filedropbox, div.cm-layout--imageright-textleft .cb-layout__image .filedropbox, div.cb-layout--imageleft-textright .cm-layout__image .filedropbox, div.cb-layout--imageright-textleft .cm-layout__image .filedropbox, div.cm-layout--imageleft-textright .cm-layout__image .filedropbox, div.cm-layout--imageright-textleft .cm-layout__image .filedropbox { height: 100%; } @media screen and (max-width: 768px) { div.cb-layout--imageleft-textright .cb-layout__image, div.cb-layout--imageright-textleft .cb-layout__image, div.cm-layout--imageleft-textright .cb-layout__image, div.cm-layout--imageright-textleft .cb-layout__image, div.cb-layout--imageleft-textright .cm-layout__image, div.cb-layout--imageright-textleft .cm-layout__image, div.cm-layout--imageleft-textright .cm-layout__image, div.cm-layout--imageright-textleft .cm-layout__image { margin-bottom: 5rem; min-height: 60vh; min-height: 60svh; height: auto; } } div.cb-layout--imageleft-textright .cb-layout__image .image, div.cb-layout--imageright-textleft .cb-layout__image .image, div.cm-layout--imageleft-textright .cb-layout__image .image, div.cm-layout--imageright-textleft .cb-layout__image .image, div.cb-layout--imageleft-textright .cm-layout__image .image, div.cb-layout--imageright-textleft .cm-layout__image .image, div.cm-layout--imageleft-textright .cm-layout__image .image, div.cm-layout--imageright-textleft .cm-layout__image .image { position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 100%; border-radius: var(--var-borderradius); overflow: hidden; /* Container muss position:relative haben */ } div.cb-layout--imageleft-textright .cb-layout__image .image img, div.cb-layout--imageright-textleft .cb-layout__image .image img, div.cm-layout--imageleft-textright .cb-layout__image .image img, div.cm-layout--imageright-textleft .cb-layout__image .image img, div.cb-layout--imageleft-textright .cm-layout__image .image img, div.cb-layout--imageright-textleft .cm-layout__image .image img, div.cm-layout--imageleft-textright .cm-layout__image .image img, div.cm-layout--imageright-textleft .cm-layout__image .image img, div.cb-layout--imageleft-textright .cb-layout__image .image video, div.cb-layout--imageright-textleft .cb-layout__image .image video, div.cm-layout--imageleft-textright .cb-layout__image .image video, div.cm-layout--imageright-textleft .cb-layout__image .image video, div.cb-layout--imageleft-textright .cm-layout__image .image video, div.cb-layout--imageright-textleft .cm-layout__image .image video, div.cm-layout--imageleft-textright .cm-layout__image .image video, div.cm-layout--imageright-textleft .cm-layout__image .image video, div.cb-layout--imageleft-textright .cb-layout__image .image picture, div.cb-layout--imageright-textleft .cb-layout__image .image picture, div.cm-layout--imageleft-textright .cb-layout__image .image picture, div.cm-layout--imageright-textleft .cb-layout__image .image picture, div.cb-layout--imageleft-textright .cm-layout__image .image picture, div.cb-layout--imageright-textleft .cm-layout__image .image picture, div.cm-layout--imageleft-textright .cm-layout__image .image picture, div.cm-layout--imageright-textleft .cm-layout__image .image picture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } div.cb-layout--imageleft-textright .cb-layout__image .image picture img, div.cb-layout--imageright-textleft .cb-layout__image .image picture img, div.cm-layout--imageleft-textright .cb-layout__image .image picture img, div.cm-layout--imageright-textleft .cb-layout__image .image picture img, div.cb-layout--imageleft-textright .cm-layout__image .image picture img, div.cb-layout--imageright-textleft .cm-layout__image .image picture img, div.cm-layout--imageleft-textright .cm-layout__image .image picture img, div.cm-layout--imageright-textleft .cm-layout__image .image picture img { position: relative; } div.cb-layout--imageleft-textright .cb-layout__image .image > video, div.cb-layout--imageright-textleft .cb-layout__image .image > video, div.cm-layout--imageleft-textright .cb-layout__image .image > video, div.cm-layout--imageright-textleft .cb-layout__image .image > video, div.cb-layout--imageleft-textright .cm-layout__image .image > video, div.cb-layout--imageright-textleft .cm-layout__image .image > video, div.cm-layout--imageleft-textright .cm-layout__image .image > video, div.cm-layout--imageright-textleft .cm-layout__image .image > video { position: absolute; min-width: 100%; min-height: 100%; width: auto; height: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); } div.cb-layout--imageleft-textright .cb-layout__image .image > picture, div.cb-layout--imageright-textleft .cb-layout__image .image > picture, div.cm-layout--imageleft-textright .cb-layout__image .image > picture, div.cm-layout--imageright-textleft .cb-layout__image .image > picture, div.cb-layout--imageleft-textright .cm-layout__image .image > picture, div.cb-layout--imageright-textleft .cm-layout__image .image > picture, div.cm-layout--imageleft-textright .cm-layout__image .image > picture, div.cm-layout--imageright-textleft .cm-layout__image .image > picture { position: absolute; inset: 0; /* top:0; right:0; bottom:0; left:0 */ width: 100%; height: 100%; /* source lässt sich nicht stylen – bewusst weggelassen */ } div.cb-layout--imageleft-textright .cb-layout__image .image > picture > img, div.cb-layout--imageright-textleft .cb-layout__image .image > picture > img, div.cm-layout--imageleft-textright .cb-layout__image .image > picture > img, div.cm-layout--imageright-textleft .cb-layout__image .image > picture > img, div.cb-layout--imageleft-textright .cm-layout__image .image > picture > img, div.cb-layout--imageright-textleft .cm-layout__image .image > picture > img, div.cm-layout--imageleft-textright .cm-layout__image .image > picture > img, div.cm-layout--imageright-textleft .cm-layout__image .image > picture > img { width: 100%; height: 100%; object-fit: cover; } div.cb-layout--imageleft-textright .cb-layout__image .image img.img, div.cb-layout--imageright-textleft .cb-layout__image .image img.img, div.cm-layout--imageleft-textright .cb-layout__image .image img.img, div.cm-layout--imageright-textleft .cb-layout__image .image img.img, div.cb-layout--imageleft-textright .cm-layout__image .image img.img, div.cb-layout--imageright-textleft .cm-layout__image .image img.img, div.cm-layout--imageleft-textright .cm-layout__image .image img.img, div.cm-layout--imageright-textleft .cm-layout__image .image img.img { width: 100%; height: 100%; object-fit: cover; } /* Variante: Bild links – Text rechts */ div.cb-layout.cb-layout--imageleft-textright .cb-layout__image, div.cm-layout.cm-layout--imageleft-textright .cb-layout__image, div.cb-layout.cb-layout--imageleft-textright .cm-layout__image, div.cm-layout.cm-layout--imageleft-textright .cm-layout__image { grid-column: 2 / span 6; } @media screen and (max-width: 768px) { div.cb-layout.cb-layout--imageleft-textright .cb-layout__image, div.cm-layout.cm-layout--imageleft-textright .cb-layout__image, div.cb-layout.cb-layout--imageleft-textright .cm-layout__image, div.cm-layout.cm-layout--imageleft-textright .cm-layout__image { grid-column: 3 / span 10; } } @media screen and (max-width: 500px) { div.cb-layout.cb-layout--imageleft-textright .cb-layout__image, div.cm-layout.cm-layout--imageleft-textright .cb-layout__image, div.cb-layout.cb-layout--imageleft-textright .cm-layout__image, div.cm-layout.cm-layout--imageleft-textright .cm-layout__image { grid-column: 2 / span 12; } } div.cb-layout.cb-layout--imageleft-textright .cb-layout__text, div.cm-layout.cm-layout--imageleft-textright .cb-layout__text, div.cb-layout.cb-layout--imageleft-textright .cm-layout__text, div.cm-layout.cm-layout--imageleft-textright .cm-layout__text { grid-column: 9 / span 4; } @media screen and (max-width: 900px) { div.cb-layout.cb-layout--imageleft-textright .cb-layout__text, div.cm-layout.cm-layout--imageleft-textright .cb-layout__text, div.cb-layout.cb-layout--imageleft-textright .cm-layout__text, div.cm-layout.cm-layout--imageleft-textright .cm-layout__text { grid-column: 9 / span 5; } } @media screen and (max-width: 768px) { div.cb-layout.cb-layout--imageleft-textright .cb-layout__text, div.cm-layout.cm-layout--imageleft-textright .cb-layout__text, div.cb-layout.cb-layout--imageleft-textright .cm-layout__text, div.cm-layout.cm-layout--imageleft-textright .cm-layout__text { grid-column: 3 / span 10; } } @media screen and (max-width: 500px) { div.cb-layout.cb-layout--imageleft-textright .cb-layout__text, div.cm-layout.cm-layout--imageleft-textright .cb-layout__text, div.cb-layout.cb-layout--imageleft-textright .cm-layout__text, div.cm-layout.cm-layout--imageleft-textright .cm-layout__text { grid-column: 2 / span 12; } } /* Variante: Bild rechts – Text links */ div.cb-layout--imageright-textleft .cb-layout__image, div.cm-layout--imageright-textleft .cb-layout__image, div.cb-layout--imageright-textleft .cb-layout__slideshow, div.cm-layout--imageright-textleft .cb-layout__slideshow, div.cb-layout--imageright-textleft .cm-layout__image, div.cm-layout--imageright-textleft .cm-layout__image, div.cb-layout--imageright-textleft .cm-layout__slideshow, div.cm-layout--imageright-textleft .cm-layout__slideshow { grid-column: 8 / span 6; } @media screen and (max-width: 768px) { div.cb-layout--imageright-textleft .cb-layout__image, div.cm-layout--imageright-textleft .cb-layout__image, div.cb-layout--imageright-textleft .cb-layout__slideshow, div.cm-layout--imageright-textleft .cb-layout__slideshow, div.cb-layout--imageright-textleft .cm-layout__image, div.cm-layout--imageright-textleft .cm-layout__image, div.cb-layout--imageright-textleft .cm-layout__slideshow, div.cm-layout--imageright-textleft .cm-layout__slideshow { grid-column: 3 / span 10; } } @media screen and (max-width: 500px) { div.cb-layout--imageright-textleft .cb-layout__image, div.cm-layout--imageright-textleft .cb-layout__image, div.cb-layout--imageright-textleft .cb-layout__slideshow, div.cm-layout--imageright-textleft .cb-layout__slideshow, div.cb-layout--imageright-textleft .cm-layout__image, div.cm-layout--imageright-textleft .cm-layout__image, div.cb-layout--imageright-textleft .cm-layout__slideshow, div.cm-layout--imageright-textleft .cm-layout__slideshow { grid-column: 2 / span 12; } } div.cb-layout--imageright-textleft .cb-layout__text, div.cm-layout--imageright-textleft .cb-layout__text, div.cb-layout--imageright-textleft .cm-layout__text, div.cm-layout--imageright-textleft .cm-layout__text { grid-column: 3 / span 4; } @media screen and (max-width: 900px) { div.cb-layout--imageright-textleft .cb-layout__text, div.cm-layout--imageright-textleft .cb-layout__text, div.cb-layout--imageright-textleft .cm-layout__text, div.cm-layout--imageright-textleft .cm-layout__text { grid-column: 2 / span 5; } } @media screen and (max-width: 768px) { div.cb-layout--imageright-textleft .cb-layout__text, div.cm-layout--imageright-textleft .cb-layout__text, div.cb-layout--imageright-textleft .cm-layout__text, div.cm-layout--imageright-textleft .cm-layout__text { grid-column: 3 / span 10; } } @media screen and (max-width: 500px) { div.cb-layout--imageright-textleft .cb-layout__text, div.cm-layout--imageright-textleft .cb-layout__text, div.cb-layout--imageright-textleft .cm-layout__text, div.cm-layout--imageright-textleft .cm-layout__text { grid-column: 2 / span 12; } } /* Variante: Text + 2 Bilder (überlappend) */ div.cb-layout--text2bilder, div.cm-layout--text2bilder { /* Erstes (großes) Bild - Row 1 mit Überlappung nach unten */ /* Subtitle */ /* Headline rechts vom ersten Bild - am Bottom */ /* Zweites (kleines) Bild - Row 2 */ /* Content Container (Text + Buttons) */ /* Anpassungen für subtitle Variante */ /* GESPIEGELTES LAYOUT mit .change Klasse */ } div.cb-layout--text2bilder .cb-layout__wrap, div.cm-layout--text2bilder .cb-layout__wrap, div.cb-layout--text2bilder .cm-layout__wrap, div.cm-layout--text2bilder .cm-layout__wrap { display: grid; width: 100%; column-gap: var(--var-grid-gap); grid-template-columns: [m] var(--var-bodymargin) repeat(12, [c] 1fr) [m-end] var(--var-bodymargin); grid-auto-rows: auto; row-gap: var(--var-row-gap); } div.cb-layout--text2bilder .cb-layout__image--large, div.cm-layout--text2bilder .cb-layout__image--large { grid-column: 3 / span 5; grid-row: 1; position: relative; z-index: 1; border-radius: var(--var-borderradius); overflow: hidden; min-height: 60vh; /* Container muss position:relative haben */ } @media screen and (min-width: 768px) { div.cb-layout--text2bilder .cb-layout__image--large, div.cm-layout--text2bilder .cb-layout__image--large { margin-bottom: calc(-1 * (16rem + var(--var-row-gap))); } } @media screen and (max-width: 1200px) { div.cb-layout--text2bilder .cb-layout__image--large, div.cm-layout--text2bilder .cb-layout__image--large { grid-column: 2 / span 6; } } @media screen and (max-width: 768px) { div.cb-layout--text2bilder .cb-layout__image--large, div.cm-layout--text2bilder .cb-layout__image--large { grid-column: 2 / span 12; min-height: 60vh; } } @media screen and (max-width: 500px) { div.cb-layout--text2bilder .cb-layout__image--large, div.cm-layout--text2bilder .cb-layout__image--large { grid-column: 2 / span 12; min-height: 50vh; } } div.cb-layout--text2bilder .cb-layout__image--large img, div.cm-layout--text2bilder .cb-layout__image--large img, div.cb-layout--text2bilder .cb-layout__image--large video, div.cm-layout--text2bilder .cb-layout__image--large video, div.cb-layout--text2bilder .cb-layout__image--large picture, div.cm-layout--text2bilder .cb-layout__image--large picture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } div.cb-layout--text2bilder .cb-layout__image--large picture img, div.cm-layout--text2bilder .cb-layout__image--large picture img { position: relative; } div.cb-layout--text2bilder .cb-layout__image--large > video, div.cm-layout--text2bilder .cb-layout__image--large > video { position: absolute; min-width: 100%; min-height: 100%; width: auto; height: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); } div.cb-layout--text2bilder .cb-layout__image--large > picture, div.cm-layout--text2bilder .cb-layout__image--large > picture { position: absolute; inset: 0; /* top:0; right:0; bottom:0; left:0 */ width: 100%; height: 100%; /* source lässt sich nicht stylen – bewusst weggelassen */ } div.cb-layout--text2bilder .cb-layout__image--large > picture > img, div.cm-layout--text2bilder .cb-layout__image--large > picture > img { width: 100%; height: 100%; object-fit: cover; } div.cb-layout--text2bilder .cb-layout__subtitle, div.cm-layout--text2bilder .cb-layout__subtitle { grid-column: 9 / span 4; grid-row: 1; align-self: end; } @media screen and (max-width: 1200px) { div.cb-layout--text2bilder .cb-layout__subtitle, div.cm-layout--text2bilder .cb-layout__subtitle { grid-column: 9 / span 5; } } @media screen and (max-width: 768px) { div.cb-layout--text2bilder .cb-layout__subtitle, div.cm-layout--text2bilder .cb-layout__subtitle { grid-column: 3 / span 10; grid-row: auto; align-self: start; } } @media screen and (max-width: 500px) { div.cb-layout--text2bilder .cb-layout__subtitle, div.cm-layout--text2bilder .cb-layout__subtitle { grid-column: 2 / span 12; } } div.cb-layout--text2bilder .cb-layout__title, div.cm-layout--text2bilder .cb-layout__title { grid-column: 9 / span 4; grid-row: 1; align-self: end; } @media screen and (max-width: 1200px) { div.cb-layout--text2bilder .cb-layout__title, div.cm-layout--text2bilder .cb-layout__title { grid-column: 9 / span 5; } } @media screen and (max-width: 768px) { div.cb-layout--text2bilder .cb-layout__title, div.cm-layout--text2bilder .cb-layout__title { grid-column: 3 / span 10; grid-row: auto; align-self: start; } } @media screen and (max-width: 500px) { div.cb-layout--text2bilder .cb-layout__title, div.cm-layout--text2bilder .cb-layout__title { grid-column: 2 / span 12; } } div.cb-layout--text2bilder .cb-layout__image--small, div.cm-layout--text2bilder .cb-layout__image--small { grid-column: 6 / span 3; grid-row: 2; min-height: 20rem; align-self: start; position: relative; z-index: 2; border-radius: var(--var-borderradius); overflow: hidden; /* Container muss position:relative haben */ } @media screen and (max-width: 1200px) { div.cb-layout--text2bilder .cb-layout__image--small, div.cm-layout--text2bilder .cb-layout__image--small { grid-column: 5 / span 4; } } @media screen and (max-width: 768px) { div.cb-layout--text2bilder .cb-layout__image--small, div.cm-layout--text2bilder .cb-layout__image--small { grid-row: auto; min-height: 15rem; margin-top: -8rem; order: -1; grid-column: 5 / span 6; } } div.cb-layout--text2bilder .cb-layout__image--small > video, div.cm-layout--text2bilder .cb-layout__image--small > video { width: 100%; height: auto; } div.cb-layout--text2bilder .cb-layout__image--small > picture, div.cm-layout--text2bilder .cb-layout__image--small > picture { inset: 0; /* top:0; right:0; bottom:0; left:0 */ width: 100%; height: auto; /* source lässt sich nicht stylen – bewusst weggelassen */ } div.cb-layout--text2bilder .cb-layout__image--small > picture > img, div.cm-layout--text2bilder .cb-layout__image--small > picture > img { width: 100%; height: auto; } div.cb-layout--text2bilder .cb-layout__content, div.cm-layout--text2bilder .cb-layout__content { grid-column: 10 / span 3; grid-row: 2; display: flex; flex-direction: column; gap: 2rem; } @media screen and (max-width: 1200px) { div.cb-layout--text2bilder .cb-layout__content, div.cm-layout--text2bilder .cb-layout__content { grid-column: 10 / span 4; } } @media screen and (max-width: 768px) { div.cb-layout--text2bilder .cb-layout__content, div.cm-layout--text2bilder .cb-layout__content { grid-column: 3 / span 10; grid-row: auto; } } @media screen and (max-width: 500px) { div.cb-layout--text2bilder .cb-layout__content, div.cm-layout--text2bilder .cb-layout__content { grid-column: 2 / span 12; } } div.cb-layout--text2bilder .cb-layout__buttons a + a, div.cm-layout--text2bilder .cb-layout__buttons a + a { margin-left: 2rem; } div.cb-layout--text2bilder .rows3 .cb-layout__subtitle, div.cm-layout--text2bilder .rows3 .cb-layout__subtitle { grid-row: 1; align-self: end; } @media screen and (max-width: 768px) { div.cb-layout--text2bilder .rows3 .cb-layout__subtitle, div.cm-layout--text2bilder .rows3 .cb-layout__subtitle { grid-row: auto; align-self: start; } } div.cb-layout--text2bilder .rows3 .cb-layout__title, div.cm-layout--text2bilder .rows3 .cb-layout__title { grid-row: 1; align-self: end; } @media screen and (max-width: 768px) { div.cb-layout--text2bilder .rows3 .cb-layout__title, div.cm-layout--text2bilder .rows3 .cb-layout__title { grid-row: auto; align-self: start; } } div.cb-layout--text2bilder .rows3 .cb-layout__image--small, div.cm-layout--text2bilder .rows3 .cb-layout__image--small { grid-row: 2; } div.cb-layout--text2bilder .rows3 .cb-layout__content, div.cm-layout--text2bilder .rows3 .cb-layout__content { grid-row: 2; } div.cb-layout--text2bilder.change, div.cm-layout--text2bilder.change { /* Erstes (großes) Bild - rechts */ /* Subtitle - links */ /* Headline - links */ /* Zweites (kleines) Bild - rechts */ /* Content Container - links */ } div.cb-layout--text2bilder.change .cb-layout__image--large, div.cm-layout--text2bilder.change .cb-layout__image--large { grid-column: 8 / span 5; } @media screen and (max-width: 1200px) { div.cb-layout--text2bilder.change .cb-layout__image--large, div.cm-layout--text2bilder.change .cb-layout__image--large { grid-column: 8 / span 6; } } @media screen and (max-width: 768px) { div.cb-layout--text2bilder.change .cb-layout__image--large, div.cm-layout--text2bilder.change .cb-layout__image--large { grid-column: 2 / span 12; } } @media screen and (max-width: 500px) { div.cb-layout--text2bilder.change .cb-layout__image--large, div.cm-layout--text2bilder.change .cb-layout__image--large { grid-column: 2 / span 12; } } div.cb-layout--text2bilder.change .cb-layout__subtitle, div.cm-layout--text2bilder.change .cb-layout__subtitle { grid-column: 3 / span 4; } @media screen and (max-width: 1200px) { div.cb-layout--text2bilder.change .cb-layout__subtitle, div.cm-layout--text2bilder.change .cb-layout__subtitle { grid-column: 2 / span 5; } } @media screen and (max-width: 768px) { div.cb-layout--text2bilder.change .cb-layout__subtitle, div.cm-layout--text2bilder.change .cb-layout__subtitle { grid-column: 3 / span 10; } } @media screen and (max-width: 500px) { div.cb-layout--text2bilder.change .cb-layout__subtitle, div.cm-layout--text2bilder.change .cb-layout__subtitle { grid-column: 2 / span 12; } } div.cb-layout--text2bilder.change .cb-layout__title, div.cm-layout--text2bilder.change .cb-layout__title { grid-column: 3 / span 4; } @media screen and (max-width: 1200px) { div.cb-layout--text2bilder.change .cb-layout__title, div.cm-layout--text2bilder.change .cb-layout__title { grid-column: 2 / span 5; } } @media screen and (max-width: 768px) { div.cb-layout--text2bilder.change .cb-layout__title, div.cm-layout--text2bilder.change .cb-layout__title { grid-column: 3 / span 10; } } @media screen and (max-width: 500px) { div.cb-layout--text2bilder.change .cb-layout__title, div.cm-layout--text2bilder.change .cb-layout__title { grid-column: 2 / span 12; } } div.cb-layout--text2bilder.change .cb-layout__image--small, div.cm-layout--text2bilder.change .cb-layout__image--small { grid-column: 7 / span 3; } @media screen and (max-width: 1200px) { div.cb-layout--text2bilder.change .cb-layout__image--small, div.cm-layout--text2bilder.change .cb-layout__image--small { grid-column: 7 / span 4; } } @media screen and (max-width: 768px) { div.cb-layout--text2bilder.change .cb-layout__image--small, div.cm-layout--text2bilder.change .cb-layout__image--small { grid-column: 5 / span 6; } } div.cb-layout--text2bilder.change .cb-layout__content, div.cm-layout--text2bilder.change .cb-layout__content { grid-column: 3 / span 3; } @media screen and (max-width: 1200px) { div.cb-layout--text2bilder.change .cb-layout__content, div.cm-layout--text2bilder.change .cb-layout__content { grid-column: 2 / span 4; } } @media screen and (max-width: 768px) { div.cb-layout--text2bilder.change .cb-layout__content, div.cm-layout--text2bilder.change .cb-layout__content { grid-column: 3 / span 10; } } @media screen and (max-width: 500px) { div.cb-layout--text2bilder.change .cb-layout__content, div.cm-layout--text2bilder.change .cb-layout__content { grid-column: 2 / span 12; } } /* Tab-Korrektur */ @media screen and (min-width: 768px) { div.tab div.cb-layout--text2bilder .cb-layout__image--large, div.tab div.cm-layout--text2bilder .cb-layout__image--large { min-height: 80vh; } } /* 2-Spalten Text-Layout */ div.cb-layout--text-2cols .cb-layout__wrap, div.cm-layout--text-2cols .cb-layout__wrap, div.cb-layout--text-2cols .cm-layout__wrap, div.cm-layout--text-2cols .cm-layout__wrap { display: grid; width: 100%; column-gap: var(--var-grid-gap); grid-template-columns: [m] var(--var-bodymargin) repeat(12, [c] 1fr) [m-end] var(--var-bodymargin); position: relative; } div.cb-layout--text-2cols .cb-layout__wrap .cb-layout__headline, div.cm-layout--text-2cols .cb-layout__wrap .cb-layout__headline, div.cb-layout--text-2cols .cm-layout__wrap .cb-layout__headline, div.cm-layout--text-2cols .cm-layout__wrap .cb-layout__headline, div.cb-layout--text-2cols .cb-layout__wrap .cm-layout__headline, div.cm-layout--text-2cols .cb-layout__wrap .cm-layout__headline, div.cb-layout--text-2cols .cm-layout__wrap .cm-layout__headline, div.cm-layout--text-2cols .cm-layout__wrap .cm-layout__headline { grid-column: 4 / span 4; } @media screen and (max-width: 800px) { div.cb-layout--text-2cols .cb-layout__wrap .cb-layout__headline, div.cm-layout--text-2cols .cb-layout__wrap .cb-layout__headline, div.cb-layout--text-2cols .cm-layout__wrap .cb-layout__headline, div.cm-layout--text-2cols .cm-layout__wrap .cb-layout__headline, div.cb-layout--text-2cols .cb-layout__wrap .cm-layout__headline, div.cm-layout--text-2cols .cb-layout__wrap .cm-layout__headline, div.cb-layout--text-2cols .cm-layout__wrap .cm-layout__headline, div.cm-layout--text-2cols .cm-layout__wrap .cm-layout__headline { grid-column: 3 / span 5; } } @media screen and (max-width: 500px) { div.cb-layout--text-2cols .cb-layout__wrap .cb-layout__headline, div.cm-layout--text-2cols .cb-layout__wrap .cb-layout__headline, div.cb-layout--text-2cols .cm-layout__wrap .cb-layout__headline, div.cm-layout--text-2cols .cm-layout__wrap .cb-layout__headline, div.cb-layout--text-2cols .cb-layout__wrap .cm-layout__headline, div.cm-layout--text-2cols .cb-layout__wrap .cm-layout__headline, div.cb-layout--text-2cols .cm-layout__wrap .cm-layout__headline, div.cm-layout--text-2cols .cm-layout__wrap .cm-layout__headline { grid-column: 2 / span 6; } } div.cb-layout--text-2cols .cb-layout__wrap .cb-layout__text, div.cm-layout--text-2cols .cb-layout__wrap .cb-layout__text, div.cb-layout--text-2cols .cm-layout__wrap .cb-layout__text, div.cm-layout--text-2cols .cm-layout__wrap .cb-layout__text, div.cb-layout--text-2cols .cb-layout__wrap .cm-layout__text, div.cm-layout--text-2cols .cb-layout__wrap .cm-layout__text, div.cb-layout--text-2cols .cm-layout__wrap .cm-layout__text, div.cm-layout--text-2cols .cm-layout__wrap .cm-layout__text { grid-column: 8 / span 4; } @media screen and (max-width: 800px) { div.cb-layout--text-2cols .cb-layout__wrap .cb-layout__text, div.cm-layout--text-2cols .cb-layout__wrap .cb-layout__text, div.cb-layout--text-2cols .cm-layout__wrap .cb-layout__text, div.cm-layout--text-2cols .cm-layout__wrap .cb-layout__text, div.cb-layout--text-2cols .cb-layout__wrap .cm-layout__text, div.cm-layout--text-2cols .cb-layout__wrap .cm-layout__text, div.cb-layout--text-2cols .cm-layout__wrap .cm-layout__text, div.cm-layout--text-2cols .cm-layout__wrap .cm-layout__text { grid-column: 8 / span 5; } } @media screen and (max-width: 500px) { div.cb-layout--text-2cols .cb-layout__wrap .cb-layout__text, div.cm-layout--text-2cols .cb-layout__wrap .cb-layout__text, div.cb-layout--text-2cols .cm-layout__wrap .cb-layout__text, div.cm-layout--text-2cols .cm-layout__wrap .cb-layout__text, div.cb-layout--text-2cols .cb-layout__wrap .cm-layout__text, div.cm-layout--text-2cols .cb-layout__wrap .cm-layout__text, div.cb-layout--text-2cols .cm-layout__wrap .cm-layout__text, div.cm-layout--text-2cols .cm-layout__wrap .cm-layout__text { grid-column: 8 / span 6; } } .cm-abstand { clear: left; position: relative; width: 100%; box-sizing: border-box; margin-top: 0px !important; } .cm-abstand.cm-pt--row > img, .cm-abstand.cm-pt--small > img, .cm-abstand.paddingtop--row > img, .cm-abstand.paddingtop--small > img { display: none; } li.content.abstand { margin-top: 0 !important; } .abstand + div, .abstand + li.content, .cm-abstand + div, .abstand + ul, .cm-abstand + ul { margin-top: 0 !important; } div.linkgrid { position: relative; background: transparent; box-sizing: border-box; } div.linkgrid .jstenjoy { position: absolute; top: -2rem; width: 80%; left: 10%; height: auto; pointer-events: none; z-index: 20; } @media screen and (max-width: 1000px) { div.linkgrid .jstenjoy { width: 100%; left: 0; top: -5rem; } } div.linkgrid .linkgrid__links { display: grid; width: 100%; column-gap: var(--var-grid-gap); grid-template-columns: [m] var(--var-bodymargin) repeat(12, [c] 1fr) [m-end] var(--var-bodymargin); gap: clamp(8px, 1vw, 16px); align-items: center; grid-auto-flow: dense; } div.linkgrid .linkgrid__links .linkgrid__item { position: relative; display: block; min-height: 5rem; } div.linkgrid .linkgrid__links .linkgrid__item img, div.linkgrid .linkgrid__links .linkgrid__item picture, div.linkgrid .linkgrid__links .linkgrid__item video { border-radius: var(--var-borderradius); display: block; width: 100%; height: 100%; object-fit: cover; } div.linkgrid .linkgrid__links.has-3 { align-items: start; } div.linkgrid .linkgrid__links.has-3 .linkgrid__item:nth-child(1) { grid-column: 2 / span 3; aspect-ratio: 1 / 1; margin-top: 0; } div.linkgrid .linkgrid__links.has-3 .linkgrid__item:nth-child(1) svg { position: absolute; bottom: 1rem; right: 1rem; transform: translate(50%, 50%); max-width: 6rem; height: auto; } div.linkgrid .linkgrid__links.has-3 .linkgrid__item:nth-child(2) { grid-column: 7 / span 5; aspect-ratio: 4 / 3; margin-top: 4rem; } div.linkgrid .linkgrid__links.has-3 .linkgrid__item:nth-child(2) svg { position: absolute; bottom: 40%; left: 1rem; transform: translate(-50%, 50%); max-width: 6rem; height: auto; } div.linkgrid .linkgrid__links.has-3 .linkgrid__item:nth-child(3) { grid-column: 13 / span 2; margin-top: -5rem; } div.linkgrid .linkgrid__links.has-4 .linkgrid__item:nth-child(1) { grid-column: 1 / span 2; aspect-ratio: 1 / 1; } div.linkgrid .linkgrid__links.has-4 .linkgrid__item:nth-child(2) { grid-column: 4 / span 2; aspect-ratio: 3 / 4; grid-row: 2; } div.linkgrid .linkgrid__links.has-4 .linkgrid__item:nth-child(3) { grid-column: 8 / span 3; aspect-ratio: 4 / 5; margin-bottom: -15rem; } div.linkgrid .linkgrid__links.has-4 .linkgrid__item:nth-child(4) { grid-column: 12 / span 2; aspect-ratio: 3 / 4; grid-row: 2; } @media (max-width: 900px) { div.linkgrid .linkgrid__links .linkgrid__item { grid-row: auto !important; } div.linkgrid .linkgrid__links.has-3 .linkgrid__item:nth-child(1) { grid-column: 2 / span 4; min-height: 0; } div.linkgrid .linkgrid__links.has-3 .linkgrid__item:nth-child(2) { grid-column: 4 / span 9; grid-row: 2; margin-top: -15rem; } div.linkgrid .linkgrid__links.has-3 .linkgrid__item:nth-child(3) { grid-column: 10 / span 5; } div.linkgrid .linkgrid__links.has-4 .linkgrid__item:nth-child(1) { grid-column: 1 / span 4; aspect-ratio: 1 / 1; } div.linkgrid .linkgrid__links.has-4 .linkgrid__item:nth-child(2) { grid-column: 4 / span 4; aspect-ratio: 3 / 4; grid-row: 2; } div.linkgrid .linkgrid__links.has-4 .linkgrid__item:nth-child(3) { grid-column: 8 / span 5; aspect-ratio: 4 / 5; margin-bottom: -8rem; } div.linkgrid .linkgrid__links.has-4 .linkgrid__item:nth-child(4) { grid-column: 10 / span 5; aspect-ratio: 3 / 4; grid-row: 2; } } @media (max-width: 600px) { div.linkgrid .linkgrid__links { gap: 10px; } div.linkgrid .linkgrid__links .linkgrid__item { aspect-ratio: auto; } } .cm-logorow { display: grid; width: 100%; column-gap: var(--var-grid-gap); grid-template-columns: [m] var(--var-bodymargin) repeat(12, [c] 1fr) [m-end] var(--var-bodymargin); } .cm-logorow .cm-logorow__txtlinks { grid-column: 3 / span 3; align-self: center; } .cm-logorow .cm-logorow__txtrechts { grid-column: 10 / span 3; text-align: right; align-self: center; } .cm-logorow #logo { text-align: center; grid-column: 6 / span 4; align-self: center; } .cm-logorow #logo svg { max-width: 80%; height: auto; margin: 0 auto; } @media screen and (max-width: 1000px) { .cm-logorow .cm-logorow__txtlinks, .cm-logorow .cm-logorow__txtrechts { grid-row: 2; } .cm-logorow .cm-logorow__txtlinks { grid-column: 3 / span 6; } .cm-logorow .cm-logorow__txtrechts { grid-column: 7 / span 6; } .cm-logorow #logo { grid-column: 4 / span 8; margin-bottom: 4rem; } } @media screen and (max-width: 800px) { .cm-logorow .cm-logorow__txtlinks { grid-column: 2 / span 6; } .cm-logorow .cm-logorow__txtrechts { grid-column: 8 / span 6; } .cm-logorow #logo { grid-column: 4 / span 8; margin-bottom: 4rem; } } @media screen and (max-width: 600px) { .cm-logorow .cm-logorow__txtlinks, .cm-logorow .cm-logorow__txtrechts { grid-column: 3 / span 10; text-align: center; } .cm-logorow .cm-logorow__txtrechts { grid-row: 3; margin-top: 2rem; text-align: center; } .cm-logorow #logo { grid-column: 4 / span 8; margin-bottom: 4rem; } } @media screen and (max-width: 480px) { .cm-logorow #logo { grid-column: 3 / span 10; } } .cm-openings { margin-left: auto; margin-right: auto; width: 80%; max-width: 90rem; border: 1px solid var(--color-black); } .cm-openings .cm-openings__h2 { width: 100%; text-align: center; position: relative; padding: 3rem 0; border-bottom: 1px solid var(--color-black); } .cm-openings .cm-openings__h2 h2 { line-height: normal; margin: 0 auto; } .cm-openings .cm-openings__h2 svg { position: absolute; top: 100%; left: 50%; height: auto; width: 7rem; transform: translate(-50%, -60%); } .cm-openings .cm-openings__txt { width: 100%; display: flex; } @media screen and (max-width: 720px) { .cm-openings .cm-openings__txt { flex-wrap: wrap; } } .cm-openings .cm-openings__left, .cm-openings .cm-openings__right { width: 50%; padding: 7rem 3rem; box-sizing: border-box; font-size: var(--fs-h3); line-height: var(--fs-h3-lh); color: var(--color-h3, inherit); font-family: var(--font-headings); font-weight: var(--weight-regular); text-align: center; } .cm-openings .cm-openings__left strong, .cm-openings .cm-openings__right strong, .cm-openings .cm-openings__left b, .cm-openings .cm-openings__right b { font-weight: inherit; color: var(--color-accent); } @media screen and (max-width: 720px) { .cm-openings .cm-openings__left, .cm-openings .cm-openings__right { width: 100%; } } .cm-openings .cm-openings__right { border-left: 1px solid var(--color-black); } @media screen and (max-width: 720px) { .cm-openings .cm-openings__right { border-left: 0px solid #fff; border-top: 1px solid var(--color-black); } } .cmartbge { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .cmartbge.cmartbge--picture { background-repeat: no-repeat; } .cmartbge { z-index: -1; } .sonnegg-bg-skier-dunkel { position: absolute; top: 0; left: 0; width: 100%; height: 100%; --logocolor: #000; opacity: 0.2; -ms-filter: "alpha(opacity=calc(100 * @wert))"; -khtml-opacity: 0.2; -moz-opacity: 0.2; } .sonnegg-bg-skier-dunkel svg { width: 50%; position: absolute; height: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); } /** * Tabs Module - Modern BEM with cm-prefix * CMS-specific classes (listinfos, infobox) kept for editor functionality */ #content .cm-tabs ul.listinfos { margin-bottom: 0; position: absolute; z-index: 20; width: auto; text-align: center; left: 50%; top: -3em; transform: translate(-50%, 0); } #content .cm-tabs ul.listinfos li.infobox a.infoboxtitle, #content .cm-tabs ul.listinfos li.cms_add_item { display: inline-block; font-size: 1.8rem !important; line-height: normal; padding: 0.7rem 0.9rem !important; background: var(--cmart-color); color: #fff; border-radius: var(--cmart-borderradius); text-decoration: none; clear: none; } #content .cm-tabs ul.listinfos li.infobox a.infoboxtitle:hover, #content .cm-tabs ul.listinfos li.cms_add_item:hover { background: var(--cmart-color-dark); } #content .cm-tabs ul.listinfos li.infobox { position: relative; clear: none; width: auto; display: inline-block; } #content .cm-tabs ul.listinfos li.infobox + li { margin-left: 1rem; } #content .cm-tabs ul.listinfos li.infobox.active a.infoboxtitle { color: var(--cmart-color); border: 2px solid var(--cmart-color); background: transparent; } #content .cm-tabs ul.listinfos li.infobox:hover .cms_editbox .cms_editbox_title { display: block; } #content .cm-tabs ul.listinfos li.cms_add_item { margin-top: 0; width: auto; } #content .cm-tabs div.infobox.tabnav .cms_editbox .cms_editbox_title { display: none; } .cm-tabs { clear: left; position: relative; width: 100%; margin: 0 auto; max-width: 90rem; box-sizing: border-box; padding: 0 4rem; min-height: 15rem; } .cm-tabs__title { margin-bottom: 2rem; } .cm-tabs__navigation { position: relative; width: 100%; margin-bottom: 2rem; border-bottom: 2px solid #e0e0e0; } .cm-tabs__navigation > div { display: flex; gap: 0.5rem; flex-wrap: wrap; } .cm-tabs__nav { display: inline-flex; align-items: center; position: relative; text-decoration: none; padding: 1rem 2rem; background: transparent; border: 2px solid transparent; border-bottom: none; border-radius: 8px 8px 0 0; font-weight: 500; color: #666; transition: all 0.2s ease; margin-bottom: -2px; } .cm-tabs__nav:hover { text-decoration: none; color: #333; background: #f5f5f5; } .cm-tabs__nav.active { color: #333; background: #fff; border-color: #e0e0e0; border-bottom-color: #fff; font-weight: 600; } .cm-tabs__content { width: 100%; box-sizing: border-box; padding: 2rem 0; position: relative; clear: left; display: none; animation: tab-fade-in 0.3s ease; } .cm-tabs__content.active { display: block; } .cm-tabs__inner { width: 100%; clear: left; } .cm-tabs__inner .tabcontentbox { width: 100%; box-sizing: border-box; } @keyframes tab-fade-in { 0% { opacity: 0; transform: translateY(-10px); } 100% { opacity: 1; transform: translateY(0); } } /** * Accordion Module - Modern BEM with cm-prefix * CMS-specific classes (listinfos, infobox) kept for editor functionality */ .cm-accordion { position: relative; width: 80%; margin: 0 auto; max-width: 100rem; } .cm-accordion__item { position: relative; clear: left; display: block; box-sizing: border-box; border: 2px solid #e0e0e0; border-radius: 12px; background: #fff; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } .cm-accordion__item + .cm-accordion__item { margin-top: 1.5rem; } .cm-accordion__item:not(.active):hover { border-color: #d0d0d0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); transform: translateY(-2px); } .cm-accordion__item.active { border-color: var(--color-accent, #333); background: #fafafa; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); } .cm-accordion__item.active .cm-accordion__title .cm-accordion__icon { transform: translateY(-50%) rotate(180deg); color: var(--color-accent, #333); } .cm-accordion__item.active .cm-accordion__content { display: block; animation: accordion-expand 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .cm-accordion__title { display: block; width: 100%; box-sizing: border-box; text-decoration: none; padding: 2rem 6rem 2rem 2.5rem; position: relative; font-weight: 500; font-size: 1.8rem; color: #333; line-height: 1.4; clear: left; cursor: pointer; user-select: none; transition: all 0.2s ease; } .cm-accordion__title strong { width: 80%; font-weight: 500; line-height: 1.4; display: block; } .cm-accordion__title:hover { color: var(--color-accent, #333); } .cm-accordion__icon { position: absolute; top: 50%; right: 2.5rem; line-height: 100%; transform: translateY(-50%); font-size: 2rem; color: #999; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .cm-accordion__icon .icon-arrow-down { display: block; } .cm-accordion__content { display: none; clear: left; width: 100%; box-sizing: border-box; padding: 0 2.5rem 2.5rem 2.5rem; min-height: 0; color: #666; font-size: 1.6rem; line-height: 1.6; } .cm-accordion__content p { margin-bottom: 1.5rem; } .cm-accordion__content p:last-child { margin-bottom: 0; } .cm-accordion__content .textblockwrap { display: block; } @keyframes accordion-expand { 0% { opacity: 0; transform: translateY(-10px); } 100% { opacity: 1; transform: translateY(0); } } ul.listpictures { width: 100%; position: relative; text-align: center; } ul.listpictures li { position: relative; display: inline-block; float: none; width: 32%; margin: 0.5%; height: 32em; } @media screen and (max-width: 1000px) { ul.listpictures li { height: 25em; } } @media screen and (max-width: 700px) { ul.listpictures li { height: 20em; width: 48%; } } ul.listpictures li a.lightbox { width: 100%; height: 100%; position: relative; overflow: hidden; } ul.listpictures li a.lightbox img { position: relative; width: 100%; height: 100%; object-fit: cover; transition: 0.4s all ease; } ul.listpictures li a.lightbox .title { display: none; } ul.listpictures li a.lightbox:hover img { opacity: 0.5; -ms-filter: "alpha(opacity=calc(100 * @wert))"; -khtml-opacity: 0.5; -moz-opacity: 0.5; } ul.listpictures li.gallerypicture a.lightbox { background: #232222; } ul.listpictures li.gallerypicture a.lightbox img.gallpicture { transition: opacity 0.2s ease; -moz-transition: opacity 0.2s ease; /* Firefox 4 */ -webkit-transition: opacity 0.2s ease; /* Safari and Chrome */ -o-transition: opacity 0.2s ease; /* Opera */ } ul.listpictures li.gallerypicture a.lightbox .zoomer { display: none; } ul.listpictures li.gallerypicture a.lightbox:hover img.gallpicture { opacity: 0.3; -ms-filter: "alpha(opacity=calc(100 * @wert))"; -khtml-opacity: 0.3; -moz-opacity: 0.3; } ul.listpictures li.gallerypicture a.lightbox:hover .zoomer { display: block; color: #fff; font-size: 2em; } div.singlepicture, a.singlepicture { width: 100%; clear: left; min-height: 8em; position: relative; display: block; } div.singlepicture span.title, a.singlepicture span.title { display: none; } div.singlepicture > a.lightbox, a.singlepicture > a.lightbox, div.singlepicture > a.zmartbox, a.singlepicture > a.zmartbox { width: 100%; } div.singlepicture img.img, a.singlepicture img.img, div.singlepicture picture, a.singlepicture picture, div.singlepicture picture img, a.singlepicture picture img, div.singlepicture picture source, a.singlepicture picture source, div.singlepicture video, a.singlepicture video, div.singlepicture video source, a.singlepicture video source { transition: 0.15s all ease-in-out; -moz-transition: 0.15s all ease-in-out; /* Firefox 4 */ -webkit-transition: 0.15s all ease-in-out; /* Safari and Chrome */ -o-transition: 0.15s all ease-in-out; /* Opera */ max-width: 100%; } div.singlepicture.centering, a.singlepicture.centering { text-align: center; } div.singlepicture.centering img.img, a.singlepicture.centering img.img, div.singlepicture.centering picture, a.singlepicture.centering picture, div.singlepicture.centering picture img, a.singlepicture.centering picture img, div.singlepicture.centering picture source, a.singlepicture.centering picture source, div.singlepicture.centering video, a.singlepicture.centering video, div.singlepicture.centering video source, a.singlepicture.centering video source { float: none; text-align: center; } div.singlepicture span.image, a.singlepicture span.image { position: relative; width: 100%; display: block; } div.singlepicture.width100 img.img, a.singlepicture.width100 img.img, div.singlepicture.width100 video, a.singlepicture.width100 video, div.singlepicture.width100 picture, a.singlepicture.width100 picture { width: 100%; } div.singlepicture.width100 img.img img, a.singlepicture.width100 img.img img, div.singlepicture.width100 video img, a.singlepicture.width100 video img, div.singlepicture.width100 picture img, a.singlepicture.width100 picture img, div.singlepicture.width100 img.img source, a.singlepicture.width100 img.img source, div.singlepicture.width100 video source, a.singlepicture.width100 video source, div.singlepicture.width100 picture source, a.singlepicture.width100 picture source { width: 100%; } a.singlepicture { min-height: 8em; } a.singlepicture.noshadow { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } a.singlepicture.centering { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .cmart.editing .imageslider { min-height: 150px; } .listediting .swiper { display: none !important; } .cm-existingcontent .cmart-info { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } body.cmart.editing .cm-existingcontent::before { position: absolute; height: 100%; width: 100%; top: 0; left: 0; z-index: 55; content: ' '; background: var(--cmart-color); opacity: 0.1; -ms-filter: "alpha(opacity=calc(100 * @wert))"; -khtml-opacity: 0.1; -moz-opacity: 0.1; } div.cm-reviews { position: relative; z-index: 10; display: grid; width: 100%; column-gap: var(--var-grid-gap); grid-template-columns: [m] var(--var-bodymargin) repeat(12, [c] 1fr) [m-end] var(--var-bodymargin); } div.cm-reviews .cm-reviews__headline { grid-column: 3 / span 12; } div.cm-reviews .cm-reviews__headline .cm-eyebrow { color: var(--color-accent); } div.cm-reviews .cm-reviews__headline h2 { text-indent: -1em; margin: var(--var-row-gap) 0; } @media screen and (max-width: 600px) { div.cm-reviews .cm-reviews__headline h2 { text-indent: -0.5em; } } div.cm-reviews .cm-reviews__text { grid-column: 3 / span 3; } div.cm-reviews .cm-reviews__slider { grid-column: 7 / span 8; } @media screen and (max-width: 860px) { div.cm-reviews .cm-reviews__headline { grid-column: 2 / span 12; } div.cm-reviews .cm-reviews__svg { grid-column: 2 / span 1; } div.cm-reviews .cm-reviews__text { grid-column: 3 / span 4; } } @media screen and (max-width: 600px) { div.cm-reviews .cm-reviews__headline { grid-column: 2 / span 12; } div.cm-reviews .cm-reviews__svg { grid-column: 3 / span 2; } div.cm-reviews .cm-reviews__text { grid-column: 3 / span 8; } div.cm-reviews .cm-reviews__slider { margin-top: 5rem; grid-column: 2 / span 13; } } div.cm-reviews .swiper-slide { margin-right: 3rem; width: 36rem; max-width: 90%; box-sizing: border-box; padding: clamp(1rem, 2.1rem, 3.6rem); border: 1px solid var(--color-accent); border-radius: var(--var-borderradius); } @media screen and (max-width: 1000px) { div.cm-reviews .swiper-slide { width: 33rem; } } @media screen and (max-width: 600px) { div.cm-reviews .swiper-slide { width: 28rem; } } div.cm-reviews .swiper-slide .content .review__stars, div.cm-reviews .swiper-slide .content .review__source { display: inline-block; } div.cm-reviews .swiper-slide .content .review__text { margin-bottom: 2rem; color: var(--color-accent); font-family: var(--font-serif); font-size: var(--fs-body); line-height: var(--fs-body-lh); color: var(--color-body, inherit); font-weight: var(--weight-regular); font-style: italic; } div.cm-reviews .swiper-slide .content .review__stars { margin-right: 2rem; } div.cm-reviews .swiper-slide:nth-child(2n) { margin-top: -5vh; } div.cm-reviews .swiper-slide:nth-child(3n) { margin-top: 3vh; } div.cm-reviews .swiper-arrow { z-index: 30; } div.cm-reviews .reviewswiper { position: relative; } div.cm-reviews .reviewswiper .swiper { margin-top: -5vh; padding-top: 5vh; } div.cm-reviews .slidearrows { width: 12rem; left: -14rem; position: absolute; bottom: 0; } div.cm-reviews .slidearrows > div { font-size: 1.8rem; color: var(--color-accent); cursor: pointer; line-height: normal; display: inline-block; padding: 2rem; } /** * CMART Popup Styles * * Styles für das dynamisch geladene Popup-System. * Unterstützt verschiedene Style-Varianten: * - default: Rechts positioniert * - centered: Zentriert mit Overlay * - fullscreen: Vollbild * - banner: Unten fixiert */ .cmart-popup-open { overflow: hidden; } .cmart-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; pointer-events: none; } .cmart-popup--visible { opacity: 1; visibility: visible; } .cmart-popup--visible .cmart-popup__container { transform: translateY(0); } .cmart-popup__overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; pointer-events: none; } .cmart-popup__container { position: relative; background: #fff; border-radius: 10px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25); max-width: 90%; max-height: 90vh; overflow: auto; transform: translateY(20px); transition: transform 0.3s ease; pointer-events: auto; } .cmart-popup__close { position: absolute; top: -0.5em; right: -0.5em; width: 2.5em; height: 2.5em; border-radius: 50%; background: #fff; border: none; font-size: 1.5em; line-height: 1; cursor: pointer; z-index: 10; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); transition: background 0.2s, color 0.2s; } .cmart-popup__close:hover { background: #333; color: #fff; } .cmart-popup__image img { display: block; width: 100%; height: auto; border-radius: 10px 10px 0 0; } .cmart-popup__content { padding: 2em; text-align: center; } .cmart-popup__title { margin: 0 0 0.5em; font-size: 1.5em; font-weight: 600; color: #222; } .cmart-popup__text { margin-bottom: 1.5em; color: #555; line-height: 1.5; } .cmart-popup__text p { margin: 0 0 0.5em; } .cmart-popup__text p:last-child { margin-bottom: 0; } .cmart-popup__button { display: inline-block; padding: 0.8em 2em; background: var(--cmart-color, #333); color: #fff; text-decoration: none; border-radius: 5px; font-weight: 500; transition: background 0.2s, transform 0.2s; } .cmart-popup__button:hover { background: var(--cmart-color-hover, #111); transform: translateY(-2px); } .cmart-popup--default { align-items: center; justify-content: flex-end; padding: 2em; } .cmart-popup--default .cmart-popup__overlay { background: transparent; pointer-events: none; } .cmart-popup--default .cmart-popup__container { width: 22em; max-width: 100%; pointer-events: auto; } @media screen and (max-width: 600px) { .cmart-popup--default { padding: 1em; } .cmart-popup--default .cmart-popup__container { width: 100%; } } .cmart-popup--centered .cmart-popup__overlay { background: rgba(0, 0, 0, 0.5); pointer-events: auto; cursor: pointer; } .cmart-popup--centered .cmart-popup__container { width: 500px; max-width: 90%; } .cmart-popup--fullscreen .cmart-popup__overlay { background: rgba(0, 0, 0, 0.8); pointer-events: auto; cursor: pointer; } .cmart-popup--fullscreen .cmart-popup__container { width: 100%; height: 100%; max-width: 100%; max-height: 100%; border-radius: 0; display: flex; flex-direction: column; justify-content: center; } .cmart-popup--fullscreen .cmart-popup__close { top: 1em; right: 1em; width: 3em; height: 3em; font-size: 1.5em; } .cmart-popup--fullscreen .cmart-popup__image { max-height: 50vh; overflow: hidden; } .cmart-popup--fullscreen .cmart-popup__image img { border-radius: 0; object-fit: cover; height: 100%; } .cmart-popup--fullscreen .cmart-popup__content { padding: 3em; } .cmart-popup--fullscreen .cmart-popup__title { font-size: 2em; } .cmart-popup--fullscreen .cmart-popup__text { font-size: 1.2em; } .cmart-popup--banner { align-items: flex-end; justify-content: center; } .cmart-popup--banner .cmart-popup__overlay { background: transparent; pointer-events: none; } .cmart-popup--banner .cmart-popup__container { width: 100%; max-width: 100%; border-radius: 10px 10px 0 0; transform: translateY(100%); pointer-events: auto; } .cmart-popup--banner.cmart-popup--visible .cmart-popup__container { transform: translateY(0); } .cmart-popup--banner .cmart-popup__close { top: 0.5em; right: 1em; } .cmart-popup--banner .cmart-popup__content { display: flex; align-items: center; justify-content: center; gap: 2em; padding: 1.5em 2em; text-align: left; } @media screen and (max-width: 600px) { .cmart-popup--banner .cmart-popup__content { flex-direction: column; text-align: center; } } .cmart-popup--banner .cmart-popup__title { margin: 0; font-size: 1.2em; } .cmart-popup--banner .cmart-popup__text { margin: 0; flex: 1; } .cmart-popup--banner .cmart-popup__text p { margin: 0; } .cmart-popup--banner .cmart-popup__button { white-space: nowrap; } .cmart-popup--banner .cmart-popup__image { display: none; } #cmart-contentpopup { position: fixed; top: 50%; display: none; right: 5em; float: left; transform: translate(0, -50%); width: 21em; max-width: 70%; z-index: 200; } @media screen and (max-width: 800px) { #cmart-contentpopup { right: 3em; width: 19em; } } #cmart-contentpopup #cmart-contentpopupbg { position: absolute; top: 0; left: 0; height: 100%; width: 100%; display: block; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25); border-radius: 10px; } #cmart-contentpopup > a { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; z-index: 220; } #cmart-contentpopupcloser { position: absolute; display: block; right: -1em; top: -1em; z-index: 230; width: 4em; height: 4em; border-radius: 30px; background: #fff; } #cmart-contentpopupcloser span { position: absolute; display: block; top: 50%; left: 0; width: 100%; text-align: center; font-size: 2em; line-height: normal; transform: translate(0, -50%); } #cmart-contentpopupicon { width: 100%; display: block; position: relative; font-size: 4.4em; color: #fff; margin-bottom: 0.4em; } #cmart-contentpopuplink { width: calc(100% - 2em); margin-left: 1em; margin-bottom: 1em; border-radius: 8px; color: #fff; padding: 1em 0; box-sizing: border-box; position: relative; text-align: center; } #cmart-contentpopuplink span { line-height: normal; text-transform: uppercase; } #cmart-contentpopupcontent { padding: 3em 1.5em; width: 100%; box-sizing: border-box; text-align: center; display: block; position: relative; z-index: 205; } #cmart-contentpopupcontent p, #cmart-contentpopupcontent h1, #cmart-contentpopupcontent h2, #cmart-contentpopupcontent h3, #cmart-contentpopupcontent h4 { color: #fff; } #cmart-contentpopupcontent p { margin-bottom: 0; line-height: 130%; } #cmart-contentpopupcontent p + p { margin-top: 0.5em; } .js.no-touch #cmart-contentpopup.haslink #cmart-contentpopupcloser, .js.no-touch #cmart-contentpopup.haslink #cmart-contentpopuplink { transition: 0.13s all ease; } .js.no-touch #cmart-contentpopup.haslink:hover #cmart-contentpopupcloser { background: #111; color: #fff; } .js.no-touch #cmart-contentpopup.haslink:hover #cmart-contentpopuplink { background: #fff; } body.compensate-for-scrollbar { overflow: hidden; } .fancybox-active { height: auto; } .fancybox-is-hidden { left: -9999px; margin: 0; position: absolute !important; top: -9999px; visibility: hidden; } .fancybox-container { -webkit-backface-visibility: hidden; backface-visibility: hidden; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; height: 100%; left: 0; position: fixed; -webkit-tap-highlight-color: transparent; top: 0; -webkit-transform: translateZ(0); transform: translateZ(0); width: 100%; z-index: 99992; } .fancybox-container * { box-sizing: border-box; } .fancybox-outer, .fancybox-inner, .fancybox-bg, .fancybox-stage { bottom: 0; left: 0; position: absolute; right: 0; top: 0; } .fancybox-outer { -webkit-overflow-scrolling: touch; overflow-y: auto; } .fancybox-bg { background: #232222; opacity: 0; transition-duration: inherit; transition-property: opacity; transition-timing-function: cubic-bezier(0.47, 0, 0.74, 0.71); } .fancybox-is-open .fancybox-bg { opacity: 0.87; transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); } .fancybox-infobar, .fancybox-toolbar, .fancybox-caption, .fancybox-navigation .fancybox-button { direction: ltr; opacity: 0; position: absolute; transition: opacity 0.25s, visibility 0s linear 0.25s; visibility: hidden; z-index: 99997; } .fancybox-show-infobar .fancybox-infobar, .fancybox-show-toolbar .fancybox-toolbar, .fancybox-show-caption .fancybox-caption, .fancybox-show-nav .fancybox-navigation .fancybox-button { opacity: 1; transition: opacity 0.25s, visibility 0s; visibility: visible; } .fancybox-infobar { color: #ccc; font-size: 13px; -webkit-font-smoothing: subpixel-antialiased; height: 44px; left: 0; line-height: 44px; min-width: 44px; mix-blend-mode: difference; padding: 0 10px; pointer-events: none; text-align: center; top: 0; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .fancybox-toolbar { right: 0; top: 0; } .fancybox-stage { direction: ltr; overflow: visible; -webkit-transform: translate3d(0, 0, 0); z-index: 99994; } .fancybox-is-open .fancybox-stage { overflow: hidden; } .fancybox-slide { -webkit-backface-visibility: hidden; backface-visibility: hidden; display: none; height: 100%; left: 0; outline: none; overflow: auto; -webkit-overflow-scrolling: touch; padding: 44px; position: absolute; text-align: center; top: 0; transition-property: opacity, -webkit-transform; transition-property: transform, opacity; transition-property: transform, opacity, -webkit-transform; white-space: normal; width: 100%; z-index: 99994; } .fancybox-slide::before { content: ''; display: inline-block; height: 100%; margin-right: -0.25em; vertical-align: middle; width: 0; } .fancybox-is-sliding .fancybox-slide, .fancybox-slide--previous, .fancybox-slide--current, .fancybox-slide--next { display: block; } .fancybox-slide--next { z-index: 99995; } .fancybox-slide--image { overflow: visible; padding: 44px 0; } .fancybox-slide--image::before { display: none; } .fancybox-slide--html { padding: 6px 6px 0 6px; } .fancybox-slide--iframe { padding: 44px 44px 0; } .fancybox-content { background: #fff; display: inline-block; margin: 0 0 6px 0; max-width: 100%; overflow: auto; padding: 0; padding: 24px; position: relative; text-align: left; vertical-align: middle; } .fancybox-slide--image .fancybox-content { -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.14, 1); animation-timing-function: cubic-bezier(0.5, 0, 0.14, 1); -webkit-backface-visibility: hidden; backface-visibility: hidden; background: transparent; background-repeat: no-repeat; background-size: 100% 100%; left: 0; margin: 0; max-width: none; overflow: visible; padding: 0; position: absolute; top: 0; -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; transition-property: opacity, -webkit-transform; transition-property: transform, opacity; transition-property: transform, opacity, -webkit-transform; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; z-index: 99995; } .fancybox-can-zoomOut .fancybox-content { cursor: -webkit-zoom-out; cursor: zoom-out; } .fancybox-can-zoomIn .fancybox-content { cursor: -webkit-zoom-in; cursor: zoom-in; } .fancybox-can-drag .fancybox-content { cursor: -webkit-grab; cursor: grab; } .fancybox-is-dragging .fancybox-content { cursor: -webkit-grabbing; cursor: grabbing; } .fancybox-container [data-selectable='true'] { cursor: text; } .fancybox-image, .fancybox-spaceball { background: transparent; border: 0; height: 100%; left: 0; margin: 0; max-height: none; max-width: none; padding: 0; position: absolute; top: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 100%; } .fancybox-spaceball { z-index: 1; } .fancybox-slide--html .fancybox-content { margin-bottom: 6px; } .fancybox-slide--video .fancybox-content, .fancybox-slide--map .fancybox-content, .fancybox-slide--iframe .fancybox-content { height: 100%; margin: 0; overflow: visible; padding: 0; width: 100%; } .fancybox-slide--video .fancybox-content { background: #000; } .fancybox-slide--map .fancybox-content { background: #e5e3df; } .fancybox-slide--iframe .fancybox-content { background: #fff; height: 92%; margin-bottom: 44px; width: 99%; } .fancybox-video, .fancybox-iframe { background: transparent; border: 0; height: 100%; margin: 0; overflow: hidden; padding: 0; width: 100%; } .fancybox-iframe { vertical-align: top; } .fancybox-error { background: #fff; cursor: default; max-width: 400px; padding: 40px; width: 100%; } .fancybox-error p { color: #444; font-size: 16px; line-height: 20px; margin: 0; padding: 0; } /* Buttons */ .fancybox-button { background: rgba(30, 30, 30, 0.6); border: 0; border-radius: 0; cursor: pointer; display: inline-block; height: 44px; margin: 0; outline: none; padding: 10px; transition: color 0.2s; vertical-align: top; width: 44px; } .fancybox-button, .fancybox-button:visited, .fancybox-button:link { color: #ccc; } .fancybox-button:focus, .fancybox-button:hover { color: #fff; } .fancybox-button.disabled, .fancybox-button.disabled:hover, .fancybox-button[disabled], .fancybox-button[disabled]:hover { color: #888; cursor: default; } .fancybox-button svg { display: block; overflow: visible; position: relative; shape-rendering: geometricPrecision; } .fancybox-button svg path { fill: transparent; stroke: currentColor; stroke-linejoin: round; stroke-width: 3; } .fancybox-button--play svg path:nth-child(2) { display: none; } .fancybox-button--pause svg path:nth-child(1) { display: none; } .fancybox-button--play svg path, .fancybox-button--share svg path, .fancybox-button--thumbs svg path { fill: currentColor; } .fancybox-button--share svg path { stroke-width: 1; } /* Navigation arrows */ .fancybox-navigation .fancybox-button { height: 70px; opacity: 0; padding: 6px; position: absolute; top: 50%; width: 70px; } .fancybox-navigation svg { width: 50%; margin-left: 21%; margin-top: 21%; } .fancybox-show-nav .fancybox-navigation .fancybox-button { transition: opacity 0.25s, visibility 0s, color 0.25s; } .fancybox-navigation .fancybox-button::after { content: ''; left: -35px; padding: 50px; position: absolute; top: -35px; } .fancybox-navigation .fancybox-button--arrow_left { background: transparent; left: 6px; } .fancybox-navigation .fancybox-button--arrow_right { background: transparent; right: 6px; } /* Close button on the top right corner of html content */ .fancybox-close-small { background: transparent; border: 0; border-radius: 0; color: #555; cursor: pointer; height: 44px; margin: 0; padding: 6px; position: absolute; right: 0; top: 0; width: 44px; z-index: 10; } .fancybox-close-small svg { fill: transparent; opacity: 0.8; stroke: currentColor; stroke-width: 1.5; transition: stroke 0.1s; } .fancybox-close-small:focus { outline: none; } .fancybox-close-small:hover svg { opacity: 1; } .fancybox-slide--image .fancybox-close-small, .fancybox-slide--video .fancybox-close-small, .fancybox-slide--iframe .fancybox-close-small { color: #ccc; padding: 5px; right: -12px; top: -44px; } .fancybox-slide--image .fancybox-close-small:hover svg, .fancybox-slide--video .fancybox-close-small:hover svg, .fancybox-slide--iframe .fancybox-close-small:hover svg { background: transparent; color: #fff; } .fancybox-is-scaling .fancybox-close-small, .fancybox-is-zoomable.fancybox-can-drag .fancybox-close-small { display: none; } /* Caption */ .fancybox-caption { bottom: 0; color: #fff; font-size: 14px; font-weight: 400; left: 0; line-height: 1.5; padding: 25px 44px 25px 44px; right: 0; } .fancybox-caption::before { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAEtCAQAAABjBcL7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHRJREFUKM+Vk8EOgDAIQ0vj/3+xBw8qIZZueFnIKC90MCAI8DlrkHGeqqGIU6lVigrBtpCWqeRWoHDNqs0F7VNVBVxmHRlvoVqjaYkdnDIaivH2HqZ5+oZj3JUzWB+cOz4G48Bg+tsJ/tqu4dLC/4Xb+0GcF5BwBC0AA53qAAAAAElFTkSuQmCC); background-repeat: repeat-x; background-size: contain; bottom: 0; content: ''; display: block; left: 0; pointer-events: none; position: absolute; right: 0; top: -25px; z-index: -1; } .fancybox-caption::after { border-bottom: 1px solid rgba(255, 255, 255, 0.3); content: ''; display: block; left: 44px; position: absolute; right: 44px; top: 0; } .fancybox-caption a, .fancybox-caption a:link, .fancybox-caption a:visited { color: #ccc; text-decoration: none; } .fancybox-caption a:hover { color: #fff; text-decoration: underline; } /* Loading indicator */ .fancybox-loading { -webkit-animation: fancybox-rotate 1s infinite linear; animation: fancybox-rotate 1s infinite linear; background: transparent; border: 5px solid rgba(100, 100, 100, 0.5); border-radius: 100%; border-top-color: #fff; height: 60px; left: 50%; margin: -30px 0 0 -30px; opacity: 0.6; padding: 0; position: absolute; top: 50%; width: 60px; z-index: 99999; } .fancybox-loading.fancybox-loading1 { margin: -30px 0 0 -30px; } @-webkit-keyframes fancybox-rotate { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @keyframes fancybox-rotate { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } /* Transition effects */ .fancybox-animated { transition-timing-function: cubic-bezier(0, 0, 0.25, 1); } /* transitionEffect: slide */ .fancybox-fx-slide.fancybox-slide--previous { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .fancybox-fx-slide.fancybox-slide--next { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } .fancybox-fx-slide.fancybox-slide--current { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } /* transitionEffect: fade */ .fancybox-fx-fade.fancybox-slide--previous, .fancybox-fx-fade.fancybox-slide--next { opacity: 0; transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .fancybox-fx-fade.fancybox-slide--current { opacity: 1; } /* transitionEffect: zoom-in-out */ .fancybox-fx-zoom-in-out.fancybox-slide--previous { opacity: 0; -webkit-transform: scale3d(1.5, 1.5, 1.5); transform: scale3d(1.5, 1.5, 1.5); } .fancybox-fx-zoom-in-out.fancybox-slide--next { opacity: 0; -webkit-transform: scale3d(0.5, 0.5, 0.5); transform: scale3d(0.5, 0.5, 0.5); } .fancybox-fx-zoom-in-out.fancybox-slide--current { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } /* transitionEffect: rotate */ .fancybox-fx-rotate.fancybox-slide--previous { opacity: 0; -webkit-transform: rotate(-360deg); -ms-transform: rotate(-360deg); transform: rotate(-360deg); } .fancybox-fx-rotate.fancybox-slide--next { opacity: 0; -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } .fancybox-fx-rotate.fancybox-slide--current { opacity: 1; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } /* transitionEffect: circular */ .fancybox-fx-circular.fancybox-slide--previous { opacity: 0; -webkit-transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0); transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0); } .fancybox-fx-circular.fancybox-slide--next { opacity: 0; -webkit-transform: scale3d(0, 0, 0) translate3d(100%, 0, 0); transform: scale3d(0, 0, 0) translate3d(100%, 0, 0); } .fancybox-fx-circular.fancybox-slide--current { opacity: 1; -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0); transform: scale3d(1, 1, 1) translate3d(0, 0, 0); } /* transitionEffect: tube */ .fancybox-fx-tube.fancybox-slide--previous { -webkit-transform: translate3d(-100%, 0, 0) scale(0.1) skew(-10deg); transform: translate3d(-100%, 0, 0) scale(0.1) skew(-10deg); } .fancybox-fx-tube.fancybox-slide--next { -webkit-transform: translate3d(100%, 0, 0) scale(0.1) skew(10deg); transform: translate3d(100%, 0, 0) scale(0.1) skew(10deg); } .fancybox-fx-tube.fancybox-slide--current { -webkit-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); } /* Share */ .fancybox-share { background: #f4f4f4; border-radius: 3px; max-width: 90%; padding: 30px; text-align: center; } .fancybox-share h1 { color: #222; font-size: 35px; font-weight: 700; margin: 0 0 20px 0; } .fancybox-share p { margin: 0; padding: 0; } .fancybox-share__button { border: 0; border-radius: 3px; display: inline-block; font-size: 14px; font-weight: 700; line-height: 40px; margin: 0 5px 10px 5px; min-width: 130px; padding: 0 15px; text-decoration: none; transition: all 0.2s; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; white-space: nowrap; } .fancybox-share__button:visited, .fancybox-share__button:link { color: #fff; } .fancybox-share__button:hover { text-decoration: none; } .fancybox-share__button--fb { background: #3b5998; } .fancybox-share__button--fb:hover { background: #344e86; } .fancybox-share__button--pt { background: #bd081d; } .fancybox-share__button--pt:hover { background: #aa0719; } .fancybox-share__button--tw { background: #1da1f2; } .fancybox-share__button--tw:hover { background: #0d95e8; } .fancybox-share__button svg { height: 25px; margin-right: 7px; position: relative; top: -1px; vertical-align: middle; width: 25px; } .fancybox-share__button svg path { fill: #fff; } .fancybox-share__input { background: transparent; border: 0; border-bottom: 1px solid #d7d7d7; border-radius: 0; color: #5d5b5b; font-size: 14px; margin: 10px 0 0 0; outline: none; padding: 10px 15px; width: 100%; } /* Thumbs */ .fancybox-thumbs { background: #fff; bottom: 0; display: none; margin: 0; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; padding: 2px 2px 4px 2px; position: absolute; right: 0; -webkit-tap-highlight-color: transparent; top: 0; width: 212px; z-index: 99995; } .fancybox-thumbs-x { overflow-x: auto; overflow-y: hidden; } .fancybox-show-thumbs .fancybox-thumbs { display: block; } .fancybox-show-thumbs .fancybox-inner { right: 212px; } .fancybox-thumbs > ul { font-size: 0; height: 100%; list-style: none; margin: 0; overflow-x: hidden; overflow-y: auto; padding: 0; position: absolute; position: relative; white-space: nowrap; width: 100%; } .fancybox-thumbs-x > ul { overflow: hidden; } .fancybox-thumbs-y > ul::-webkit-scrollbar { width: 7px; } .fancybox-thumbs-y > ul::-webkit-scrollbar-track { background: #fff; border-radius: 10px; box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); } .fancybox-thumbs-y > ul::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 10px; } .fancybox-thumbs > ul > li { -webkit-backface-visibility: hidden; backface-visibility: hidden; cursor: pointer; height: 75px; margin: 2px; max-height: calc(100% - 8px); max-width: calc(50% - 4px); outline: none; overflow: hidden; padding: 0; position: relative; -webkit-tap-highlight-color: transparent; width: 100px; } .fancybox-thumbs-loading { background: rgba(0, 0, 0, 0.1); } .fancybox-thumbs > ul > li { background-position: center center; background-repeat: no-repeat; background-size: cover; } .fancybox-thumbs > ul > li:before { border: 4px solid #4ea7f9; bottom: 0; content: ''; left: 0; opacity: 0; position: absolute; right: 0; top: 0; transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); z-index: 99991; } .fancybox-thumbs .fancybox-thumbs-active:before { opacity: 1; } /* Styling for Small-Screen Devices */ @media all and (max-width: 800px) { .fancybox-thumbs { width: 110px; } .fancybox-show-thumbs .fancybox-inner { right: 110px; } .fancybox-thumbs > ul > li { max-width: calc(100% - 10px); } } .flatpickr-calendar { background: transparent; opacity: 0; display: none; text-align: center; visibility: hidden; padding: 0; -webkit-animation: none; animation: none; direction: ltr; border: 0; font-size: 14px; line-height: 24px; border-radius: 5px; position: absolute; width: 307.875px; -webkit-box-sizing: border-box; box-sizing: border-box; -ms-touch-action: manipulation; touch-action: manipulation; background: #fff; -webkit-box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, 0.08); box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, 0.08); } .flatpickr-calendar.open, .flatpickr-calendar.inline { opacity: 1; max-height: 640px; visibility: visible; } .flatpickr-calendar.open { display: inline-block; z-index: 99999; } .flatpickr-calendar.animate.open { -webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1); animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1); } .flatpickr-calendar.inline { display: block; position: relative; top: 2px; } .flatpickr-calendar.static { position: absolute; top: calc(100% + 2px); } .flatpickr-calendar.static.open { z-index: 999; display: block; } .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) { -webkit-box-shadow: none !important; box-shadow: none !important; } .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) { -webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6; box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6; } .flatpickr-calendar .hasWeeks .dayContainer, .flatpickr-calendar .hasTime .dayContainer { border-bottom: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .flatpickr-calendar .hasWeeks .dayContainer { border-left: 0; } .flatpickr-calendar.showTimeInput.hasTime .flatpickr-time { height: 40px; border-top: 1px solid #e6e6e6; } .flatpickr-calendar.noCalendar.hasTime .flatpickr-time { height: auto; } .flatpickr-calendar:before, .flatpickr-calendar:after { position: absolute; display: block; pointer-events: none; border: solid transparent; content: ''; height: 0; width: 0; left: 22px; } .flatpickr-calendar.rightMost:before, .flatpickr-calendar.rightMost:after { left: auto; right: 22px; } .flatpickr-calendar:before { border-width: 5px; margin: 0 -5px; } .flatpickr-calendar:after { border-width: 4px; margin: 0 -4px; } .flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after { bottom: 100%; } .flatpickr-calendar.arrowTop:before { border-bottom-color: #e6e6e6; } .flatpickr-calendar.arrowTop:after { border-bottom-color: #fff; } .flatpickr-calendar.arrowBottom:before, .flatpickr-calendar.arrowBottom:after { top: 100%; } .flatpickr-calendar.arrowBottom:before { border-top-color: #e6e6e6; } .flatpickr-calendar.arrowBottom:after { border-top-color: #fff; } .flatpickr-calendar:focus { outline: 0; } .flatpickr-wrapper { position: relative; display: inline-block; } .flatpickr-months { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .flatpickr-months .flatpickr-month { background: transparent; color: rgba(0, 0, 0, 0.9); fill: rgba(0, 0, 0, 0.9); height: 28px; line-height: 1; text-align: center; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow: hidden; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { text-decoration: none; cursor: pointer; position: absolute; top: 0px; line-height: 16px; height: 28px; padding: 10px; z-index: 3; color: rgba(0, 0, 0, 0.9); fill: rgba(0, 0, 0, 0.9); } .flatpickr-months .flatpickr-prev-month.disabled, .flatpickr-months .flatpickr-next-month.disabled { display: none; } .flatpickr-months .flatpickr-prev-month i, .flatpickr-months .flatpickr-next-month i { position: relative; } .flatpickr-months .flatpickr-prev-month.flatpickr-prev-month, .flatpickr-months .flatpickr-next-month.flatpickr-prev-month { /* /*rtl:begin:ignore*/ /* */ left: 0; /* /*rtl:end:ignore*/ /* */ } /* /*rtl:begin:ignore*/ /* /*rtl:end:ignore*/ .flatpickr-months .flatpickr-prev-month.flatpickr-next-month, .flatpickr-months .flatpickr-next-month.flatpickr-next-month { /* /*rtl:begin:ignore*/ /* */ right: 0; /* /*rtl:end:ignore*/ /* */ } /* /*rtl:begin:ignore*/ /* /*rtl:end:ignore*/ .flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover { color: #959ea9; } .flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: #f64747; } .flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { width: 14px; height: 14px; } .flatpickr-months .flatpickr-prev-month svg path, .flatpickr-months .flatpickr-next-month svg path { -webkit-transition: fill 0.1s; transition: fill 0.1s; fill: inherit; } .numInputWrapper { position: relative; height: auto; } .numInputWrapper input, .numInputWrapper span { display: inline-block; } .numInputWrapper input { width: 100%; } .numInputWrapper input::-ms-clear { display: none; } .numInputWrapper span { position: absolute; right: 0; width: 14px; padding: 0 4px 0 2px; height: 50%; line-height: 50%; opacity: 0; cursor: pointer; border: 1px solid rgba(57, 57, 57, 0.15); -webkit-box-sizing: border-box; box-sizing: border-box; } .numInputWrapper span:hover { background: rgba(0, 0, 0, 0.1); } .numInputWrapper span:active { background: rgba(0, 0, 0, 0.2); } .numInputWrapper span:after { display: block; content: ""; position: absolute; } .numInputWrapper span.arrowUp { top: 0; border-bottom: 0; } .numInputWrapper span.arrowUp:after { border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 4px solid rgba(57, 57, 57, 0.6); top: 26%; } .numInputWrapper span.arrowDown { top: 50%; } .numInputWrapper span.arrowDown:after { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid rgba(57, 57, 57, 0.6); top: 40%; } .numInputWrapper span svg { width: inherit; height: auto; } .numInputWrapper span svg path { fill: rgba(0, 0, 0, 0.5); } .numInputWrapper:hover { background: rgba(0, 0, 0, 0.05); } .numInputWrapper:hover span { opacity: 1; } .flatpickr-current-month { font-size: 135%; line-height: inherit; font-weight: 300; color: inherit; position: absolute; width: 75%; left: 12.5%; padding: 6.16px 0 0 0; line-height: 1; height: 28px; display: inline-block; text-align: center; -webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); } .flatpickr-current-month span.cur-month { font-family: inherit; font-weight: 700; color: inherit; display: inline-block; margin-left: 0.5ch; padding: 0; } .flatpickr-current-month span.cur-month:hover { background: rgba(0, 0, 0, 0.05); } .flatpickr-current-month .numInputWrapper { width: 6ch; width: 7ch\0; display: inline-block; } .flatpickr-current-month .numInputWrapper span.arrowUp:after { border-bottom-color: rgba(0, 0, 0, 0.9); } .flatpickr-current-month .numInputWrapper span.arrowDown:after { border-top-color: rgba(0, 0, 0, 0.9); } .flatpickr-current-month input.cur-year { background: transparent; -webkit-box-sizing: border-box; box-sizing: border-box; color: inherit; cursor: text; padding: 0 0 0 0.5ch; margin: 0; display: inline-block; font-size: inherit; font-family: inherit; font-weight: 300; line-height: inherit; height: auto; border: 0; border-radius: 0; vertical-align: initial; } .flatpickr-current-month input.cur-year:focus { outline: 0; } .flatpickr-current-month input.cur-year[disabled], .flatpickr-current-month input.cur-year[disabled]:hover { font-size: 100%; color: rgba(0, 0, 0, 0.5); background: transparent; pointer-events: none; } .flatpickr-weekdays { background: transparent; text-align: center; overflow: hidden; width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 28px; } .flatpickr-weekdays .flatpickr-weekdaycontainer { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } span.flatpickr-weekday { cursor: default; font-size: 90%; background: transparent; color: rgba(0, 0, 0, 0.54); line-height: 1; margin: 0; text-align: center; display: block; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; font-weight: bolder; } .dayContainer, .flatpickr-weeks { padding: 1px 0 0 0; } .flatpickr-days { position: relative; overflow: hidden; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; width: 307.875px; } .flatpickr-days:focus { outline: 0; } .dayContainer { padding: 0; outline: 0; text-align: left; width: 307.875px; min-width: 307.875px; max-width: 307.875px; -webkit-box-sizing: border-box; box-sizing: border-box; display: inline-block; display: -ms-flexbox; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-wrap: wrap; -ms-flex-pack: justify; -webkit-justify-content: space-around; justify-content: space-around; -webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); opacity: 1; } .dayContainer + .dayContainer { -webkit-box-shadow: -1px 0 0 #e6e6e6; box-shadow: -1px 0 0 #e6e6e6; } .flatpickr-day { background: none; border: 1px solid transparent; border-radius: 150px; -webkit-box-sizing: border-box; box-sizing: border-box; color: #393939; cursor: pointer; font-weight: 400; width: 14.2857143%; -webkit-flex-basis: 14.2857143%; -ms-flex-preferred-size: 14.2857143%; flex-basis: 14.2857143%; max-width: 39px; height: 39px; line-height: 39px; margin: 0; display: inline-block; position: relative; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; text-align: center; } .flatpickr-day.inRange, .flatpickr-day.prevMonthDay.inRange, .flatpickr-day.nextMonthDay.inRange, .flatpickr-day.today.inRange, .flatpickr-day.prevMonthDay.today.inRange, .flatpickr-day.nextMonthDay.today.inRange, .flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover, .flatpickr-day:focus, .flatpickr-day.prevMonthDay:focus, .flatpickr-day.nextMonthDay:focus { cursor: pointer; outline: 0; background: #e6e6e6; border-color: #e6e6e6; } .flatpickr-day.today { border-color: #959ea9; } .flatpickr-day.today:hover, .flatpickr-day.today:focus { border-color: #959ea9; background: #959ea9; color: #fff; } .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay { background: #569ff7; -webkit-box-shadow: none; box-shadow: none; color: #fff; border-color: #569ff7; } .flatpickr-day.selected.startRange, .flatpickr-day.startRange.startRange, .flatpickr-day.endRange.startRange { border-radius: 50px 0 0 50px; } .flatpickr-day.selected.endRange, .flatpickr-day.startRange.endRange, .flatpickr-day.endRange.endRange { border-radius: 0 50px 50px 0; } .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) { -webkit-box-shadow: -10px 0 0 #569ff7; box-shadow: -10px 0 0 #569ff7; } .flatpickr-day.selected.startRange.endRange, .flatpickr-day.startRange.startRange.endRange, .flatpickr-day.endRange.startRange.endRange { border-radius: 50px; } .flatpickr-day.inRange { border-radius: 0; -webkit-box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6; box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6; } .flatpickr-day.disabled, .flatpickr-day.disabled:hover, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.notAllowed, .flatpickr-day.notAllowed.prevMonthDay, .flatpickr-day.notAllowed.nextMonthDay { color: rgba(57, 57, 57, 0.3); background: transparent; border-color: transparent; cursor: default; } .flatpickr-day.disabled, .flatpickr-day.disabled:hover { cursor: not-allowed; color: rgba(57, 57, 57, 0.1); } .flatpickr-day.week.selected { border-radius: 0; -webkit-box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7; box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7; } .flatpickr-day.hidden { visibility: hidden; } .rangeMode .flatpickr-day { margin-top: 1px; } .flatpickr-weekwrapper { display: inline-block; } .flatpickr-weekwrapper .flatpickr-weeks { padding: 0 12px; -webkit-box-shadow: 1px 0 0 #e6e6e6; box-shadow: 1px 0 0 #e6e6e6; } .flatpickr-weekwrapper .flatpickr-weekday { float: none; width: 100%; line-height: 28px; } .flatpickr-weekwrapper span.flatpickr-day, .flatpickr-weekwrapper span.flatpickr-day:hover { display: block; width: 100%; max-width: none; color: rgba(57, 57, 57, 0.3); background: transparent; cursor: default; border: none; } .flatpickr-innerContainer { display: block; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; } .flatpickr-rContainer { display: inline-block; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .flatpickr-time { text-align: center; outline: 0; display: block; height: 0; line-height: 40px; max-height: 40px; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .flatpickr-time:after { content: ""; display: table; clear: both; } .flatpickr-time .numInputWrapper { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; width: 40%; height: 40px; } .flatpickr-time .numInputWrapper span.arrowUp:after { border-bottom-color: #393939; } .flatpickr-time .numInputWrapper span.arrowDown:after { border-top-color: #393939; } .flatpickr-time.hasSeconds .numInputWrapper { width: 26%; } .flatpickr-time.time24hr .numInputWrapper { width: 49%; } .flatpickr-time input { background: transparent; -webkit-box-shadow: none; box-shadow: none; border: 0; border-radius: 0; text-align: center; margin: 0; padding: 0; height: inherit; line-height: inherit; color: #393939; font-size: 14px; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; } .flatpickr-time input.flatpickr-hour { font-weight: bold; } .flatpickr-time input.flatpickr-minute, .flatpickr-time input.flatpickr-second { font-weight: 400; } .flatpickr-time input:focus { outline: 0; border: 0; } .flatpickr-time .flatpickr-time-separator, .flatpickr-time .flatpickr-am-pm { height: inherit; display: inline-block; line-height: inherit; color: #393939; font-weight: bold; width: 2%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; } .flatpickr-time .flatpickr-am-pm { outline: 0; width: 18%; cursor: pointer; text-align: center; font-weight: 400; } .flatpickr-time input:hover, .flatpickr-time .flatpickr-am-pm:hover, .flatpickr-time input:focus, .flatpickr-time .flatpickr-am-pm:focus { background: #f3f3f3; } .flatpickr-input[readonly] { cursor: pointer; } @-webkit-keyframes fpFadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fpFadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .flatpickr-calendar { background: transparent; opacity: 0; display: none; text-align: center; visibility: hidden; padding: 0; -webkit-animation: none; animation: none; direction: ltr; border: 0; font-size: 14px; line-height: 24px; border-radius: 5px; position: absolute; width: 307.875px; -webkit-box-sizing: border-box; box-sizing: border-box; -ms-touch-action: manipulation; touch-action: manipulation; -webkit-box-shadow: 0 3px 13px rgba(0, 0, 0, 0.08); box-shadow: 0 3px 13px rgba(0, 0, 0, 0.08); } .flatpickr-calendar.open, .flatpickr-calendar.inline { opacity: 1; max-height: 640px; visibility: visible; } .flatpickr-calendar.open { display: inline-block; z-index: 99999; } .flatpickr-calendar.animate.open { -webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1); animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1); } .flatpickr-calendar.inline { display: block; position: relative; top: 2px; } .flatpickr-calendar.static { position: absolute; top: calc(100% + 2px); } .flatpickr-calendar.static.open { z-index: 999; display: block; } .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) { -webkit-box-shadow: none !important; box-shadow: none !important; } .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) { -webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6; box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6; } .flatpickr-calendar .hasWeeks .dayContainer, .flatpickr-calendar .hasTime .dayContainer { border-bottom: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .flatpickr-calendar .hasWeeks .dayContainer { border-left: 0; } .flatpickr-calendar.showTimeInput.hasTime .flatpickr-time { height: 40px; border-top: 1px solid #eceef1; } .flatpickr-calendar.showTimeInput.hasTime .flatpickr-innerContainer { border-bottom: 0; } .flatpickr-calendar.showTimeInput.hasTime .flatpickr-time { border: 1px solid #eceef1; } .flatpickr-calendar.noCalendar.hasTime .flatpickr-time { height: auto; } .flatpickr-calendar:before, .flatpickr-calendar:after { position: absolute; display: block; pointer-events: none; border: solid transparent; content: ''; height: 0; width: 0; left: 22px; } .flatpickr-calendar.rightMost:before, .flatpickr-calendar.rightMost:after { left: auto; right: 22px; } .flatpickr-calendar:before { border-width: 5px; margin: 0 -5px; } .flatpickr-calendar:after { border-width: 4px; margin: 0 -4px; } .flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after { bottom: 100%; } .flatpickr-calendar.arrowTop:before { border-bottom-color: #eceef1; } .flatpickr-calendar.arrowTop:after { border-bottom-color: #eceef1; } .flatpickr-calendar.arrowBottom:before, .flatpickr-calendar.arrowBottom:after { top: 100%; } .flatpickr-calendar.arrowBottom:before { border-top-color: #eceef1; } .flatpickr-calendar.arrowBottom:after { border-top-color: #eceef1; } .flatpickr-calendar:focus { outline: 0; } .flatpickr-wrapper { position: relative; display: inline-block; } .flatpickr-months { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .flatpickr-months .flatpickr-month { border-radius: 5px 5px 0 0; background: #eceef1; color: #5a6171; fill: #5a6171; height: 28px; line-height: 1; text-align: center; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow: hidden; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { text-decoration: none; cursor: pointer; position: absolute; top: 0px; line-height: 16px; height: 28px; padding: 10px; z-index: 3; color: #5a6171; fill: #5a6171; } .flatpickr-months .flatpickr-prev-month.disabled, .flatpickr-months .flatpickr-next-month.disabled { display: none; } .flatpickr-months .flatpickr-prev-month i, .flatpickr-months .flatpickr-next-month i { position: relative; } .flatpickr-months .flatpickr-prev-month.flatpickr-prev-month, .flatpickr-months .flatpickr-next-month.flatpickr-prev-month { /* /*rtl:begin:ignore*/ /* */ left: 0; /* /*rtl:end:ignore*/ /* */ } /* /*rtl:begin:ignore*/ /* /*rtl:end:ignore*/ .flatpickr-months .flatpickr-prev-month.flatpickr-next-month, .flatpickr-months .flatpickr-next-month.flatpickr-next-month { /* /*rtl:begin:ignore*/ /* */ right: 0; /* /*rtl:end:ignore*/ /* */ } /* /*rtl:begin:ignore*/ /* /*rtl:end:ignore*/ .flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover { color: #bbb; } .flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: #f64747; } .flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { width: 14px; height: 14px; } .flatpickr-months .flatpickr-prev-month svg path, .flatpickr-months .flatpickr-next-month svg path { -webkit-transition: fill 0.1s; transition: fill 0.1s; fill: inherit; } .numInputWrapper { position: relative; height: auto; } .numInputWrapper input, .numInputWrapper span { display: inline-block; } .numInputWrapper input { width: 100%; } .numInputWrapper input::-ms-clear { display: none; } .numInputWrapper span { position: absolute; right: 0; width: 14px; padding: 0 4px 0 2px; height: 50%; line-height: 50%; opacity: 0; cursor: pointer; border: 1px solid rgba(72, 72, 72, 0.15); -webkit-box-sizing: border-box; box-sizing: border-box; } .numInputWrapper span:hover { background: rgba(0, 0, 0, 0.1); } .numInputWrapper span:active { background: rgba(0, 0, 0, 0.2); } .numInputWrapper span:after { display: block; content: ""; position: absolute; } .numInputWrapper span.arrowUp { top: 0; border-bottom: 0; } .numInputWrapper span.arrowUp:after { border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 4px solid rgba(72, 72, 72, 0.6); top: 26%; } .numInputWrapper span.arrowDown { top: 50%; } .numInputWrapper span.arrowDown:after { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid rgba(72, 72, 72, 0.6); top: 40%; } .numInputWrapper span svg { width: inherit; height: auto; } .numInputWrapper span svg path { fill: rgba(90, 97, 113, 0.5); } .numInputWrapper:hover { background: rgba(0, 0, 0, 0.05); } .numInputWrapper:hover span { opacity: 1; } .flatpickr-current-month { font-size: 135%; line-height: inherit; font-weight: 300; color: inherit; position: absolute; width: 75%; left: 12.5%; padding: 6.16px 0 0 0; line-height: 1; height: 28px; display: inline-block; text-align: center; -webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); } .flatpickr-current-month span.cur-month { font-family: inherit; font-weight: 700; color: inherit; display: inline-block; margin-left: 0.5ch; padding: 0; } .flatpickr-current-month span.cur-month:hover { background: rgba(0, 0, 0, 0.05); } .flatpickr-current-month .numInputWrapper { width: 6ch; width: 7ch\0; display: inline-block; } .flatpickr-current-month .numInputWrapper span.arrowUp:after { border-bottom-color: #5a6171; } .flatpickr-current-month .numInputWrapper span.arrowDown:after { border-top-color: #5a6171; } .flatpickr-current-month input.cur-year { background: transparent; -webkit-box-sizing: border-box; box-sizing: border-box; color: inherit; cursor: text; padding: 0 0 0 0.5ch; margin: 0; display: inline-block; font-size: inherit; font-family: inherit; font-weight: 300; line-height: inherit; height: auto; border: 0; border-radius: 0; vertical-align: initial; } .flatpickr-current-month input.cur-year:focus { outline: 0; } .flatpickr-current-month input.cur-year[disabled], .flatpickr-current-month input.cur-year[disabled]:hover { font-size: 100%; color: rgba(90, 97, 113, 0.5); background: transparent; pointer-events: none; } .flatpickr-weekdays { background: #eceef1; text-align: center; overflow: hidden; width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 28px; } .flatpickr-weekdays .flatpickr-weekdaycontainer { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } span.flatpickr-weekday { cursor: default; font-size: 90%; background: #eceef1; color: #5a6171; line-height: 1; margin: 0; text-align: center; display: block; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; font-weight: bolder; } .dayContainer, .flatpickr-weeks { padding: 1px 0 0 0; } .flatpickr-days { position: relative; overflow: hidden; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; width: 307.875px; border-left: 1px solid #eceef1; border-right: 1px solid #eceef1; } .flatpickr-days:focus { outline: 0; } .dayContainer { padding: 0; outline: 0; text-align: left; width: 307.875px; min-width: 307.875px; max-width: 307.875px; -webkit-box-sizing: border-box; box-sizing: border-box; display: inline-block; display: -ms-flexbox; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-wrap: wrap; -ms-flex-pack: justify; -webkit-justify-content: space-around; justify-content: space-around; -webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); opacity: 1; } .dayContainer + .dayContainer { -webkit-box-shadow: -1px 0 0 #eceef1; box-shadow: -1px 0 0 #eceef1; } .flatpickr-day { background: none; border: 1px solid transparent; border-radius: 150px; -webkit-box-sizing: border-box; box-sizing: border-box; color: #484848; cursor: pointer; font-weight: 400; width: 14.2857143%; -webkit-flex-basis: 14.2857143%; -ms-flex-preferred-size: 14.2857143%; flex-basis: 14.2857143%; max-width: 39px; height: 39px; line-height: 39px; margin: 0; display: inline-block; position: relative; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; text-align: center; } .flatpickr-day.inRange, .flatpickr-day.prevMonthDay.inRange, .flatpickr-day.nextMonthDay.inRange, .flatpickr-day.today.inRange, .flatpickr-day.prevMonthDay.today.inRange, .flatpickr-day.nextMonthDay.today.inRange, .flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover, .flatpickr-day:focus, .flatpickr-day.prevMonthDay:focus, .flatpickr-day.nextMonthDay:focus { cursor: pointer; outline: 0; background: #e2e2e2; border-color: #e2e2e2; } .flatpickr-day.today { border-color: #bbb; } .flatpickr-day.today:hover, .flatpickr-day.today:focus { border-color: #bbb; background: #bbb; color: #fff; } .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay { background: var(--color-accent); -webkit-box-shadow: none; box-shadow: none; color: #fff; border-color: var(--color-accent); } .flatpickr-day.selected.startRange, .flatpickr-day.startRange.startRange, .flatpickr-day.endRange.startRange { border-radius: 50px 0 0 50px; } .flatpickr-day.selected.endRange, .flatpickr-day.startRange.endRange, .flatpickr-day.endRange.endRange { border-radius: 0 50px 50px 0; } .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) { -webkit-box-shadow: -10px 0 0 var(--color-accent); box-shadow: -10px 0 0 var(--color-accent); } .flatpickr-day.selected.startRange.endRange, .flatpickr-day.startRange.startRange.endRange, .flatpickr-day.endRange.startRange.endRange { border-radius: 50px; } .flatpickr-day.inRange { border-radius: 0; -webkit-box-shadow: -5px 0 0 #e2e2e2, 5px 0 0 #e2e2e2; box-shadow: -5px 0 0 #e2e2e2, 5px 0 0 #e2e2e2; } .flatpickr-day.disabled, .flatpickr-day.disabled:hover, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.notAllowed, .flatpickr-day.notAllowed.prevMonthDay, .flatpickr-day.notAllowed.nextMonthDay { color: rgba(72, 72, 72, 0.3); background: transparent; border-color: transparent; cursor: default; } .flatpickr-day.disabled, .flatpickr-day.disabled:hover { cursor: not-allowed; color: rgba(72, 72, 72, 0.1); } .flatpickr-day.week.selected { border-radius: 0; -webkit-box-shadow: -5px 0 0 var(--color-accent), 5px 0 0 var(--color-accent); box-shadow: -5px 0 0 var(--color-accent), 5px 0 0 var(--color-accent); } .flatpickr-day.hidden { visibility: hidden; } .rangeMode .flatpickr-day { margin-top: 1px; } .flatpickr-weekwrapper { display: inline-block; } .flatpickr-weekwrapper .flatpickr-weeks { padding: 0 12px; border-left: 1px solid #eceef1; } .flatpickr-weekwrapper .flatpickr-weekday { float: none; width: 100%; line-height: 28px; } .flatpickr-weekwrapper span.flatpickr-day, .flatpickr-weekwrapper span.flatpickr-day:hover { display: block; width: 100%; max-width: none; color: rgba(72, 72, 72, 0.3); background: transparent; cursor: default; border: none; } .flatpickr-innerContainer { display: block; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; background: #fff; border-bottom: 1px solid #eceef1; } .flatpickr-rContainer { display: inline-block; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .flatpickr-time { text-align: center; outline: 0; display: block; height: 0; line-height: 40px; max-height: 40px; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; background: #fff; border-radius: 0 0 5px 5px; } .flatpickr-time:after { content: ""; display: table; clear: both; } .flatpickr-time .numInputWrapper { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; width: 40%; height: 40px; } .flatpickr-time .numInputWrapper span.arrowUp:after { border-bottom-color: #484848; } .flatpickr-time .numInputWrapper span.arrowDown:after { border-top-color: #484848; } .flatpickr-time.hasSeconds .numInputWrapper { width: 26%; } .flatpickr-time.time24hr .numInputWrapper { width: 49%; } .flatpickr-time input { background: transparent; -webkit-box-shadow: none; box-shadow: none; border: 0; border-radius: 0; text-align: center; margin: 0; padding: 0; height: inherit; line-height: inherit; color: #484848; font-size: 14px; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; } .flatpickr-time input.flatpickr-hour { font-weight: bold; } .flatpickr-time input.flatpickr-minute, .flatpickr-time input.flatpickr-second { font-weight: 400; } .flatpickr-time input:focus { outline: 0; border: 0; } .flatpickr-time .flatpickr-time-separator, .flatpickr-time .flatpickr-am-pm { height: inherit; display: inline-block; line-height: inherit; color: #484848; font-weight: bold; width: 2%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; } .flatpickr-time .flatpickr-am-pm { outline: 0; width: 18%; cursor: pointer; text-align: center; font-weight: 400; } .flatpickr-time input:hover, .flatpickr-time .flatpickr-am-pm:hover, .flatpickr-time input:focus, .flatpickr-time .flatpickr-am-pm:focus { background: #efefef; } .flatpickr-input[readonly] { cursor: pointer; } @-webkit-keyframes fpFadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fpFadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } span.flatpickr-day.selected { font-weight: bold; } html, body { margin: 0; padding: 0; min-height: 100%; } body { background: var(--color-sitebg); color: var(--color-text); display: block; min-height: 100vh; padding-top: 0.1px; } #pageload { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2000; background: var(--color-sitebg); } .mobile { display: none; } @media screen and (max-width: 800px) { .mobile { display: block; } } .desktop { display: block; } @media screen and (max-width: 800px) { .desktop { display: none; } } sup { vertical-align: super; font-size: 0.7em; line-height: 0; } a { text-decoration: underline; color: var(--color-text); } a:hover { text-decoration: underline; color: var(--color-accent); } #wrap { min-height: 100%; text-align: left; position: relative; width: 100%; } #page_wrap { position: relative; width: 100%; } div#page { position: relative; width: 100%; } /* ========================================= contents.less (cmart) - Media Helpers (absolute / cover) - Spacing Utilities (margin/padding Mods) - Centering Helpers - Background Helper + Dark Context - Text Blocks, Lists, Embeds ========================================= */ /* ========== MEDIA HELPERS ========== */ /* Vollflächiges Media (Video & Picture) in absolut positionierten Containern */ /* Als Klasse verwendbar, wenn du nur Background-Bilder nutzt */ .cm-bgimage, .bgimage { position: absolute; inset: 0; width: 100%; height: 100%; background-size: cover; background-position: center center; } /* Absolut gefülltes Bild/Video (Alternative) */ .cm-text-center, .textcentering { text-align: center; } /* ========== BACKGROUND HELPERS ========== */ .cm-bg--white { background: #fff; } .cm-bg--hellbeige { background: var(--color-lightgrey); } .cm-bg--black { background: var(--color-black); } .cm-bg--dark { background: var(--color-black); } .cm-bg--accent { background: var(--color-accent); } .cm-bg--transparent { background: transparent; } /* Dunkler Kontext – Typo auf hell setzen */ .cm-bg--dark h1, .cm-bg--accent h1, .cm-bg--black h1, .darkbg h1, .cm-bg--dark h2, .cm-bg--accent h2, .cm-bg--black h2, .darkbg h2, .cm-bg--dark h3, .cm-bg--accent h3, .cm-bg--black h3, .darkbg h3, .cm-bg--dark p, .cm-bg--accent p, .cm-bg--black p, .darkbg p, .cm-bg--dark ul li::before, .cm-bg--accent ul li::before, .cm-bg--black ul li::before, .darkbg ul li::before { color: #fff; } .lightboxopener { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; cursor: pointer; z-index: 30; } body.cmart.editing .lightboxopener { display: none; } /* ========== CONTENT LISTS & TEXT ========== */ li.content { position: relative; width: 100%; clear: left; } #content { /* Haupttextbereiche */ /* Abstand zwischen aufeinanderfolgenden Blöcken */ } #content ul.pageContents { position: relative; width: 100%; clear: left; } #content .cm-text-center, #content .textcentering { text-align: center; } #content .cm-text-center p, #content .textcentering p { text-align: center; } #content .cm-text, #content .textobj { /* Basis-Elemente */ /* Abstände zwischen Elementen */ /* Verhindere zusätzliche p-Margins in verschachtelten Strukturen */ /* Unordered Lists mit Icon Marker */ /* Bilder im Fließtext */ } #content .cm-text p, #content .textobj p, #content .cm-text li, #content .textobj li, #content .cm-text td, #content .textobj td { font-size: var(--fs-body); line-height: var(--fs-body-lh); color: var(--color-body, inherit); font-weight: var(--weight-regular); max-width: 65ch; } #content .cm-text li p, #content .textobj li p { font-size: 1em; } #content .cm-text p i, #content .textobj p i, #content .cm-text p em, #content .textobj p em { font-style: normal; } #content .cm-text p + ul, #content .textobj p + ul, #content .cm-text p + p, #content .textobj p + p, #content .cm-text ul + p, #content .textobj ul + p, #content .cm-text ul + h2, #content .textobj ul + h2, #content .cm-text ul + h3, #content .textobj ul + h3, #content .cm-text ul + h4, #content .textobj ul + h4, #content .cm-text p + h2, #content .textobj p + h2, #content .cm-text p + h3, #content .textobj p + h3 { margin-top: 1em; } #content .cm-text h2 + p, #content .textobj h2 + p, #content .cm-text h3 + p, #content .textobj h3 + p, #content .cm-text h4 + p, #content .textobj h4 + p, #content .cm-text h2 + ul, #content .textobj h2 + ul, #content .cm-text h3 + ul, #content .textobj h3 + ul, #content .cm-text h4 + ul, #content .textobj h4 + ul { margin-top: 3rem; } #content .cm-text h1 p, #content .textobj h1 p, #content .cm-text h2 p, #content .textobj h2 p, #content .cm-text h3 p, #content .textobj h3 p, #content .cm-text h4 p, #content .textobj h4 p, #content .cm-text p p, #content .textobj p p, #content .cm-text ul p, #content .textobj ul p { margin-bottom: 0; } #content .cm-text ul, #content .textobj ul { list-style: none; position: relative; width: 100%; margin-left: 0; } #content .cm-text ul li, #content .textobj ul li { position: relative; box-sizing: border-box; width: 100%; margin-bottom: 0; padding: 0.3em 0.5em 0.3em 1.4em; line-height: 1.4; } #content .cm-text ul li::before, #content .textobj ul li::before { content: "\e916"; /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'icomoon' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* bleibt projekt-spezifisch */ position: absolute; top: 0.8em; left: 0; width: 1.4em; height: 1.6em; font-size: 0.8em; color: var(--color-accent-light); } #content .cm-text img, #content .textobj img { position: relative; max-width: 100%; height: auto; } #content .textblock + .textblock { margin-top: 1.5em; } #content .cm-text + .cm-text, #content .textobj + .textobj { margin-top: 1.5em; } /* ========== RESPONSIVE EMBEDS ========== */ .cm-responsive-video { position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; overflow: hidden; } .cm-responsive-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; } /* ===== Aliases (falls alte Klassennamen noch im Markup sind) ===== */ /* Erlaubt sanften Umstieg ohne sofortiges Refactor aller Templates */ /* NEU (ohne Deprecation) */ .absoluteimage { position: absolute; inset: 0; width: 100%; height: 100%; /* nur direkte Medien-Kinder */ } .absoluteimage > img, .absoluteimage > picture, .absoluteimage > picture > img, .absoluteimage > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* echte Mixins → mit () aufrufen */ .absolutemedia { /* Container muss position:relative haben */ } .absolutemedia img, .absolutemedia video, .absolutemedia picture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .absolutemedia picture img { position: relative; } .absolutemedia > video { position: absolute; min-width: 100%; min-height: 100%; width: auto; height: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); } .absolutemedia > picture { position: absolute; inset: 0; /* top:0; right:0; bottom:0; left:0 */ width: 100%; height: 100%; /* source lässt sich nicht stylen – bewusst weggelassen */ } .absolutemedia > picture > img { width: 100%; height: 100%; object-fit: cover; }