Navigation Elements
Service-Menue Logged-In (in DLN)
CODE
×
HTML
<div class='dln user-account'><span>Max Mustermann</span> <i class="login-dropdown-dln"> <a class="menue-item-dd v1" href="#"><span>Mein Profil</span></a> <a class="menue-item-dd v2" href="#"><span>Mein Postfach (3)</span></a> <a class="menue-item-dd v3" href="#"><span>Abmelden</span></a> </i></div>
CSS
div.dln.user-account { position:relative; height: 20px; line-height: 1.3; margin: 0 calc(0.25vw + 15px) 0 calc(0.25vw + 15px); display:inline-block; border:none; font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 18px; letter-spacing: 0.01rem; word-spacing: 0.025rem; color: var(--black); } div.dln.user-account:before { background-image: url('../img/logout.svg'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; } div.dln.user-account { display: table; position: relative; margin-bottom: 0; margin-right: -25px; margin-left: -25px; width: calc(100% + 50px); padding: 15px 25px 18px 48px; margin-top: -15px; cursor: pointer; } div.dln.user-account::before { width: 21px; height: 19px; content: " "; position: absolute; left: 24px; background-size: 21px 19px; background-repeat: no-repeat; } div.dln.user-account > span { border-bottom: 2px solid rgba(234,22,31,1); } div.dln.user-account:hover > span, div.dln.user-account:focus > span { border-bottom: 2px solid #000; } div.dln.user-account.open { background-color: #FCF8F3; font-weight: 500; padding-bottom: 5px; } .login-dropdown-dln { background-color: #FCF8F3; display: none; } .login-dropdown-dln.open { background-color: #FCF8F3; display: block; width: 100%; margin: 0; padding-top: 15px; } .login-dropdown-dln.open > a { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 18px; letter-spacing: 0.01rem; word-spacing: 0.025rem; color: var(--black); width: 100%; min-width: auto; margin: 0; padding: 15px 0; height: fit-content; } .login-dropdown-dln.open > a::before { width: 9px; height: 15px; right: 16px; top: 16px; } .login-dropdown-dln.open > a:hover::before, .login-dropdown-dln.open > a:focus::before{ right: 8px; }
JS
Service-Menue Logged-In (in DLN)
Erstellt: 26.11.2024 - 15:39 Uhr
Letzte Änderung: 27.11.2024 - 12:11 Uhr
×
Max Mustermann
Mein Profil
Mein Postfach (3)
Abmelden
Menue-Item-1 in DropDown
CODE
×
HTML
<a class='menue-item-dd v1' href='#'><span>Mein Profil</span></a>
CSS
a.menue-item-dd.v1 { display:block; position:relative; color: var(--black); font-size: 21px; line-height: 25px; font-family: 'Roboto'; font-style: normal; font-weight: 300; letter-spacing: 0.01rem; word-spacing: 0.025rem; padding-top: 21px; padding-right: 60px; padding-bottom: 21px; padding-left: 25px; width: content-fit; min-width: 330px; height: 68px; } a.menue-item-dd.v1:before { content: ' '; position: absolute; width: 12px; height: 18px; right: 25px; top: 25px; background-size: 12px 18px; -webkit-transition: all 250ms ease-in-out; transition: all 250ms ease-in-out; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iYXJyb3ctcmlnaHQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCAxMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgOCAxMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KICAgIDxnIGlkPSJhcnJvdy1yaWdodF8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTY0LjkyOSkiPg0KICAgICAgICA8ZyBpZD0iYXJyb3ctcmlnaHRfXyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCA2NC45MjkpIj4NCiAgICAgICAgICAgIDxwYXRoIGlkPSJhcnJvdy1yaWdodF9fXyIgY2xhc3M9InN0MCIgZD0iTTAuOSwxLjNMNS43LDZsLTQuOCw0LjdsMC43LDAuN0w3LjEsNkwxLjYsMC42TDAuOSwxLjN6Ii8+DQogICAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4='); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; } a.menue-item-dd:hover > span, a.menue-item-dd:focus > span { border-bottom: 1px solid #000; } a.menue-item-dd:hover::before, a.menue-item-dd:focus::before { right: 17px; } a { color: var(--black); } a:hover, a:focus { color: var(--black); }
JS
Menue-Item-1 in DropDown
Erstellt: 26.11.2024 - 09:01 Uhr
Letzte Änderung: 26.11.2024 - 15:11 Uhr
×
Mein Profil
Language-Selector item
CODE
×
HTML
<a class='language'>Sprache</a>
CSS
a.language { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 18px; color: var(--black); display: inline-block; height: 20px; line-height: 1.3; letter-spacing: 0.025rem; margin: 0 7px 0 7px; text-decoration: none !important; } a.language:after { display: block; content: ''; border-bottom: 2px solid #000; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition: transform 100ms ease-in-out; transition: transform 100ms ease-in-out; } a.language:last-of-type { margin-right: 0; } a.language:hover::after, a.language:focus::after, a.language:active::after { transform: scaleX(1); } a.language.active { cursor: default; } a { color: var(--black); } a:hover, a:focus { color: var(--black); }
JS
Language-Selector item
Letzte Änderung: 26.11.2024 - 14:11 Uhr
×
Sprache
Language-Selector
CODE
×
HTML
<div class='language-selector' role='list'><a href="#" role='listitem' class="language active">DE</a> <span>|</span> <a href="#" role='listitem' class="language" href="">FR</a> <span>|</span> <a href="#" role='listitem' class="language" href="">EN</a></div>
CSS
div.language-selector { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 18px; color: var(--black); margin-left: calc(0.25vw + 8px); display:inline-block; } div.language-selector:after { display: block; content: ''; border-bottom: 2px solid #000; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition: transform 100ms ease-in-out; transition: transform 100ms ease-in-out; } a.language { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 16px; color: rgba(0,0,0,1); display: inline-block; height: 21px; line-height: 1.3; letter-spacing: 0.025rem; margin: 0 7px 0 7px; text-decoration: none !important; } @media screen and (max-width: 767px) { a.language { margin: 0 14px 0 14px; } .language-selector span { display: none; } } a.language:after { display: block; content: ''; border-bottom: 2px solid #000; transform: scaleX(0); transition: transform 100ms ease-in-out; } a.language:last-of-type { margin-right: 0; } a.language.active { border-bottom: 2px solid rgba(234,22,31,1); cursor: default !important; } a.language:hover::after, a.language:focus::after, a.language:active::after { transform: scaleX(1); } a.language.active:hover::after, a.language.active:focus::after, a.language.active:active::after { transform: scaleX(0); }
JS
Language-Selector
Letzte Änderung: 26.11.2024 - 14:06 Uhr
×
DE
|
FR
|
EN
Service-Menue Logged-In (with Badge)
CODE
×
HTML
<a class='service-menue user-account'>Max Mustermann</a>
CSS
a.service-menue.user-account { position:relative; } a.service-menue.user-account:before { background-image: url('../img/logout.svg'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; width: 21px; height: 19px; content: " "; position: absolute; left: -24px; top: -1px; background-size: 21px 19px; background-repeat: no-repeat; } a.service-menue.user-account { margin-left: calc(0.25vw + 34px); height: 20px; border-bottom: 2px solid rgba(234,22,31,0.77); } a.service-menue.user-account::after { border-color: transparent; } a.service-menue.user-account:hover, a.service-menue.user-account:focus { border-bottom: 2px solid #000; } a.service-menue { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 18px; letter-spacing: 0.01rem; word-spacing: 0.025rem; color: var(--black); display:inline-block; height: 20px; line-height: 1.3; margin: 0 calc(0.25vw + 15px) 0 calc(0.25vw + 15px); } a.service-menue:after { display: block; content: ''; border-bottom: 2px solid #000; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition: transform 100ms ease-in-out; transition: transform 100ms ease-in-out; } a.service-menue { text-decoration: none !important; } a { color: var(--black); } a:hover, a:focus { color: var(--black); }
JS
Service-Menue Logged-In (with Badge)
Letzte Änderung: 26.11.2024 - 13:50 Uhr
×
Max Mustermann
Menue-Item-3 in DropDown
CODE
×
HTML
<a class='menue-item-dd v3' href='#'><span>Abmelden</span></a>
CSS
a.menue-item-dd.v3 { display:block; position:relative; color: var(--black); font-size: 21px; line-height: 25px; font-family: 'Roboto'; font-style: normal; font-weight: 300; letter-spacing: 0.01rem; word-spacing: 0.025rem; padding-top: 21px; padding-right: 60px; padding-bottom: 21px; padding-left: 25px; width: content-fit; min-width: 330px; height: 68px; } a.menue-item-dd:hover > span, a.menue-item-dd:focus > span { border-bottom: 1px solid #000; } a { color: var(--black); } a:hover, a:focus { color: var(--black); }
JS
Menue-Item-3 in DropDown
Erstellt: 26.11.2024 - 09:58 Uhr
Letzte Änderung: 26.11.2024 - 10:02 Uhr
×
Abmelden
Menue-Item-2 in DropDown
CODE
×
HTML
<a class='menue-item-dd v2' href='#'><span>Mein Postfach (3)</span></a>
CSS
a.menue-item-dd.v2 { display:block; position:relative; color: var(--black); font-size: 21px; line-height: 25px; font-family: 'Roboto'; font-style: normal; font-weight: 300; letter-spacing: 0.01rem; word-spacing: 0.025rem; padding-top: 21px; padding-right: 60px; padding-bottom: 21px; padding-left: 25px; width: content-fit; min-width: 330px; height: 68px; } a.menue-item-dd.v2:before { content: ' '; position: absolute; width: 12px; height: 18px; right: 25px; top: 25px; background-size: 12px 18px; -webkit-transition: all 250ms ease-in-out; transition: all 250ms ease-in-out; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iYXJyb3ctcmlnaHQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCAxMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgOCAxMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KICAgIDxnIGlkPSJhcnJvdy1yaWdodF8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTY0LjkyOSkiPg0KICAgICAgICA8ZyBpZD0iYXJyb3ctcmlnaHRfXyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCA2NC45MjkpIj4NCiAgICAgICAgICAgIDxwYXRoIGlkPSJhcnJvdy1yaWdodF9fXyIgY2xhc3M9InN0MCIgZD0iTTAuOSwxLjNMNS43LDZsLTQuOCw0LjdsMC43LDAuN0w3LjEsNkwxLjYsMC42TDAuOSwxLjN6Ii8+DQogICAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4='); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; } a.menue-item-dd:hover > span, a.menue-item-dd:focus > span { border-bottom: 1px solid #000; } a { color: var(--black); } a:hover, a:focus { color: var(--black); }
JS
Menue-Item-2 in DropDown
Erstellt: 26.11.2024 - 09:58 Uhr
Letzte Änderung: 26.11.2024 - 09:58 Uhr
×
Mein Postfach (3)
Service-Menue BE-Login active
CODE
×
HTML
<a class='service-menue be-login active' href='#' role='listitem'>BE-Login</a>
CSS
a.service-menue.active { height: 20px; line-height: 1.3; border-bottom: 2px solid rgba(234,22,31,0.77); } a.service-menue.active::after { border-color: transparent; } a.service-menue { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 18px; letter-spacing: 0.01rem; word-spacing: 0.025rem; color: var(--black); display:inline-block; height: 20px; line-height: 1.3; margin: 0 calc(0.25vw + 15px) 0 calc(0.25vw + 15px); } a.service-menue:after { display: block; content: ''; border-bottom: 2px solid #000; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition: transform 100ms ease-in-out; transition: transform 100ms ease-in-out; } a.service-menue { text-decoration: none !important; } a { color: var(--black); } a:hover, a:focus { color: var(--black); }
JS
Service-Menue BE-Login active
barrierefrei
Erstellt: 12.09.2024 - 16:58 Uhr
Letzte Änderung: 12.09.2024 - 16:58 Uhr
×
BE-Login
Service-Menue Login active
CODE
×
HTML
<a class='service-menue login active' href='#' role='listitem'>Login</a>
CSS
a.service-menue.active { height: 20px; line-height: 1.3; border-bottom: 2px solid rgba(234,22,31,0.77); } a.service-menue.active::after { border-color: transparent; } a.service-menue { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 18px; letter-spacing: 0.01rem; word-spacing: 0.025rem; color: var(--black); display:inline-block; height: 20px; line-height: 1.3; margin: 0 calc(0.25vw + 15px) 0 calc(0.25vw + 15px); } a.service-menue:after { display: block; content: ''; border-bottom: 2px solid #000; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition: transform 100ms ease-in-out; transition: transform 100ms ease-in-out; } a.service-menue { text-decoration: none !important; } a { color: var(--black); } a:hover, a:focus { color: var(--black); }
JS
Service-Menue Login active
barrierefrei
Erstellt: 11.09.2024 - 10:55 Uhr
Letzte Änderung: 12.09.2024 - 16:56 Uhr
×
Login
Breadcrumb Link
CODE
×
HTML
<a class='bc-link' href='#' role='listitem'>Litora conubia</a>
CSS
a.bc-link { font-size: 14px; line-height: 18px; letter-spacing: 0.02rem; word-spacing: 0.05rem; float:left; display:inline-block; border-bottom: 1px solid rgba(255,255,255,1); margin-right: 12px; color: var(--black); } a.bc-link:hover, a.bc-link:focus { border-bottom: 1px solid rgba(0,0,0,1); } a.bc-link { text-decoration: none !important; } a { color: var(--black); } a:hover, a:focus { color: var(--black); }
JS
Breadcrumb Link
Letzte Änderung: 12.09.2024 - 12:52 Uhr
×
Litora conubia
Inpage-Navigation
CODE
×
HTML
<ul class='inpage-nav' data-accordion data-allow-all-closed='true'><li class="default inpage-nav-item is-active" data-accordion-item> <a href="#" class="inpage-nav-title">Inhaltsübersicht</a> <div class="inpage-nav-content" data-tab-content> <hr class="accordion"> <div class="inpage-nav"><a class="inpage-nav">Der Mut stellt sich die Wege kürzer vor</a></div> <div class="inpage-nav-active"><a class="inpage-nav-active">Dies ist eine Image Gallery</a></div> <div class="inpage-nav"><a class="inpage-nav">Text-Teaser 1- und 2-spaltig</a></div> <div class="inpage-nav"><a class="inpage-nav">Video-Integration</a></div> </div> </li></ul>
CSS
ul.inpage-nav { border: 1px solid rgba(222,222,222,1); background-color:transparent; margin-top: 0; margin-right: 0; margin-bottom: 30px; margin-left: 0; width: 100%; max-width: 400px; } @media screen and (max-width: 1119px) { ul.inpage-nav { display:none; } } ul.inpage-nav a.inpage-nav-title[aria-selected='true']::before { -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); transition: all 250ms ease-in-out } ul.inpage-nav a.inpage-nav-title[aria-selected='false']::before { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); transition: all 250ms ease-in-out }
JS
Inpage-Navigation
Letzte Änderung: 12.09.2024 - 11:06 Uhr
×
Inhaltsübersicht
Der Mut stellt sich die Wege kürzer vor
Dies ist eine Image Gallery
Text-Teaser 1- und 2-spaltig
Video-Integration
Service-Menue Logged-In
CODE
×
HTML
<a class='service-menue logged-in'>Max Mustermann</a>
CSS
a.service-menue.logged-in { position:relative; } a.service-menue.logged-in:before { background-image: url('../img/user.svg'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; width: 21px; height: 19px; content: " "; position: absolute; left: -24px; top: -1px; background-size: 21px 19px; background-repeat: no-repeat; } a.service-menue.logged-in { margin-left: calc(0.25vw + 34px); height: 20px; border-bottom: 2px solid rgba(234,22,31,0.77); } a.service-menue.logged-in::after { border-color: transparent; } a.service-menue { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 18px; letter-spacing: 0.01rem; word-spacing: 0.025rem; color: var(--black); display:inline-block; height: 20px; line-height: 1.3; margin: 0 calc(0.25vw + 15px) 0 calc(0.25vw + 15px); } a.service-menue:after { display: block; content: ''; border-bottom: 2px solid #000; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition: transform 100ms ease-in-out; transition: transform 100ms ease-in-out; } a.service-menue { text-decoration: none !important; } a { color: var(--black); } a:hover, a:focus { color: var(--black); }
JS
Service-Menue Logged-In
Erstellt: 12.09.2024 - 09:30 Uhr
Letzte Änderung: 12.09.2024 - 09:30 Uhr
×
Max Mustermann
Main-Menue-Item (active)
CODE
×
HTML
<a class='main-menue i1' href='#' role='listitem'>E-Services und Dienstleistungen</a>
CSS
a.main-menue.i1:after { display: block; content: ''; border: 1px solid #EA161F; border-radius: 3px; height: 2px; background-color: #EA161F; -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; } a { color: var(--black); } a:hover, a:focus { color: var(--black); } a.main-menue { font-size: 24px; line-height: 28px; color: var(--black); letter-spacing: 0.01rem; word-spacing: 0.025rem; display:inline-block; margin: 0 calc(1.1vw + 12px) 0 calc(1.1vw + 12px); height: 36px; line-height: 1.5; } a.main-menue:after { display: block; content: ''; border: 1px solid #000; border-radius: 3px; height: 2px; background-color: #000; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; } a.main-menue { text-decoration: none !important; }
JS
Main-Menue-Item (active)
Letzte Änderung: 11.09.2024 - 09:28 Uhr
×
E-Services und Dienstleistungen
Service-Menue-Item
CODE
×
HTML
<a class='service-menue' href='#' role='listitem'>Service-Menü</a>
CSS
a.service-menue { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 18px; letter-spacing: 0.01rem; word-spacing: 0.025rem; color: var(--black); display:inline-block; height: 20px; line-height: 1.3; margin: 0 calc(0.25vw + 15px) 0 calc(0.25vw + 15px); } a.service-menue:after { display: block; content: ''; border-bottom: 2px solid #000; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition: transform 100ms ease-in-out; transition: transform 100ms ease-in-out; } a.service-menue { text-decoration: none !important; } a { color: var(--black); } a:hover, a:focus { color: var(--black); }
JS
Service-Menue-Item
barrierefrei
Letzte Änderung: 11.09.2024 - 09:26 Uhr
×
Service-Menü
Service-Menue Login
CODE
×
HTML
<a class='service-menue login' href='#' role='listitem'>BE-Login</a>
CSS
a.service-menue { font-size: 14px; line-height: 16px; letter-spacing: 0.01rem; word-spacing: 0.025rem; font-family: 'Roboto'; font-style: normal; font-weight: 400; color: rgba(0,0,0,1); display:inline-block; text-decoration:none !important; height: 18px; line-height: 1.5; margin: 0 calc(0.25vw + 15px) 0 calc(0.25vw + 15px); } a.service-menue:after { display: block; content: ''; border-bottom: 2px solid #000; transform: scaleX(0); transition: transform 100ms ease-in-out; } a.service-menue:hover::after, a.service-menue:focus::after, a.service-menue:active::after { transform: scaleX(1); } a.service-menue { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 18px; letter-spacing: 0.01rem; word-spacing: 0.025rem; color: var(--black); display:inline-block; height: 20px; line-height: 1.3; margin: 0 calc(0.25vw + 15px) 0 calc(0.25vw + 15px); } a.service-menue:after { display: block; content: ''; border-bottom: 2px solid #000; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition: transform 100ms ease-in-out; transition: transform 100ms ease-in-out; } a.service-menue { text-decoration: none !important; } a { color: var(--black); } a:hover, a:focus { color: var(--black); }
JS
Service-Menue Login
barrierefrei
Letzte Änderung: 29.05.2024 - 14:04 Uhr
×
BE-Login
Main-Menue-Item (Theme)
CODE
×
HTML
<a class='main-menue-theme' href='#' role='listitem'>Wann und wo?</a>
CSS
a.main-menue-theme { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 26px; line-height: 100%; color: var(--black); text-decoration:none; display:inline-block; margin: 0 1vw 0 1vw; height: 24px; line-height: 1.5; } a.main-menue-theme:after { display: block; content: ''; border: 1px solid #000; border-radius: 3px; height: 2px; background-color: #000; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; } a.main-menue-theme { text-decoration: none !important; } a { color: var(--black); } a:hover, a:focus { color: var(--black); }
JS
Main-Menue-Item (Theme)
Letzte Änderung: 29.05.2024 - 13:58 Uhr
×
Wann und wo?
BC Home
CODE
×
HTML
<a class='bc-home' href='#' role='listitem'></a>
CSS
a.bc-home { background-image: url('../img/home-button.svg'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; float:left; margin-top: -3px; margin-right: 12px; width: 20px; height: 20px; } a.bc-home:hover, a.bc-home:focus { background-image: url('../img/home-button_.svg'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; } a { color: var(--black); } a:hover, a:focus { color: var(--black); }
JS
BC Home
Letzte Änderung: 05.12.2023 - 13:50 Uhr
×
Search-Icon in Main-Menue (active)
CODE
×
HTML
<a class='search-icon-mm active' href='#' role='listitem'></a>
CSS
a.search-icon-mm.active { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iRWJlbmVfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAzNjggMzY4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzNjggMzY4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBkPSJNMjk2LjcsMjcyLjRMMjM2LjMsMjEyYzI0LjgtMzQuOCwyMS42LTgzLjMtOS41LTExNC41Yy0zNC44LTM0LjgtOTEuMi0zNC44LTEyNS45LDBzLTM0LjgsOTEuMiwwLDEyNS45DQoJYzMxLjIsMzEuMiw3OS43LDM0LjMsMTE0LjUsOS41bDYwLjQsNjAuNGM1LjgsNS44LDE1LjIsNS44LDIxLDBDMzAyLjUsMjg3LjYsMzAyLjUsMjc4LjIsMjk2LjcsMjcyLjR6IE0xMjEuOCwyMDIuNA0KCWMtMjMuMi0yMy4yLTIzLjItNjAuOCwwLTg0czYwLjgtMjMuMiw4NCwwczIzLjIsNjAuOCwwLDg0UzE0NSwyMjUuNiwxMjEuOCwyMDIuNHoiLz4NCjwvc3ZnPg=='); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; background-position: center 22px; background-repeat: no-repeat; background-size: 40px 40px; width: 83px; height: 82px; margin-top: -10px; display:inline-block; vertical-align:middle; background-color: rgba(250,241,227,1); } a.search-icon-mm.active:hover, a.search-icon-mm.active:focus { -webkit-animation-name: none; animation-name: none; } @-webkit-keyframes hvr-pop { 50% { -webkit-transform: scale(1.25); transform: scale(1.25); } } @keyframes hvr-pop { 50% { -webkit-transform: scale(1.25); transform: scale(1.25); } } a { color: var(--black); } a:hover, a:focus { color: var(--black); } a.search-icon-mm { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iRWJlbmVfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAzNjggMzY4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzNjggMzY4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBkPSJNMjk2LjcsMjcyLjRMMjM2LjMsMjEyYzI0LjgtMzQuOCwyMS42LTgzLjMtOS41LTExNC41Yy0zNC44LTM0LjgtOTEuMi0zNC44LTEyNS45LDBzLTM0LjgsOTEuMiwwLDEyNS45DQoJYzMxLjIsMzEuMiw3OS43LDM0LjMsMTE0LjUsOS41bDYwLjQsNjAuNGM1LjgsNS44LDE1LjIsNS44LDIxLDBDMzAyLjUsMjg3LjYsMzAyLjUsMjc4LjIsMjk2LjcsMjcyLjR6IE0xMjEuOCwyMDIuNA0KCWMtMjMuMi0yMy4yLTIzLjItNjAuOCwwLTg0czYwLjgtMjMuMiw4NCwwczIzLjIsNjAuOCwwLDg0UzE0NSwyMjUuNiwxMjEuOCwyMDIuNHoiLz4NCjwvc3ZnPg=='); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; background-position: center 22px; background-repeat: no-repeat; background-size: 40px 40px; width: 83px; height: 82px; margin-top: -10px; display:inline-block; vertical-align:middle; } a.search-icon-mm:hover, a.search-icon-mm:focus { -webkit-animation-name: hvr-pop; animation-name: hvr-pop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } @-webkit-keyframes hvr-pop { 50% { -webkit-transform: scale(1.25); transform: scale(1.25); } } @keyframes hvr-pop { 50% { -webkit-transform: scale(1.25); transform: scale(1.25); } }
JS
Search-Icon in Main-Menue (active)
Letzte Änderung: 05.12.2023 - 13:49 Uhr
×
Search-Icon in Main-Menue
CODE
×
HTML
<a class='search-icon-mm' href='#' role='listitem'></a>
CSS
a.search-icon-mm { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iRWJlbmVfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAzNjggMzY4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzNjggMzY4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBkPSJNMjk2LjcsMjcyLjRMMjM2LjMsMjEyYzI0LjgtMzQuOCwyMS42LTgzLjMtOS41LTExNC41Yy0zNC44LTM0LjgtOTEuMi0zNC44LTEyNS45LDBzLTM0LjgsOTEuMiwwLDEyNS45DQoJYzMxLjIsMzEuMiw3OS43LDM0LjMsMTE0LjUsOS41bDYwLjQsNjAuNGM1LjgsNS44LDE1LjIsNS44LDIxLDBDMzAyLjUsMjg3LjYsMzAyLjUsMjc4LjIsMjk2LjcsMjcyLjR6IE0xMjEuOCwyMDIuNA0KCWMtMjMuMi0yMy4yLTIzLjItNjAuOCwwLTg0czYwLjgtMjMuMiw4NCwwczIzLjIsNjAuOCwwLDg0UzE0NSwyMjUuNiwxMjEuOCwyMDIuNHoiLz4NCjwvc3ZnPg=='); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; background-position: center 22px; background-repeat: no-repeat; background-size: 40px 40px; width: 83px; height: 82px; margin-top: -10px; display:inline-block; vertical-align:middle; } a.search-icon-mm:hover, a.search-icon-mm:focus { -webkit-animation-name: hvr-pop; animation-name: hvr-pop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } @-webkit-keyframes hvr-pop { 50% { -webkit-transform: scale(1.25); transform: scale(1.25); } } @keyframes hvr-pop { 50% { -webkit-transform: scale(1.25); transform: scale(1.25); } } a { color: var(--black); } a:hover, a:focus { color: var(--black); }
JS
Search-Icon in Main-Menue
Letzte Änderung: 05.12.2023 - 13:49 Uhr
×
Main-Menue-Item
CODE
×
HTML
<a class='main-menue' href='#' role='listitem'>Main-Menü</a>
CSS
a.main-menue { font-size: 24px; line-height: 28px; color: var(--black); letter-spacing: 0.01rem; word-spacing: 0.025rem; display:inline-block; margin: 0 calc(1.1vw + 12px) 0 calc(1.1vw + 12px); height: 36px; line-height: 1.5; } a.main-menue:after { display: block; content: ''; border: 1px solid #000; border-radius: 3px; height: 2px; background-color: #000; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; } a.main-menue { text-decoration: none !important; } a { color: var(--black); } a:hover, a:focus { color: var(--black); }
JS
Main-Menue-Item
Letzte Änderung: 05.12.2023 - 13:48 Uhr
×
Main-Menü
Inpage-Search Title (H4)
CODE
×
HTML
<button class='inpage-search-title' href='#' tabindex='0' aria-expanded='false' aria-controls='custom-search'>Erweiterte Suche</button>
CSS
button.inpage-search-title { position:relative; display:inline-block; text-decoration:none; font-family: 'Roboto'; font-style: normal; font-weight: 300; letter-spacing: 0.01rem; word-spacing: 0.025rem; font-size: 24px; line-height: 28px; color: var(--black); cursor: default; border-bottom: 1px solid rgba(255,255,255,1); padding-top: 16px; padding-right: 12px; padding-bottom: 0; padding-left: 0; } button.inpage-search-title:hover, button.inpage-search-title:focus { } @media screen and (max-width: 767px) { button.inpage-search-title { font-size: 21px; line-height: 25px; } }
JS
Inpage-Search Title (H4)
barrierefrei
Letzte Änderung: 15.11.2021 - 13:05 Uhr
×
Erweiterte Suche
Pagination Nummer
CODE
×
HTML
<p class='pagination-pb'>001</p>
CSS
p.pagination-pb { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 26px; line-height: 24px; letter-spacing: 0.02rem; word-spacing: 0.05rem; color: var(--black); display:inline-block; position:relative; margin-top: 1px; margin-right: 12px; margin-left: 12px; } p { color: var(--black); font-family: 'Roboto'; font-style: normal; font-weight: 300; margin-bottom: 15px; margin-top: -2px; max-width: 800px; font-size: 16px; line-height: 26px; } @media screen and (max-width: 767px) { p { font-size: 15px; line-height: 24px; } }
JS
Pagination Nummer
Erstellt: 14.07.2021 - 18:26 Uhr
Letzte Änderung: 14.07.2021 - 18:26 Uhr
×
001
Inpage-Navigation Title (H4)
CODE
×
HTML
<a class='inpage-nav-title'>Inhaltsübersicht</a>
CSS
a.inpage-nav-title { position:relative; display:block; text-decoration:none; border:none; font-family: 'Roboto'; font-style: normal; font-weight: 300; letter-spacing: 0.01rem; word-spacing: 0.025rem; font-size: 24px; line-height: 28px; padding-top: 25px; padding-bottom: 25px; padding-left: 25px; padding-right: 65px; max-width: 800px; color: var(--black); } a.inpage-nav-title:before { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTIgOCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBkPSJNMTAuNywwLjlMNiw1LjdMMS4zLDAuOUwwLjYsMS42TDYsNy4xbDUuNC01LjVMMTAuNywwLjl6Ii8+DQo8L3N2Zz4='); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; content: ' '; position: absolute; width: 24px; height: 16px; right: 28px; top: 29px; background-size: 24px 16px; -webkit-transition: all 250ms ease-in-out; transition: all 250ms ease-in-out; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform: rotate(-180deg) !important; -ms-transform: rotate(-180deg) !important; transform: rotate(-180deg) !important; } @media screen and (max-width: 767px) { a.inpage-nav-title { font-size: 18px; line-height: 21px; } } ul.inpage-nav a.inpage-nav-title[aria-selected='true']::before { -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); transition: all 250ms ease-in-out } ul.inpage-nav a.inpage-nav-title[aria-selected='false']::before { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); transition: all 250ms ease-in-out } a { color: var(--black); } a:hover, a:focus { color: var(--black); }
JS
Inpage-Navigation Title (H4)
Letzte Änderung: 03.07.2021 - 10:17 Uhr
×
Inhaltsübersicht
Search Input
CODE
×
HTML
<input value='' class='search' placeholder='Suche auf Website'>
CSS
input.search { color: var(--black); border:none; font-family: 'Roboto'; font-style: normal; font-weight: 300; font-size: 24px; line-height: 28px; letter-spacing: 0.01rem; word-spacing: 0.025rem; position:relative; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iRWJlbmVfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAzNjggMzY4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzNjggMzY4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBkPSJNMjk2LjcsMjcyLjRMMjM2LjMsMjEyYzI0LjgtMzQuOCwyMS42LTgzLjMtOS41LTExNC41Yy0zNC44LTM0LjgtOTEuMi0zNC44LTEyNS45LDBzLTM0LjgsOTEuMiwwLDEyNS45DQoJYzMxLjIsMzEuMiw3OS43LDM0LjMsMTE0LjUsOS41bDYwLjQsNjAuNGM1LjgsNS44LDE1LjIsNS44LDIxLDBDMzAyLjUsMjg3LjYsMzAyLjUsMjc4LjIsMjk2LjcsMjcyLjR6IE0xMjEuOCwyMDIuNA0KCWMtMjMuMi0yMy4yLTIzLjItNjAuOCwwLTg0czYwLjgtMjMuMiw4NCwwczIzLjIsNjAuOCwwLDg0UzE0NSwyMjUuNiwxMjEuOCwyMDIuNHoiLz4NCjwvc3ZnPg=='); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; background-position: 20px center; background-size: 39px 39px; background-color:transparent; margin-top: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; margin-right: 0 !important; padding-top: 5px; padding-right: 35px; padding-bottom: 5px; padding-left: 70px; width: 100%; max-width: none; height: 65px; } @media screen and (max-width: 767px) { input.search { font-size: 21px; line-height: 25px; background-position: calc(100% - 7px) center; background-size: 36px 36px; padding-right: 50px; padding-left: 12px; height: 42px; } }
JS
Search Input
Letzte Änderung: 23.06.2021 - 15:34 Uhr
×
Sliding Navigation
CODE
×
HTML
<div class='sliding-nav'><img src="img/go-back-deactive.svg" style="width:auto;height:22px;margin-right:15px"><img class="hover-enlarge" src="img/go-next.svg" style="width:auto;height:22px;"></div>
CSS
div.sliding-nav { white-space:nowrap; }
JS
Sliding Navigation
×
Language-Selector active item
CODE
×
HTML
<a class='language active'>Sprache</a>
CSS
a.language.active { border-bottom: 2px solid rgba(234,22,31,1); } a.language { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 16px; color: rgba(0,0,0,1); display: inline-block; height: 21px; line-height: 1.3; letter-spacing: 0.025rem; margin: 0 7px 0 7px; text-decoration: none !important; } a.language:after { display: block; content: ''; border-bottom: 2px solid #000; transform: scaleX(0); transition: transform 100ms ease-in-out; } a.language:last-of-type { margin-right: 0; } a.language.active:hover::after, a.language.active:focus::after, a.language.active:active::after { transform: scaleX(0); } a.language { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 18px; color: var(--black); display: inline-block; height: 20px; line-height: 1.3; letter-spacing: 0.025rem; margin: 0 7px 0 7px; text-decoration: none !important; } a.language:after { display: block; content: ''; border-bottom: 2px solid #000; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition: transform 100ms ease-in-out; transition: transform 100ms ease-in-out; } a.language:last-of-type { margin-right: 0; } a.language:hover::after, a.language:focus::after, a.language:active::after { transform: scaleX(1); } a.language.active { cursor: default; } a { color: var(--black); } a:hover, a:focus { color: var(--black); }
JS
Language-Selector active item
×
Sprache
Hamburger Icon
CODE
×
HTML
<a class='hamburger-icon'></a>
CSS
a.hamburger-icon { background-image: url('../img/hamburger-icon.svg'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; width: 32px; height: 32px; display:inline-block; float:right; } a.hamburger-icon:hover, a.hamburger-icon:focus { -webkit-animation-name: hvr-pop; animation-name: hvr-pop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } @-webkit-keyframes hvr-pop { 50% { -webkit-transform: scale(1.25); transform: scale(1.25); } } @keyframes hvr-pop { 50% { -webkit-transform: scale(1.25); transform: scale(1.25); } } a { color: var(--black); } a:hover, a:focus { color: var(--black); }
JS
Hamburger Icon
×
Search Icon mobile
CODE
×
HTML
<a class='search-icon-mobile'></a>
CSS
a.search-icon-mobile { background-image: url('../img/search-mobile.svg'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; display:inline-block; width: 32px; height: 32px; margin-right: 25%; float:right; } a.search-icon-mobile:hover, a.search-icon-mobile:focus { -webkit-animation-name: hvr-pop; animation-name: hvr-pop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } @-webkit-keyframes hvr-pop { 50% { -webkit-transform: scale(1.25); transform: scale(1.25); } } @keyframes hvr-pop { 50% { -webkit-transform: scale(1.25); transform: scale(1.25); } } a { color: var(--black); } a:hover, a:focus { color: var(--black); }
JS
Search Icon mobile
×
Main-Menue-Sub-Item
CODE
×
HTML
<a class='main-menue-sub'>Main-Menü Item</a>
CSS
a.main-menue-sub { color: var(--black); font-family: 'Roboto'; font-style: normal; font-weight: 300; font-size: 18px; line-height: 21px; letter-spacing: 0.01rem; word-spacing: 0.025rem; text-decoration:none; display:inline-block; max-width: calc(100% - 35px); width: auto; margin-top: 5px; white-space: normal; } a.main-menue-sub:after { display: block; content: ''; height: 2px; margin-top: 2px; background-color: #000; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); transition: all 100ms ease-in-out; } a { color: var(--black); } a:hover, a:focus { color: var(--black); }
JS
Main-Menue-Sub-Item
×
Main-Menü Item
Main-Menue-Sub-Page
CODE
×
HTML
<a class='main-menue-sub i0'>Main-Menü Page</a>
CSS
a { color: var(--black); } a:hover, a:focus { color: var(--black); } a.main-menue-sub { color: var(--black); font-family: 'Roboto'; font-style: normal; font-weight: 300; font-size: 18px; line-height: 21px; letter-spacing: 0.01rem; word-spacing: 0.025rem; text-decoration:none; display:inline-block; max-width: calc(100% - 35px); width: auto; margin-top: 5px; white-space: normal; } a.main-menue-sub:after { display: block; content: ''; height: 2px; margin-top: 2px; background-color: #000; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); transition: all 100ms ease-in-out; }
JS
Main-Menue-Sub-Page
×
Main-Menü Page
Footer-Menue-Item
CODE
×
HTML
<a class='footer-menue'>Footer-Menü</a>
CSS
a.footer-menue { font-size: 14px; line-height: 18px; letter-spacing: 0.01rem; word-spacing: 0.025rem; font-family: 'Roboto'; font-style: normal; font-weight: 400; color: var(--black); display:inline-block; text-decoration:none; height: 18px; line-height: 1.5; margin: 0 calc(0.5vw + 30px) 0 0; } a.footer-menue:after { display: block; content: ''; border-bottom: 2px solid #000; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition: transform 100ms ease-in-out; transition: transform 100ms ease-in-out; } a.footer-menue:hover::after, a.footer-menue:focus::after, a.footer-menue:active::after { transform: scaleX(1); } a { color: var(--black); } a:hover, a:focus { color: var(--black); }
JS
Footer-Menue-Item
×
Footer-Menü
Main-Menue-active (Campaign)
CODE
×
HTML
<span class='main-menue-campaign active'>Menü-Element aktiv</span>
CSS
span.main-menue-campaign.active { font-size: 18px; line-height: 21px; font-family: 'Roboto'; font-style: normal; font-weight: 400; letter-spacing: 0.01rem; word-spacing: 0.025rem; color: var(--black); text-decoration:none; display:inline-block; margin: 0 calc(1.1vw + 12px) 0 calc(1.1vw + 12px); height: 36px; line-height: 1.5; margin-top: 34px; } span.main-menue-campaign.active:after { display: block; content: ''; border: 1px solid #EA161F; border-radius: 3px; height: 2px; background-color: #EA161F; -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; }
JS
Main-Menue-active (Campaign)
×
Menü-Element aktiv
Search-Icon in MM (Campaign)
CODE
×
HTML
<a class='search-icon-mm-campaign'></a>
CSS
a.search-icon-mm-campaign { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iRWJlbmVfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAzNjggMzY4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzNjggMzY4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBkPSJNMjk2LjcsMjcyLjRMMjM2LjMsMjEyYzI0LjgtMzQuOCwyMS42LTgzLjMtOS41LTExNC41Yy0zNC44LTM0LjgtOTEuMi0zNC44LTEyNS45LDBzLTM0LjgsOTEuMiwwLDEyNS45DQoJYzMxLjIsMzEuMiw3OS43LDM0LjMsMTE0LjUsOS41bDYwLjQsNjAuNGM1LjgsNS44LDE1LjIsNS44LDIxLDBDMzAyLjUsMjg3LjYsMzAyLjUsMjc4LjIsMjk2LjcsMjcyLjR6IE0xMjEuOCwyMDIuNA0KCWMtMjMuMi0yMy4yLTIzLjItNjAuOCwwLTg0czYwLjgtMjMuMiw4NCwwczIzLjIsNjAuOCwwLDg0UzE0NSwyMjUuNiwxMjEuOCwyMDIuNHoiLz4NCjwvc3ZnPg=='); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; background-position: center; background-repeat: no-repeat; background-size: 32px 32px; width: 60px; height: 60px; margin-top: 18px; margin-right: 2.4vw; margin-left: 0.6vw; display:inline-block; vertical-align:middle; } a.search-icon-mm-campaign:hover, a.search-icon-mm-campaign:focus { -webkit-animation-name: hvr-pop; animation-name: hvr-pop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } @-webkit-keyframes hvr-pop { 50% { -webkit-transform: scale(1.25); transform: scale(1.25); } } @keyframes hvr-pop { 50% { -webkit-transform: scale(1.25); transform: scale(1.25); } } a { color: var(--black); } a:hover, a:focus { color: var(--black); }
JS
Search-Icon in MM (Campaign)
×
Tab (active)
CODE
×
HTML
<div class='tab active'>Alle (4)</div>
CSS
div.tab.active { background-color: rgba(78,78,78,1); color: var(--white); font-family: 'Roboto'; font-style: normal; font-weight: 500; font-size: 14px; line-height: 18px; text-align:center; display: inline-block; border-radius: 41px; border: none; padding: 11px 20px 12px 20px; vertical-align: middle; margin: 18px 5px; -webkit-transition: all 180ms ease-in-out; transition: all 180ms ease-in-out; cursor: pointer; overflow: hidden; margin-right: 15px; margin-left: 15px; } div.tab:first-of-type { margin-left: -1px; } div.tab { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-size: 14px; line-height: 18px; letter-spacing: 0.02rem; word-spacing: 0.05rem; text-align:center; display: inline-block; border-radius: 41px; border: none; padding: 11px 20px 12px 20px; vertical-align: middle; margin: 18px 5px; -webkit-transition: all 180ms ease-in-out; transition: all 180ms ease-in-out; cursor: pointer; overflow: hidden; cursor:pointer; color: var(--black); background-color: var(--white); } div.tab:hover, div.tab:focus { -webkit-transform: scale(1.07); -ms-transform: scale(1.07); transform: scale(1.07); }
JS
Tab (active)
×
Alle (4)
Tab
CODE
×
HTML
<div class='tab'>Tab <span class="grey">(27)</span></div>
CSS
div.tab { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-size: 14px; line-height: 18px; letter-spacing: 0.02rem; word-spacing: 0.05rem; text-align:center; display: inline-block; border-radius: 41px; border: none; padding: 11px 20px 12px 20px; vertical-align: middle; margin: 18px 5px; -webkit-transition: all 180ms ease-in-out; transition: all 180ms ease-in-out; cursor: pointer; overflow: hidden; cursor:pointer; color: var(--black); background-color: var(--white); } div.tab:hover, div.tab:focus { -webkit-transform: scale(1.07); -ms-transform: scale(1.07); transform: scale(1.07); } div.tab:first-of-type { margin-left: -1px; }
JS
Tab
×
Tab
(27)
Main-Menue-Item (Campaign)
CODE
×
HTML
<a class='main-menue-campaign'>Menü-Element 1</a>
CSS
a.main-menue-campaign { font-size: 18px; line-height: 21px; font-family: 'Roboto'; font-style: normal; font-weight: 300; letter-spacing: 0.01rem; word-spacing: 0.025rem; color: var(--black); text-decoration:none; display:inline-block; margin: 0 calc(1.1vw + 12px) 0 calc(1.1vw + 12px); height: 36px; line-height: 1.5; margin-top: 34px; } a.main-menue-campaign:after { display: block; content: ''; border: 1px solid #000; border-radius: 3px; height: 2px; background-color: #000; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; } a.main-menue-campaign:hover::after, a.main-menue-campaign:focus::after, a.main-menue-campaign:active::after { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } a { color: var(--black); } a:hover, a:focus { color: var(--black); }
JS
Main-Menue-Item (Campaign)
×
Menü-Element 1
Tab 2 (active)
CODE
×
HTML
<div class='tab-2 active'>Beliebteste</div>
CSS
div.tab-2.active { background-color: rgba(78,78,78,1); color: var(--white); font-family: 'Roboto'; font-style: normal; font-weight: 500; font-size: 14px; line-height: 18px; text-align:center; display: inline-block; border-radius: 41px; border: none; padding: 11px 20px 12px 20px; vertical-align: middle; margin: 18px 5px; -webkit-transition: all 180ms ease-in-out; transition: all 180ms ease-in-out; cursor: pointer; overflow: hidden; margin-right: 15px; margin-left: 15px; }
JS
Tab 2 (active)
×
Beliebteste
Inpage-Navigation Link
CODE
×
HTML
<a class='inpage-nav'>Häufige Fragen</a>
CSS
a.inpage-nav { font-size: 21px; line-height: 25px; font-family: 'Roboto'; font-style: normal; font-weight: 300; letter-spacing: 0.01rem; word-spacing: 0.025rem; display:inline-block; text-decoration:none; color: inherit; } a.inpage-nav:hover, a.inpage-nav:focus { text-decoration:none; color: inherit; } @media screen and (max-width: 767px) { a.inpage-nav { font-size: 18px; line-height: 21px; } } a { color: var(--black); } a:hover, a:focus { color: var(--black); }
JS
Inpage-Navigation Link
×
Häufige Fragen
Inpage-Navigation active Link
CODE
×
HTML
<a class='inpage-nav-active'>Häufige Fragen</a>
CSS
a.inpage-nav-active { font-size: 21px; line-height: 25px; font-family: 'Roboto'; font-style: normal; font-weight: 300; letter-spacing: 0.01rem; word-spacing: 0.025rem; display:inline-block; color: var(--red); text-decoration:none; } a.inpage-nav-active:hover, a.inpage-nav-active:focus { color: var(--red); } @media screen and (max-width: 767px) { a.inpage-nav-active { font-size: 18px; line-height: 21px; } } a { color: var(--black); } a:hover, a:focus { color: var(--black); }
JS
Inpage-Navigation active Link
×
Häufige Fragen
BC Arrow
CODE
×
HTML
<div class='bc-arrow'></div>
CSS
div.bc-arrow { background-image: url('../img/arrow-right_.svg'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; float:left; margin-top: 2px; margin-right: 10px; width: 15px; height: 12px; }
JS
BC Arrow
barrierefrei
×
Pagination Text
CODE
×
HTML
<p class='pagination'>von 17</p>
CSS
p.pagination { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 26px; line-height: 24px; letter-spacing: 0.02rem; word-spacing: 0.05rem; color: var(--black); display:inline-block; position:relative; margin-right: 10px; margin-left: 10px; } p { color: var(--black); font-family: 'Roboto'; font-style: normal; font-weight: 300; margin-bottom: 15px; margin-top: -2px; max-width: 800px; font-size: 16px; line-height: 26px; } @media screen and (max-width: 767px) { p { font-size: 15px; line-height: 24px; } }
JS
Pagination Text
barrierefrei
×
von 17
Small Button
CODE
×
HTML
<button class='small'>Alle Meldungen</button>
CSS
button.small { text-align:center; background-color: rgba(78,78,78,1); color: var(--white); font-family: 'Roboto'; font-style: normal; font-weight: 500; font-size: 14px; line-height: 18px; line-height: 125%; display: inline-block; height: 44px; border-radius: 44px; border: none; padding: 11px 38px; vertical-align: middle; margin: 15px 30px 15px 0; transition: all 250ms ease-in-out; cursor: pointer; } button.small:hover, button.small:focus { -webkit-transform: scale(1.07); -ms-transform: scale(1.07); transform: scale(1.07); }
JS
Small Button
This button style is not for form use, but for navigation use!
barrierefrei
×
Alle Meldungen
Input for Pagination
CODE
×
HTML
<input value='1' class='pagination'>
CSS
input.pagination { border: 1px solid rgba(112,112,112,1); white-space:nowrap; text-align:center; overflow:hidden; text-overflow:ellipsis; padding-top: 0; padding-right: 3px; padding-bottom: 0; padding-left: 3px; width: 36px; height: 36px; }
JS
Input for Pagination
×