@charset "UTF-8";
/* moved by compressor */
/*
Each variable should have the !default attribute if we are able to set them in
the TYPO3 Backend
*/
/*
Colors
The following combination of Communication Group and Communication Lines are
defined.
Styleguide 8.0
*/
/*
Lines
markup:
Styleguide 8.1
*/
/* breakpoints */
body {
overflow-x: hidden;
}
/* typo3 overridable fonts */
/* typo3 overridable colors */
/* typo3 module colors */
/*
$primary-color: rgb(51,49,78) !default;
$secondary-color: rgb(255,212,0) !default;
*/
/* neutral colors */
/* transparent colors */
/* lines */
/* placeholder */
/* background image */
/* spacings for text areas */
/* Generic */
/* z-index ranges */
/* VARIABLES */
/* ATOMS */
/* MOLECULES */
/* ORGANISMS */
/* TEMPLATES */
/*
@if $communication-group == 2 {
$highlight-color: $primary-color;
} @else {
$highlight-color: $secondary-color;
};
*/
/* Given a key, return its value corresponding to the current communication
* group and variation. If the key has no map entry for:
* - the current communication group: default to communication-group 0, variation 0
* - the current variation: if exists (communication-group, 0) -> (cg, 0) else (0,0)
*/
/* font-entry
* Utility function that given a list of fonts parameters returns the values as
* a map.
* @param family: font-family
* @param weight: font-weight
* @param size: font-size
* @param line-height: line-height
* @return a sass map with the format (font-family: $family, font-weight: $weight ...)
*/
/* font-entry-mulish
* Specialized utility function for Mulish fonts without Helvetica fallback chain.
* Creates font entry with only sans-serif as fallback.
* @param family: font-family (typically Mulish)
* @param weight: font-weight
* @param size: font-size
* @param line-height: line-height
* @return a sass map with the format (font-family: $family, font-weight: $weight ...)
*/
/* font-rules
* Utility function
* @param $rules: a rule map with format (font-family: XX, font-size: 16px...)
* @return: the rules as CSS block
*/
/* font
* Creates the font-* and line-height rules for a certain element. Data is
* taken from a map named font. If the map contains entries for different media
* queries, those are created as well. 'xs' is the default (i.e. no media query)
*
* @param $class: name of a font
* @return font rules
*/
/*
Spacings and Separators
Mixins and classes to add spaces and separate content.
Default (responsive) spacings. The padding is shown in green, the margin
in yellow.
Styleguide 6.1
*/
/*
Section vertical padding
Responsive top and bottom spacing.
Mixin (`@mixin section-padding`) and class (`section-padding`)
markup:
Styleguide 6.1.1
*/
/*
Section vertical padding asymmetric
Responsive top and bottom spacing.
Mixin (`@mixin section-padding-asymmetric`) and class (`section-padding-asymmetric`)
markup:
Styleguide 6.1.2
*/
/*
Section bottom padding
Responsive bottom padding.
Mixin (`@mixin spacing-responsive-base`) and class(`spacing-responsive-base`)
markup:
sg-wrapper:
The button tag should not be used as root element for .btncmp-round-label
because safari doesn't allow for flexbox in button:
https://stackoverflow.com/questions/35464067/flexbox-not-working-on-button-element-in-safari
Odio eu feugiat pretium nibh. Et netus et malesuada fames ac turpis
egestas sed tempus
Ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Tempor nec feugiat nisl pretium
fusce. Eu consequat ac felis donec.
Facilisi cras fermentum odio eu.
sg-wrapper:
Styleguide molecule.cookieDisclaimer
*/
.cookie-disclaimer {
background-color: rgba(50, 50, 50, 0.9);
border-top: 1px solid rgba(255, 255, 255, 0.25);
bottom: 0;
left: 0;
position: fixed;
transform: translate3d(0, 100%, 0);
transition: transform 0.666s ease-out;
width: 100%;
z-index: 602;
}
.cookie-disclaimer.is-displayed {
transform: translate3d(0, 0, 0);
}
.cookie-disclaimer__container {
margin-left: auto;
margin-right: auto;
width: 100%;
padding-left: 25px;
padding-right: 25px;
max-width: 1200px;
align-items: center;
display: flex;
flex-direction: column;
padding-bottom: 2.5rem;
padding-top: 2.5rem;
}
.cookie-disclaimer__container.flex {
display: flex;
}
.cookie-disclaimer__container.flex.justify-content-end {
justify-content: end;
}
.cookie-disclaimer__container.flex.justify-content-start {
justify-content: start;
}
.cookie-disclaimer__container.flex.justify-content-center {
justify-content: center;
}
.cookie-disclaimer__hint {
font-family: Open Sans, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 600;
font-size: 1rem;
line-height: 1.375rem;
color: rgba(255, 255, 255, 0.8);
max-width: 100%;
}
.cookie-disclaimer__hint *:last-child {
margin-bottom: 0;
}
.cookie-disclaimer .btn {
flex: none;
margin-top: 1.5rem;
}
.cookie-disclaimer__link {
color: #ffffff;
text-decoration: underline;
transition: 125ms color, 125ms opacity;
}
.cookie-disclaimer__link:hover {
color: #CD1316;
opacity: 0.8;
}
/*
Message box
A message box.
markup:
div(class="msg-message " + modifier)
.msg-message__row
.msg-message__icon
.icn--svg
sg-insert atom.icon.icon
.msg-message__text
p message
sg-pug-options:
{"icon": "info", "message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"}
msg-message--default - message
msg-message--error - error message
msg-message--info - info message
msg-message--success - success message
Styleguide molecule.messageBox
*/
.msg-message {
display: flex;
margin-bottom: 1.5rem;
padding: 1.5rem 1rem 1.25rem;
flex-direction: row;
position: relative;
width: 100%;
}
.msg-message__icon {
margin-right: 1.25rem;
max-height: 30px;
max-width: 30px;
min-height: 30px;
min-width: 30px;
position: relative;
top: -3px;
}
.msg-message__row {
display: flex;
flex-direction: row;
}
.msg-message [class$=__text] p {
margin-bottom: 0;
margin-top: 0;
}
.msg-message--info {
background-color: rgba(250, 222, 46, 0.1);
border: 1px solid #fade2e;
}
.msg-message--info [class$=__icon] {
color: #7e673e;
}
.msg-message--info [class$=__text] {
color: #7e673e;
}
.msg-message--info [class$=__text] h4, .msg-message--info [class$=__text] p {
color: #7e673e;
}
.msg-message--info [class$=__action] .btn {
border-color: #7e673e;
color: #7e673e;
}
.msg-message--error {
background-color: rgba(251, 30, 69, 0.1);
border: 1px solid #FB1E45;
}
.msg-message--error [class$=__icon] {
color: #FB1E45;
}
.msg-message--error [class$=__text] {
color: #FB1E45;
}
.msg-message--error [class$=__text] h4, .msg-message--error [class$=__text] p {
color: #FB1E45;
}
.msg-message--error [class$=__action] .btn {
border-color: #FB1E45;
color: #FB1E45;
}
.msg-message--success {
background-color: rgba(38, 154, 64, 0.1);
border: 1px solid #269A40;
}
.msg-message--success [class$=__icon] {
color: #269A40;
}
.msg-message--success [class$=__text] {
color: #269A40;
}
.msg-message--success [class$=__text] h4, .msg-message--success [class$=__text] p {
color: #269A40;
}
.msg-message--success [class$=__action] .btn {
border-color: #269A40;
color: #269A40;
}
.msg-message--default {
background-color: rgba(102, 102, 102, 0.1);
border: 1px solid #666666;
}
.msg-message--default [class$=__icon] {
color: #666666;
}
.msg-message--default [class$=__text] {
color: #666666;
}
.msg-message--default [class$=__text] h4, .msg-message--default [class$=__text] p {
color: #666666;
}
.msg-message--default [class$=__action] .btn {
border-color: #666666;
color: #666666;
}
.msg-message--no-borders {
border-color: transparent;
}
.msg-message__btn--close {
cursor: pointer;
position: absolute;
right: 1rem;
top: 1rem;
}
/*
Menu Sublist
markup:
ul(class="mnu-sublist mnu-list__sublist mnu-menu__sublist " + modifier)
each item in items
li.mnu-sublist__item
a(title=item href="#") item
sg-pug-options:
{
"items": ["Dachgarten / Skyline Garden","Dachgarten-Restaurant","Fitness und Wellness","Umgebung"]
}
Styleguide molecule.menu.sublist
*/
.mnu-sublist {
font-family: Open Sans, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 600;
font-size: 0.875rem;
line-height: 1.4;
list-style: none;
margin: 0;
padding: 0;
background-color: #efefef;
color: #333333;
}
.mnu-sublist__item > a {
color: inherit;
display: block;
padding: 0.5rem 1rem 0.5rem 2rem;
transition: color 0.25s ease, border-color 0.25s ease;
}
.mnu-sublist__item--active {
background-color: rgba(0, 0, 0, 0.2);
}
.mnu-sublist__item--accent {
text-transform: uppercase;
}
/**
List
Main menu. It is visualized as an orizontal list with flyout for sublists from
md, as a vertical list in mobile.
markup:
ul(class="mnu-list mnu-menu__list " + modifier)
each item in items
li.mnu-list__item.mnu-menu__item(data-module="mnu-item")
.mnu-list__label.mnu-menu__label
a(title=item.main) item [main]
if item.sub
button.mnu-list__btn-sublist(aria-label="label" type="button")
sg-insert.icn-icon atom.icon.arrow-down
if item.sub
sg-insert(parameters='{"items": ' + JSON.stringify(item.sub) + '}') molecule.menu.sublist
sg-pug-options:
{
"items": [
{"main": "Lifestyle", "sub": ["Test / Skyline Garden","Dachgarten-Restaurant","Fitness und Wellness","Umgebung"]},
{"main": "Shops"},
{"main": "Gastronomie"},
{"main": "Services", "sub": [ "Alle", "Arrival", "Information", "Relax", "Shopping", "Familie", "Barrierefrei"]},
{"main": "News und Events"},
{"main": "Angebote"},
{"main": "Das Center", "sub": [ "Öffnungszeiten", "Anfahrt/Parken", "Centerplan", "Jobs", "Nachhaltigkeit", "Kontakt", "B2B"]}
]}
Styleguide molecule.menu.list
*/
.mnu-list {
font-family: Open Sans, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 600;
font-size: 1rem;
line-height: normal;
list-style: none;
margin: 0;
padding: 0;
}
.mnu-list__btn-sublist {
background-color: hsla(0, 100%, 100%, 0.2);
color: #CD1316;
font-size: 1.25rem;
margin: 0.5rem 0;
min-width: 40px;
}
.mnu-list__btn-sublist svg {
transition: transform ease 0.4s;
}
.mnu-sublist-active .mnu-list__btn-sublist svg {
transform: perspective(500px) rotateZ(-180deg);
}
.mnu-list__item:not(:last-child) {
border-bottom: 1px solid;
border-color: rgba(0, 0, 0, 0.2);
}
.mnu-list__item:not(:last-child).mnu-sublist-active {
border-bottom: 0;
}
.mnu-list__label {
display: flex;
position: relative;
}
.mnu-list__label > a {
color: #ffffff;
flex: 1 0 auto;
padding: 0.75rem 0;
transition: color 0.25s ease, border-color 0.25s ease;
white-space: nowrap;
}
.mnu-list__label--active > a {
color: #CD1316;
}
.mnu-list__label:only-child .mnu-list__btn-sublist {
display: none;
}
.mnu-list__sublist {
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 0.25s;
}
.mnu-sublist-active .mnu-list__sublist {
max-height: 400px;
opacity: 1;
overflow: initial;
}
/*
Info List
The list with the infolinks (opening hours, directions, etc...)
markup:
ul.mnu-infolist.hidden-md-down
each item in items
li.mnu-infolist__item
sg-insert(parameters=JSON.stringify(item)) atom.button.transparent
if lang
sg-insert molecule.menu.languageSelector
sg-pug-options:
{
"lang": 1,
"items": [
{"label": "Öffnungszeiten", "icon": "time"},
{"label": "Anfahrt/Parken", "icon": "location"},
{"label": "Lageplan", "icon": "time"},
{"label": "Kontakt", "icon": "call"}
]
}
Styleguide molecule.menu.infolist
*/
/*
Info List with login
Deprecated:
Infolist changed for logged-in user. Differences only in markup.
markup: {}
Styleguide 2.2.3.2
*/
.mnu-infolist {
font-family: Open Sans, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 600;
font-size: 0.875rem;
line-height: 1.4;
list-style: none;
margin: 0;
padding: 0;
color: #ffffff;
}
.mnu-infolist__item {
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
padding: 0.625rem 0;
}
.mnu-infolist__item:last-of-type {
border-bottom: 0;
}
html:not(.can-touch) .mnu-infolist__item .btn:hover {
color: #CD1316;
}
.mnu-infolist__item .btn__icon {
color: #CD1316;
}
.mnu-infolist__item a:focus-visible {
outline: 2px solid #CD1316;
}
.mnu-infolist__icon-search {
display: none;
font-size: 2rem;
}
.mnu-infolist__search {
display: none;
position: relative;
}
.mnu-infolist__search .inp-dropdown {
bottom: 0;
position: absolute;
right: 0;
transform: translateY(100%) translateY(0.25rem);
width: 320px;
}
/*
Top list
List at the top of the header (desktop viewport). It wraps together infolist
and the search input field.
//TODO Change in live
//TODO Move mnu-infolist__search to mnu-top__search and mnu-infolist__icon-search
markup:
.mnu-top
sg-insert molecule.menu.infolist
button.mnu-infolist__icon-search(data-module="search")
sg-insert.icn-icon.icn-icon--hover2 atom.icon.search
sg-insert molecule.menu.search
sg-pug-options:
{}
Styleguide molecule.menu.topList
*/
.mnu-top .mnu-infolist__icon-search:focus-visible {
outline: 2px solid #CD1316;
}
/*
Menu Language Selector
Language Selector for 2 languages on desktop view. If there are more than two
languages, a dropdown selector is used instead (see `atom.input.dropdown`).
markup:
ul.mnu-lang.mnu-menu__lang.hdr-header__lang
li.mnu-lang__item.mnu-lang__item--active DE
li.mnu-lang__item: a(href="#") EN
sg-pug-options:
{}
Styleguide molecule.menu.languageSelector
*/
.mnu-lang {
font-family: Open Sans, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 600;
font-size: 0.875rem;
line-height: 1.4;
list-style: none;
margin: 0;
padding: 0;
color: #ffffff;
}
.mnu-lang__item {
display: table-cell;
padding: 0 1rem;
}
.mnu-lang__item > a {
color: inherit;
transition: color 0.25s ease;
}
html:not(.can-touch) .mnu-lang__item > a:hover, html:not(.can-touch) .mnu-lang__item > a:focus-visible {
color: #CD1316;
}
.mnu-lang__item > a:focus-visible {
outline: 2px solid #CD1316;
}
.mnu-lang__item--active {
color: rgba(255, 255, 255, 0.6);
}
.mnu-lang__item:not(:last-child) {
border-right: 2px solid #ffffff;
}
.mnu-lang .inp-dropdown__trigger:focus-visible {
outline: 2px solid #CD1316;
}
.mnu-lang .inp-dropdown__list {
padding-bottom: 0;
}
/*
Search Input Field
markup:
form.mnu-search.mnu-infolist__search
input.mnu-search__input.js-search-input(placeholder="Shops, Services, News, Events ..." type="text")
sg-insert.icn-icon.mnu-search__button atom.icon.search
sg-pug-options:
{}
Styleguide molecule.menu.search
*/
.mnu-search {
font-family: Open Sans, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 0.875rem;
background-color: #ffffff;
border-radius: 3px;
color: #666666;
height: 2rem;
padding: 0 0.5rem;
}
.mnu-search__input {
font-family: inherit;
font-size: inherit;
height: 100%;
width: 220px;
}
.mnu-search__input::-moz-placeholder {
color: hsl(0, 0%, 25%);
font-style: italic;
}
.mnu-search__input::placeholder {
color: hsl(0, 0%, 25%);
font-style: italic;
}
.mnu-search__input::-moz-placeholder {
color: hsl(0, 0%, 25%);
font-style: italic;
opacity: 1;
}
.mnu-search__input:-moz-placeholder {
color: hsl(0, 0%, 25%);
font-style: italic;
}
.mnu-search__input:placeholder-shown {
color: hsl(0, 0%, 25%);
font-style: italic;
}
.mnu-search__input:-ms-input-placeholder {
color: hsl(0, 0%, 25%);
font-style: italic;
}
.mnu-search__input:focus {
outline: none;
}
.mnu-search__dropdown {
z-index: 50;
}
.mnu-search__button {
font-size: 1.5em;
vertical-align: middle;
}
/*
Infolist mobile
markup:
.mnu-infolist-xs.hidden-md-up
each item in items
sg-insert.btc-round-label--small.mnu-infolist-xs__item(modifier="4") 2.6.4
sg-pug-options:
{
"items": [1,1,1,1]
}
Styleguide molecule.menu.infolistMobile
*/
.mnu-infolist-xs {
border-color: rgba(0, 0, 0, 0.2);
border-style: solid;
border-width: 1px 0;
display: flex;
margin: auto;
padding: 1rem 0;
}
.mnu-infolist-xs__item {
flex-grow: 1;
max-width: 90px;
padding: 2px;
}
/*
Menu
The main navigation included in the header. On small viewports (`sm`) it is
displayed vertically with sublist points hidden in accordion. On larger
viewports it is displayed horizontally and the sublist points are displayed on
`hover` on the corresponding menu points.
It is composed of:
- **Infolist: ** Links to important information
- **Language menu: ** Horizontal list for two languages, dropdown if more
- **Search input **
- **Main Menu** Two level site navigation
markup:
nav.mnu-menu
h2.mnu-menu__title Alstertal Einkaufszentrum Hamburg
sg-insert molecule.menu.infolistMobile
sg-insert molecule.menu.list
sg-insert molecule.menu.topList
sg-pug-options:
{}
sg-wrapper:
Styleguide molecule.menu
*/
.mnu-menu {
background-color: #323232;
color: #ffffff;
height: 100%;
padding: 1rem 1rem 3rem;
transition: transform ease 0.4s;
width: 320px;
}
.mnu-menu__lang {
margin-left: -1rem;
}
.mnu-menu__list {
flex: 1 1 100%;
margin-bottom: 40px;
}
.mnu-menu__sublist {
box-sizing: content-box;
margin-left: -1rem;
margin-right: -1rem;
}
.mnu-menu__title {
font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 500;
font-size: 1.25rem;
line-height: 1.2;
margin-top: 0;
max-width: 60%;
}
.mnu-menu__top {
justify-content: center;
}
.mnu-top.mnu-top--llandscape .mnu-infolist__item {
margin: 0 0.45rem;
}
/*
Bookmark List
A list of bookmarked items, used as `flyout` preview for the corresponding page.
Uses the `horizontal` teaser small (see 2.1.32).
Placeat non voluptatem dolor quasi amet ut eveniet. Provident est ut consequatur est reiciendis fuga eius quis. Asperiores nam et voluptatum unde. Nihil tempore illum quia quae nihil nobis optio. Excepturi reiciendis eos ex. Quia enim quam aspernatur. Explicabo tempora voluptas minima ut ex. Impedit eos laboriosam consectetur omnis quaerat voluptates eos. Dolorum consequuntur ut voluptate omnis atque aut. Qui accusamus quisquam nobis animi quos inventore fuga. Commodi molestiae minus facilis. Aut autem est assumenda blanditiis totam totam vero. Reiciendis libero ex illum sed nulla. At et veniam dolor et qui consequatur et ipsam. Dolorem exercitationem consequatur in rem ex. Qui velit eligendi expedita rerum praesentium amet et sint
Placeat non voluptatem dolor quasi amet ut eveniet. Provident est ut consequatur est reiciendis fuga eius quis. Asperiores nam et voluptatum unde. Nihil tempore illum quia quae nihil nobis optio. Excepturi reiciendis eos ex. Quia enim quam aspernatur. Explicabo tempora voluptas minima ut ex. Impedit eos laboriosam consectetur omnis quaerat voluptates eos. Dolorum consequuntur ut voluptate omnis atque aut. Qui accusamus quisquam nobis animi quos inventore fuga. Commodi molestiae minus facilis. Aut autem est assumenda blanditiis totam totam vero. Reiciendis libero ex illum sed nulla. At et veniam dolor et qui consequatur et ipsam. Dolorem exercitationem consequatur in rem ex. Qui velit eligendi expedita rerum praesentium amet et sint
Styleguide 3.14
*/
.content-tabs .fltr-container-list {
display: block;
z-index: 2;
}
.content-tabs .fltr-container-list:before {
background-color: #bdbdbd;
bottom: 0;
content: "";
display: block;
height: 1px;
position: absolute;
width: 100%;
}
.content-tabs__content {
padding-top: 1.5rem;
display: none;
z-index: 1;
}
.content-tabs__content--active {
display: block;
}
/*
Teaser Group
A section with multiple teasers grouped together. There are several variants:
- Teaser Group Combi: displays three teasers (or a mix of 2-cols/1-cols teaser)
- Teaser Group Category: displays teasers with an owl carousel
- Teaser Group Shops: display a grid of (shop) teasers
- Teaser Group: (shops) banderole
- Teaser Group Services
Each variant is composed of an Headline, a lead, a main area (where teasers are
displayed) and a button bar (CTA).
There are different theme modifiers:
- white background (default)
- `tsr-grp-theme--dark`: dark (primary color) background.
- `tsr-grp-theme--gray`: gray background.
- *background image*: add an `` or `` element with class `tsr-grp__bg-image`.
Styleguide organism.teaserGroup
*/
/*
Teaser Group Combi
Combine :
- 3 single column teasers
- 1 two column teaser and 1 single column teaser
- 1 three colum teaser.
Possible modifiers:
- white background color (default)
- `tsr-grp-theme--dark` primary background color
- `tsr-grp-theme--gray` light gray background color
markup:
Styleguide 3.15.1.1
*/
/*
Teaser Group Shops
markup:
1.7.2
In publishing and graphic design, lorem ipsum is a filler text or greeking
commonly used to demonstrate the textual elements of a graphic document or
visual presentation. Replacing meaningful content with placeholder text
allows designers to design the form of the content before the content itself
has been produced.
2.1.12-2
2.1.12-2
2.1.12-2
2.1.12-2
2.1.12-2
2.1.12-2
2.1.12-2
2.1.12-2
2.6.1-1
sg-wrapper:
Styleguide 3.15.2
*/
/*
Teaser Group Category
Groups teasers from a single category.
If the teasers don't fit in viewport, a slider is displayed.
An Advertisement Teaser can be displayed among the others.
Optionally with a background image.
markup: {}
- white background
tsr-grp-theme--gray - grey background
tsr-grp-theme--dark - dark background
tsr-grp--content-width - carousel max width 768px
Styleguide 3.15.3
*/
/*
Teaser Group Services
markup:
1.7.2
Est veritatis fuga et corrupti tempore porro. Odit earum eum quidem. Nulla
et placeat corrupti saepe eos cumque dolores commodi. Qui occaecati rerum
qui qui ea.
2.6.42.6.42.6.42.6.42.6.4
2.6.1-1
sg-wrapper:
Styleguide 3.15.4
*/
/*
Shop Banderole
Teaser Group with a Shop banderole
markup:
Aktuelle News und Events
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo"
Styleguide 3.15.5
*/
/*
Product Teaser Group
markup:
section.tsr-grp.tsr-grp--wide(data-content-replace-url="providerece/Resources/Public/styleguideData/misc/prod-teaser.json")
sg-insert atom.heading.section
.tsr-grp__lead
| "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
| tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
| quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo"
.tsr-grp__teasers(data-module="productCarousel" data-module-options='{"loop": false, "dots": false}')
.tsr-grp__teaser
sg-insert molecule.teaser.solid.product
.tsr-grp__teaser
sg-insert molecule.teaser.solid.product
.tsr-grp__teaser
sg-insert molecule.teaser.solid.product
.tsr-grp__teaser
sg-insert molecule.teaser.solid.product
.tsr-grp__teaser
sg-insert molecule.teaser.solid.product
.tsr-grp__teaser
sg-insert molecule.teaser.solid.product
.tsr-grp__teaser
sg-insert molecule.teaser.solid.product
.tsr-grp__teaser
sg-insert molecule.teaser.solid.product
.tsr-grp__teaser
sg-insert molecule.teaser.solid.product
.tsr-grp__teaser
sg-insert molecule.teaser.solid.product
.tsr-grp__teaser
sg-insert molecule.teaser.solid.product
.tsr-grp__teaser
sg-insert molecule.teaser.solid.product
sg-insert molecule.buttonComp.bar
sg-pug-options:
{}
Styleguide organism.teaserGroup.product
*/
.tsr-grp {
padding-top: 1.5rem;
padding-bottom: 2.25rem;
background-color: #ffffff;
position: relative;
/*
Shop Banderole
At the moment is only included in the Teaser Group `Shop banderole`
It can be used as a carousel, see also the owl-theme--banderole class.
markup:
Im Abstract ist für jeden Geschmack etwas dabei. Für Groß und Klein, für Jung und Alt: Alle finden hier ihr Glück. Zum Beispiel mit einem schönen redaktionell gepflegten Bild
2.6.1-1
GASTRONOMIE 2
Im Abstract ist für jeden Geschmack etwas dabei. Lorem ipsum dolor sit amet.
Manchmal gibt es sogar noch einen Copytext mit geringerer Schriftgröße, der zusätzliche Informationen enthält. Da passen auch einige Zeichen hin, aber mal sehn wie das auf small devices so aussieht.
Excepturi occaecati illum non. Sit delectus earum enim ut fugiat omnis
architecto ex. Ea dolor qui debitis sint sed. Beatae doloremque sit
harum rerum aut harum molestiae earum. Facere libero perferendis quod
quidem perferendis. Fuga cumque aspernatur rerum in voluptates excepturi
Styleguide 3.1
*/
/*
Dark Site
A message to be displayed in case of emergency, if the center has to be
unexpectedly closed, etc.
It consist of an overlay entirely covering the viewport and a message displayed
in the middle.
markup:
Title
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod
bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra
justo commodo. Proin sodales pulvinar tempor.
Excepturi occaecati illum non. Sit delectus earum enim ut fugiat omnis
architecto ex. Ea dolor qui debitis sint sed. Beatae doloremque sit
harum rerum aut harum molestiae earum. Facere libero perferendis quod
quidem perferendis. Fuga cumque aspernatur rerum in voluptates excepturi
Styleguide 4.11
*/
/*
Newsletter Login with modal
markup:
Immer auf dem Laufenden bleiben
Excepturi occaecati illum non. Sit delectus earum enim ut fugiat omnis
architecto ex. Ea dolor qui debitis sint sed. Beatae doloremque sit
harum rerum aut harum molestiae earum. Facere libero perferendis quod
quidem perferendis. Fuga cumque aspernatur rerum in voluptates excepturi
