@CHARSET "ISO-8859-1";
/*
-- Block Komponente Version 1 --
--
CSS Klassen des ueuueeren div Elements:
block-top Variante mit Bild oben
block-left Variante mit Bild links
block-right Variante mit Bild rechts
Per DEFAULT nimmt ein Bild in den rechts/links Varianten 30% der verfuegbaren Breite ein. Dieses Verhalten kann mit den folgenden Klassen umgangen werden.
WICHTIG: Die top Variante behuelt immer den DEFAULT Wert von 100%. Diese 2 Klassen duerfen nicht in Verbindung mit block-top genutzt werden.
block-img-50 Bild nimmt 50% ein
block-img-70 Bild nimmt 70% ein
Ein Element kann 33.3% oder 50% der verfuegbaren Breite nutzen. Dieses Verhalten wird mit den folgenden Klassen aktiviert:
.block-30 Um 3 Elemente nebeneinander darzustellen
.block-50 Um 2 Elemente nebeneinander darzustellen
Es ist gewuenscht die Farbe vom Titel selbst und dessen Hintergrund zu uendern.
style="background-color: #3e3e3e; color: #fafafa;"
Beispiel:
Lorem ipsum dolor sit amet
Es ist ebenfalls gewuenscht die Buttonfarbe zu uendern.
style="background-color: #3e3e3e; color: #fafafa;"
style="background-color: #000000;"
Beispiel:
STOFFE ENTDECKEN
--*/
/* button */
.jab-btn-div {
position: relative;
display: block;
overflow: hidden;
}
.jab-btn, .jab-btn:link, .jab-btn:visited, .jab-btn:hover, .jab-btn:active {
color: #fafafa; /* text color */
background-color: #1c1f2a; /* background color */
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.07em;
text-align: center;
font-size: 15px;
z-index: 0;
position: relative;
display: block;
overflow: hidden;
width: 100%;
height: 44px;
max-width: 300px;
margin: 1rem auto;
line-height: 44px;
}
.jab-btn span {
position: absolute;
display: block;
width: 0;
height: 0;
border-radius: 50%;
background-color: #ce253d; /* background color at mouseover */
transition: width 0.2s ease-in-out, height 0.2s ease-in-out;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: -1;
}
.jab-btn:hover span {
width: 225%;
height: 562.5px;
}
/* Allgemeine Definition des blog Elements */
[class^="jab-dynamic-blog-layout-"] h2 {
padding: 2em 0 0 0; /* Platz nach oben und unten */
line-height: 2em; /* Huehe des H2 Elements, wird fuer mehrzeilige uebershriften benuetigt*/
}
[class^="jab-dynamic-blog-layout-"] h2 span {
background-color: #fafafa;
padding: 0.9em;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
[class^="jab-dynamic-blog-layout-"] a {
display: block;
}
[class^="jab-dynamic-blog-layout-"] p a {
display: inline-block;
}
/* Definition der 3 Varianten */
.jab-dynamic-blog-layout-left img {
float: left; /* Bild linksbuendig */
width: 30%; /* Default Breite des Bildes */
padding-right: 1em; /* Rechts Abstand zwischen Bild und Text */
}
.jab-dynamic-blog-layout-left h2 span {
margin-left: -5em; /* Wie weit die ueberschrift in das Bild ragt */
}
.jab-dynamic-blog-layout-right img {
float: right; /* Bild rechtsbuendig */
width: 30%; /* Default Breite des Bildes */
padding-left: 1em; /* Links Abstand zwischen Bild und Text */
}
.jab-dynamic-blog-layout-right h2 {
text-align: right; /* Inhalt rechtsbuendig */
}
.jab-dynamic-blog-layout-right h2 span {
margin-right: -5em; /* Wie weit die ueberschrift in das Bild ragt */
-webkit-user-modify: read-only;
}
.jab-dynamic-blog-layout-top img {
width: 100%; /* Bei der Variante muss das Bild immer 100% der verfuegbaren Breite einnehmen */
}
.jab-dynamic-blog-layout-top h2 {
margin: -2.2em 0 1em 0; /* Wie weit die ueberschrift in das Bild ragt + Abstand nach unten */
text-align: center; /* ueberschrift muss zentriert werden */
padding: 0; /* Padding der anderen 2 Elemente muss geluescht werden */
}
/* Definition der 2 mueglichen override Bildgrueueen fuer jab-dynamic-blog-layout-right und jab-dynamic-blog-layout-left */
.jab-dynamic-blog-layout-img-50 img {
width: 50%; /* Bild fuellt 50% des Inhalts */
}
.jab-dynamic-blog-layout-img-70 img {
width: 70%; /* Bild fuellt 70% des Inhalts */
}
/* Allgemeine Definition des teaser Elements */
.jab-dynamic-teaser-layout-left img {
width: 33.3%;
float: left;
padding-right: 5em;
}
.jab-dynamic-teaser-layout-right img {
width: 33.3%;
float: right;
padding-left: 5em;
}
[class^="jab-dynamic-teaser-layout-"] a {
display: block;
}
[class^="jab-dynamic-teaser-layout-"] .jab-btn {
margin: 0;
}
/* Allgemeine Definition des picture Elements */
.jab-dynamic-picture-layout {
text-align: center;
color: #fafafa;
position: relative;
}
.jab-dynamic-picture-layout div {
background-color: rgba(28, 31, 42, 0.6);
position: absolute;
bottom: 0;
padding: 2em 0;
width: 100%;
}
.jab-dynamic-picture-layout img {
width: 100%;
}
.jab-dynamic-picture-layout a {
display: block;
}
/* Allgemeine Definition des picture Elements */
.jab-dynamic-inspiration-layout {
text-align: center;
color: #fafafa;
position: relative;
}
.jab-dynamic-inspiration-layout div {
background-color: rgba(28, 31, 42, 0.6);
position: absolute;
bottom: 0;
padding: 2em 0;
width: 100%;
}
.jab-dynamic-inspiration-layout img {
width: 100%;
}
.jab-dynamic-inspiration-layout a {
display: block;
color: #fafafa;
}
.jab-dynamic-inspiration-layout a:hover {
color: #fafafa;
}
/* Definition der Elementbreite */
.element-100 {
width: 100%; /* 1/1 der Gesamtbreite */
}
.element-50-1 {
float: left; /* Linksbuendiges Floating des Containers */
width: 50%; /* 1/2 der Gesamtbreite */
padding-right: 1em; /* Zwischenabstand der Elemente */
}
.element-50-2 {
float: left; /* Linksbuendiges Floating des Containers */
width: 50%; /* 1/2 der Gesamtbreite */
padding-left: 1em; /* Zwischenabstand der Elemente */
}
.element-30-1 {
float: left; /* Linksbuendiges Floating des Containers */
width: 33.3%; /* 1/3 der Gesamtbreite */
padding-right: 1.3em; /* Zwischenabstand der Elemente */
}
.element-30-2 {
float: left; /* Linksbuendiges Floating des Containers */
width: 33.3%; /* 1/3 der Gesamtbreite */
padding-right: 0.65em; /* Zwischenabstand der Elemente */
padding-left: 0.65em; /* Zwischenabstand der Elemente */
}
.element-30-3 {
float: left; /* Linksbuendiges Floating des Containers */
width: 33.3%; /* 1/3 der Gesamtbreite */
padding-left: 1.3em; /* Zwischenabstand der Elemente */
}
.element-30-70-1 {
float: left;
width: 30%;
padding-right: 1em;
}
.element-30-70-2 {
float: left;
width: 70%;
padding-left: 1em;
}
.element-70-30-1 {
float: left;
width: 70%;
padding-right: 1em;
}
.element-70-30-2 {
float: left;
width: 30%;
padding-left: 1em;
}
/* WICHTIG:; Clearfix fuer die Elemente! */
[class^="element-"]::after {
content: "";
clear: both;
display: table;
}
/* Kleine Fix fuer den Abstand der Elemente untereinander */
[class^="element-"] {
padding-bottom: 2em; /* Zwischenabstand der Elemente */
}
/* dynamic blog video component */
.jab-dynamic-video video {
/*Changed in DIGITAL-2173*/
min-height: 100%;
min-width: 100%;
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
display: block;
}
.jab-dynamic-video h2 {
position: relative;
}
/* Tablet Breakpoint */
@media only screen and (min-device-width: 40em) and (max-device-width: 60em) {
.jab-dynamic-blog-layout-left img, .jab-dynamic-blog-layout-right img {
width: 50%; /* Auf dem Tablet setzen wir die Bildgrueuee generell auf 50%, da 30% zu klein und 70% zu groue ist */
}
[class^="jab-dynamic-teaser-layout-"] img {
width: 50%;
}
}
@media only screen and (min-width: 768px) {
.mobileImage{
display:none;
}
.desktopImage{
display:block;
}
}
/* Mobile Breakpoint */
@media only screen and (max-width: 768px) {
.mobileImage{
display:block;
}
.desktopImage{
display:none;
}
}
/* Mobile Breakpoint */
@media only screen and (max-device-width: 39em) {
[class^="element-"] {
width: 100% !important; /* Mobil fuellen alle Elemente 100% */
padding: 0 0 24px 0 !important; /* Da keine Elemente nebeneinander liegen, benuetigen wir auch keinen seitlichen Abstand */
}
[class^="jab-dynamic-blog-layout-"] img {
width: 100%; /* Bild fuellt mobil 100% des Inhalts */
padding: 0; /* Mobil keine seitlichen Ruender */
float: none; /* Mobil ohne Floating */
}
[class^="jab-dynamic-blog-layout-"] h2 {
text-align: center; /* Mobil ueberschrift zentriert */
margin: -2.2em 0 1em 0; /* Wie weit die ueberschrift in das Bild ragt + Abstand nach unten */
padding: 0; /* Padding der anderen 2 Elemente muss geluescht werden */
}
[class^="jab-dynamic-blog-layout-"] h2 span {
margin: 0; /* Mobil kein seitliches Einruecken */
}
[class^="jab-dynamic-teaser-layout-"] img {
width: 100%; /* Bild fuellt mobil 100% des Inhalts */
float: none; /* Mobil ohne Floating */
padding: 0; /* Padding der anderen 2 Elemente muss geluescht werden */
}
}