@import './pink.css'; .RV-Spacing__Outer--small { margin: 10px; } .RV-Spacing__Outer--medium { margin: 25px; } .RV-Spacing__Outer--large { margin: 35px; } .RV-Spacing__Inner--small { padding: 10px; gap: 10px; column-gap: 10px; } .RV-Spacing__Inner--medium { padding: 25px; gap: 25px; column-gap: 25px; } .RV-Spacing__Inner--large { padding: 35px; gap: 35px; column-gap: 35px; } .RV-BoxShadow { position: relative; float: left; background-color: #fff; } .RV-BoxShadow:before, .RV-BoxShadow:after { content: ""; position: absolute; z-index: -2; } .RV-BoxShadow--simple { box-shadow: 0 0 10px #6b5690; } .RV-BoxShadow--raised:after { box-shadow: 0 15px 10px -10px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.3), 0 0 40px rgba(0,0,0,0.1) inset; } .RV-BoxShadow--liftedCorners:before, .RV-BoxShadow--liftedCorners:after { bottom: 15px; left: 10px; width: 50%; height: 20%; max-width: 300px; box-shadow: 0 15px 10px rgba(0,0,0,0.7); transform: rotate(-3deg); } .RV-BoxShadow--liftedCorners:after { right: 10px; left: auto; transform: rotate(3deg); } .RV-Iconized { margin: 0; padding: 0; top: 0; bottom: 0; left: 0; right: 0; border: none; } .RV-Iconized__Container { position: relative; } .RV-Iconized__Container--small { top: -0.25em; } .RV-Iconized__Container--medium { top: -0.5em; } .RV-Iconized__Container--large { top: -1.03073em; } .RV-Iconized__Container--huge { top: -2.05em; } .RV-Iconized__Container--extraSmall .RV-Iconized__Icon { width: 1em; height: 1em; position: relative; top: 0.125em; } .RV-Iconized__Container--small .RV-Iconized__Icon { width: 1.5em; height: 1.5em; position: relative; top: 0.45em; } .RV-Iconized__Container--medium .RV-Iconized__Icon { width: 2em; height: 2em; position: relative; top: 0.625em; } .RV-Iconized__Container--large .RV-Iconized__Icon { width: 3em; height: 3em; position: relative; top: 1.15573em; } .RV-Iconized__Container--huge .RV-Iconized__Icon { width: 5em; height: 5em; position: relative; top: 2.175em; } .RV-Sizes--half { flex-grow: 0; flex-shrink: 0; flex-basis: 50%; width: 50%; } .RV-Sizes--third { flex-grow: 0; flex-shrink: 0; flex-basis: 33.333333333333336%; width: 33.333333333333336%; } .RV-Sizes--quarter { flex-grow: 0; flex-shrink: 0; flex-basis: 25%; width: 25%; } .RV-Alignment { display: grid; } .RV-Alignment--top { display: grid; align-content: start; } .RV-Alignment--bottom { display: grid; align-content: end; } .RV-Alignment--left { display: grid; justify-content: start; } .RV-Alignment--right { display: grid; justify-content: end; } .RV-Alignment--horizontalCenter { display: grid; justify-content: center; } .RV-Alignment--verticalCenter { display: grid; align-items: center; } .RV-Alignment--center { display: grid; justify-content: center; display: grid; align-items: center; } .RV-ContentCrop { display: block; overflow: hidden; } .RV-ContentCrop .RV-Image *, .RV-ContentCrop .RV-Image { width: 100%; height: 100%; object-fit: cover; display: block; } .RV-ContentCrop .RV-Text { overflow: hidden; display: block; text-overflow: ellipsis; line-height: 1.21; position: relative; background-color: #fff; max-height: 96.80000000000001%; padding: 0; margin: 0; } .RV-ContentCrop .RV-Text * { margin: 0; padding-bottom: 19.360000000000003px; } .RV-ContentCrop .RV-Text *:last-child { padding-bottom: unset; } .RV-ContentCrop--fade:after { background-image: linear-gradient(180deg, rgba(255,255,255,0), #fff); display: block; content: ' '; opacity: 0.8; position: relative; top: -25%; width: 100%; height: 25%; z-index: 10; } .RV-ContentCrop--ellipsis:after { position: relative; display: block; bottom: 1.2em; left: calc(100% - 3ch); content: '...'; font-size: 1.2em; min-width: 2em; background-color: #fff; padding: 0 2px; } .RV-ContentCrop--left .RV-Image * { object-position: left; } .RV-ContentCrop--center .RV-Image * { object-position: center; } .RV-ContentCrop--top .RV-Image * { object-position: top; } .RV-ContentCrop--bottom .RV-Image * { object-position: bottom; } .RV-ContentCrop--center .RV-Image * { object-position: center; } .RV-ContentCrop--square { width: 100%; padding-top: 100%; position: relative; } .RV-ContentCrop--square .RV-Image *, .RV-ContentCrop--square div { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .RV-ContentCrop--circle { width: 100%; padding-top: 100%; position: relative; border-radius: 50%; } .RV-ContentCrop--circle .RV-Image *, .RV-ContentCrop--circle div { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .RV-ContentCrop--1to2 { width: 100%; padding-top: 200%; position: relative; } .RV-ContentCrop--1to2 .RV-Image * { object-fit: cover; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .RV-ContentCrop--2to1 { width: 100%; padding-top: 50%; position: relative; } .RV-ContentCrop--2to1 .RV-Image * { object-fit: cover; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .RV-ContentCrop--4to3 { width: 100%; padding-top: 75%; position: relative; } .RV-ContentCrop--4to3 .RV-Image * { object-fit: cover; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .RV-ContentCrop--16to9 { width: 100%; padding-top: 56.25%; position: relative; } .RV-ContentCrop--16to9 .RV-Image * { object-fit: cover; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .RV-ContentCrop--3to2 { width: 100%; padding-top: 66.66666666666666%; position: relative; } .RV-ContentCrop--3to2 .RV-Image * { object-fit: cover; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .Fächer { --wurst: yeet; } .Fächer BLubb--Wurst { --wurst: 'wurst'; } .Fächer Fächer__BLubb { color: #000; --blubb: wasser; } .Fächer__Affter { --attach: 'blubb'; --hasi: 'lein'; } .Fächer--Mafter { --attach: 'blubb'; --blubb: 'bernd'; } .RV-FlexGrid__Container { display: grid; } .RV-FlexGrid__Item { display: grid; } .RV-FlexGrid__Item--top { display: grid; align-content: start; } .RV-FlexGrid__Item--bottom { display: grid; align-content: end; } .RV-FlexGrid__Item--left { display: grid; justify-content: start; } .RV-FlexGrid__Item--right { display: grid; justify-content: end; } .RV-FlexGrid__Item--horizontalCenter { display: grid; justify-content: center; } .RV-FlexGrid__Item--verticalCenter { display: grid; align-items: center; } .RV-FlexGrid__Item--center { display: grid; justify-content: center; display: grid; align-items: center; } .RV-FlexGrid__Container--autoWidth { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-template-rows: repeat(auto-fill, minmax(300px, 1fr)); grid-auto-rows: minmax(300px, 1fr); } .RV-FlexGrid__Container--fixedSize { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-template-rows: repeat(auto-fill, minmax(300px, 1fr)); grid-auto-rows: minmax(300px, 1fr); grid-template-columns: repeat(auto-fill, 300px); justify-content: space-between; } .RV-FlexGrid__Container--masonry { display: block; column-count: auto; column-width: 300px; } .RV-FlexRow__Container { display: flex; height: 100%; } .RV-FlexRow__Item { flex-basis: max-content; flex-grow: 3; flex-shrink: 3; } .RV-FlexRow__Container--breakPoint { flex-wrap: wrap; margin: 0; padding: 0; top: 0; bottom: 0; left: 0; right: 0; border: none; gap: 0px; } .RV-FlexRow__Container--breakPoint * { flex-basis: calc(500px * 999 - 100% * 999); } .RV-FlexRow__Container--horizontal { flex-direction: row; } .RV-FlexRow__Container--vertical { flex-direction: column; } .RV-FlexRow__Container--auto { flex-direction: row; flex-wrap: wrap; } .RV-FlexRow__Item { display: grid; } .RV-FlexRow__Item--top { display: grid; align-content: start; } .RV-FlexRow__Item--bottom { display: grid; align-content: end; } .RV-FlexRow__Item--left { display: grid; justify-content: start; } .RV-FlexRow__Item--right { display: grid; justify-content: end; } .RV-FlexRow__Item--horizontalCenter { display: grid; justify-content: center; } .RV-FlexRow__Item--verticalCenter { display: grid; align-items: center; } .RV-FlexRow__Item--center { display: grid; justify-content: center; display: grid; align-items: center; } .RV-FlexRow__Item--narrower { flex-grow: 1; flex-shrink: 5; } .RV-FlexRow__Item--narrow { flex-grow: 2; flex-shrink: 4; } .RV-FlexRow__Item--wide() { flex-grow: 4; flex-shrink: 2; } .RV-FlexRow__Item--wider { flex-grow: 5; flex-shrink: 1; } .RV-FlexRow__Item--fixedSize { flex-grow: 0; flex-shrink: 0; width: min-content; flex-basis: 100px; } .RV-FlexRow__Item--half { flex-grow: 0; flex-shrink: 0; flex-basis: 50%; width: 50%; } .RV-FlexRow__Item--third { flex-grow: 0; flex-shrink: 0; flex-basis: 33.333333333333336%; width: 33.333333333333336%; } .RV-FlexRow__Item--quarter { flex-grow: 0; flex-shrink: 0; flex-basis: 25%; width: 25%; } .RV-FlexRow__Item--content { flex-grow: 0; flex-shrink: 0; width: max-content; flex-basis: max-content; } .RV-FullWidthContent__Container { width: 100%; } .RV-FullWidthContent__Item { width: 100%; display: block; overflow: hidden; } .RV-FullWidthContent__Item .RV-Image *, .RV-FullWidthContent__Item .RV-Image { width: 100%; height: 100%; object-fit: cover; display: block; } .RV-FullWidthContent__Item .RV-Text { overflow: hidden; display: block; text-overflow: ellipsis; line-height: 1.21; position: relative; background-color: #fff; max-height: 96.80000000000001%; padding: 0; margin: 0; } .RV-FullWidthContent__Item .RV-Text * { margin: 0; padding-bottom: 19.360000000000003px; } .RV-FullWidthContent__Item .RV-Text *:last-child { padding-bottom: unset; } .RV-FullWidthContent__Item--fade:after { background-image: linear-gradient(180deg, rgba(255,255,255,0), #fff); display: block; content: ' '; opacity: 0.8; position: relative; top: -25%; width: 100%; height: 25%; z-index: 10; } .RV-FullWidthContent__Item--ellipsis:after { position: relative; display: block; bottom: 1.2em; left: calc(100% - 3ch); content: '...'; font-size: 1.2em; min-width: 2em; background-color: #fff; padding: 0 2px; } .RV-ElementList { display: flex; height: 100%; margin: 0; padding: 0; top: 0; bottom: 0; left: 0; right: 0; border: none; list-style-type: none; } .RV-ElementList--breakPoint { flex-wrap: wrap; margin: 0; padding: 0; top: 0; bottom: 0; left: 0; right: 0; border: none; gap: 0px; } .RV-ElementList--breakPoint * { flex-basis: calc(500px * 999 - 100% * 999); } .RV-ElementList--horizontal { flex-direction: row; } .RV-ElementList--vertical { flex-direction: column; } .RV-ElementList--auto { flex-direction: row; flex-wrap: wrap; } @include RV-FlexRow__Item; .RV-OverlayButton__Item { position: relative; } .RV-OverlayButton__Item:hover > * { opacity: 1; } .RV-OverlayButton__Button { text-align: center; display: inline-block; position: absolute; background-color: #f5f5dc; margin: 10px; opacity: 0.2; border-radius: 10px; text-decoration: none; display: grid; justify-content: center; display: grid; align-items: center; width: 50px; height: 50px; font-size: 25px; line-height: 25px; } .RV-OverlayButton__Button--circle { border-radius: 50%; } .RV-OverlayButton__Button--topRight { right: 0; top: 0; } .RV-OverlayButton__Button--small { width: 30px; height: 30px; font-size: 15px; line-height: 15px; } .RV-OverlayButton__Button--medium { width: 50px; height: 50px; font-size: 25px; line-height: 25px; } .RV-OverlayButton__Button--large { width: 70px; height: 70px; font-size: 35px; line-height: 35px; } .RV-OverlayButton__Row { display: grid; justify-content: center; display: grid; align-items: center; padding: 25px; gap: 25px; column-gap: 25px; display: flex; height: 100%; position: absolute; bottom: 0; height: 4em; opacity: 0.2; width: 100%; justify-content: center; background-color: rgba(255,255,255,0.5); padding-left: 0; padding-right: 0; } .RV-OverlayButton__Row * { position: initial; opacity: initial; margin: 0; padding: 0; } .RV-Menu--vertical .RV-Menu__List { flex-direction: column; width: 100%; } .RV-Menu--horizontal .RV-Menu__List { flex-direction: row; flex-wrap: wrap; margin: 0; padding: 0; top: 0; bottom: 0; left: 0; right: 0; border: none; gap: 0px; } .RV-Menu--horizontal .RV-Menu__List * { flex-basis: calc(400px * 999 - 100% * 999); } .RV-Menu__List { display: flex; height: 100%; display: flex; height: 100%; margin: 0; padding: 0; top: 0; bottom: 0; left: 0; right: 0; border: none; list-style-type: none; } .RV-Menu__List--breakPoint { flex-wrap: wrap; margin: 0; padding: 0; top: 0; bottom: 0; left: 0; right: 0; border: none; gap: 0px; } .RV-Menu__List--breakPoint * { flex-basis: calc(500px * 999 - 100% * 999); } .RV-Menu__List--horizontal { flex-direction: row; } .RV-Menu__List--vertical { flex-direction: column; } .RV-Menu__List--auto { flex-direction: row; flex-wrap: wrap; } @include RV-FlexRow__Item; .RV-Menu__Item { flex-basis: max-content; flex-grow: 3; flex-shrink: 3; display: grid; width: 100px; } .RV-Menu__Item--top { display: grid; align-content: start; } .RV-Menu__Item--bottom { display: grid; align-content: end; } .RV-Menu__Item--left { display: grid; justify-content: start; } .RV-Menu__Item--right { display: grid; justify-content: end; } .RV-Menu__Item--horizontalCenter { display: grid; justify-content: center; } .RV-Menu__Item--verticalCenter { display: grid; align-items: center; } .RV-Menu__Item--center { display: grid; justify-content: center; display: grid; align-items: center; } .RV-Menu__Item--narrower { flex-grow: 1; flex-shrink: 5; } .RV-Menu__Item--narrow { flex-grow: 2; flex-shrink: 4; } .RV-Menu__Item--wide() { flex-grow: 4; flex-shrink: 2; } .RV-Menu__Item--wider { flex-grow: 5; flex-shrink: 1; } .RV-Menu__Item--fixedSize { flex-grow: 0; flex-shrink: 0; width: min-content; flex-basis: 100px; } .RV-Menu__Item--half { flex-grow: 0; flex-shrink: 0; flex-basis: 50%; width: 50%; } .RV-Menu__Item--third { flex-grow: 0; flex-shrink: 0; flex-basis: 33.333333333333336%; width: 33.333333333333336%; } .RV-Menu__Item--quarter { flex-grow: 0; flex-shrink: 0; flex-basis: 25%; width: 25%; } .RV-Menu__Item--content { flex-grow: 0; flex-shrink: 0; width: max-content; flex-basis: max-content; } .RV-Menu__Item .RV-Link { padding: 10px; background-color: #f5f5dc; display: block; white-space: nowrap; } .RV-ImageGrid__Container { display: grid; } .RV-ImageGrid__Item { display: grid; } .RV-ImageGrid__Item--top { display: grid; align-content: start; } .RV-ImageGrid__Item--bottom { display: grid; align-content: end; } .RV-ImageGrid__Item--left { display: grid; justify-content: start; } .RV-ImageGrid__Item--right { display: grid; justify-content: end; } .RV-ImageGrid__Item--horizontalCenter { display: grid; justify-content: center; } .RV-ImageGrid__Item--verticalCenter { display: grid; align-items: center; } .RV-ImageGrid__Item--center { display: grid; justify-content: center; display: grid; align-items: center; } .RV-ImageGrid__Container { padding: 10px; gap: 10px; column-gap: 10px; display: block; column-count: auto; column-width: 300px; } .RV-ImageGrid__Item { display: block; overflow: hidden; position: relative; } .RV-ImageGrid__Item .RV-Image *, .RV-ImageGrid__Item .RV-Image { width: 100%; height: 100%; object-fit: cover; display: block; } .RV-ImageGrid__Item .RV-Text { overflow: hidden; display: block; text-overflow: ellipsis; line-height: 1.21; position: relative; background-color: #fff; max-height: 96.80000000000001%; padding: 0; margin: 0; } .RV-ImageGrid__Item .RV-Text * { margin: 0; padding-bottom: 19.360000000000003px; } .RV-ImageGrid__Item .RV-Text *:last-child { padding-bottom: unset; } .RV-ImageGrid__Item--fade:after { background-image: linear-gradient(180deg, rgba(255,255,255,0), #fff); display: block; content: ' '; opacity: 0.8; position: relative; top: -25%; width: 100%; height: 25%; z-index: 10; } .RV-ImageGrid__Item--ellipsis:after { position: relative; display: block; bottom: 1.2em; left: calc(100% - 3ch); content: '...'; font-size: 1.2em; min-width: 2em; background-color: #fff; padding: 0 2px; } .RV-ImageGrid__Item .RV-Image * { object-position: center; } .RV-ImageGrid__Item:hover > * { opacity: 1; } .RV-ImageGrid__Button { text-align: center; display: inline-block; position: absolute; background-color: #f5f5dc; margin: 10px; opacity: 0.2; border-radius: 10px; text-decoration: none; display: grid; justify-content: center; display: grid; align-items: center; width: 50px; height: 50px; font-size: 25px; line-height: 25px; right: 0; top: 0; width: 50px; height: 50px; font-size: 25px; line-height: 25px; } .RV-ImageGrid__Button--circle { border-radius: 50%; } .RV-ImageGrid__Button--topRight { right: 0; top: 0; } .RV-ImageGrid__Button--small { width: 30px; height: 30px; font-size: 15px; line-height: 15px; } .RV-ImageGrid__Button--medium { width: 50px; height: 50px; font-size: 25px; line-height: 25px; } .RV-ImageGrid__Button--large { width: 70px; height: 70px; font-size: 35px; line-height: 35px; } .RV-FlexGrid__Container--masonry.RV-Spacing__Inner--small * { margin-bottom: 10px; } .RV-FlexGrid__Container--masonry.RV-Spacing__Inner--small * * { margin-bottom: unset; } .RV-ImageGrid__Container.RV-Spacing__Inner--small * { margin-bottom: 10px; } .RV-ImageGrid__Container.RV-Spacing__Inner--small * * { margin-bottom: unset; } .RV-FlexGrid__Container--masonry.RV-Spacing__Inner--medium * { margin-bottom: 25px; } .RV-FlexGrid__Container--masonry.RV-Spacing__Inner--medium * * { margin-bottom: unset; } .RV-ImageGrid__Container.RV-Spacing__Inner--medium * { margin-bottom: 25px; } .RV-ImageGrid__Container.RV-Spacing__Inner--medium * * { margin-bottom: unset; } .RV-FlexGrid__Container--masonry.RV-Spacing__Inner--large * { margin-bottom: 35px; } .RV-FlexGrid__Container--masonry.RV-Spacing__Inner--large * * { margin-bottom: unset; } .RV-ImageGrid__Container.RV-Spacing__Inner--large * { margin-bottom: 35px; } .RV-ImageGrid__Container.RV-Spacing__Inner--large * * { margin-bottom: unset; } .RV-FlexGrid__Container--masonry.RV-OverlayButton__Row * { margin-bottom: 25px; } .RV-FlexGrid__Container--masonry.RV-OverlayButton__Row * * { margin-bottom: unset; } .RV-ImageGrid__Container.RV-OverlayButton__Row * { margin-bottom: 25px; } .RV-ImageGrid__Container.RV-OverlayButton__Row * * { margin-bottom: unset; } .RV-FlexGrid__Container--masonry.RV-ImageGrid__Container * { margin-bottom: 10px; } .RV-FlexGrid__Container--masonry.RV-ImageGrid__Container * * { margin-bottom: unset; } .RV-ImageGrid__Container.RV-ImageGrid__Container * { margin-bottom: 10px; } .RV-ImageGrid__Container.RV-ImageGrid__Container * * { margin-bottom: unset; }