/* LESS */

@weiss: #fff;
@schwarz: #495057;
@silver: #8E8C8A;
@hellgrau: #F8F9FA;
@mittelgrau: #C4C8CB;
@purple: #805B91;

@wettermedia: #4D8BC9;
@mediengipfel: #5687C5;
@medienmittelpunkt: #59B4BF;
@sportgipfel: #054B9C;

@duenn: 400;
@dick: 700;
@kern: 0.1em;
@eckenkante: 0px;

/* GENERELL */
body { font-family: 'IBM Plex Sans', sans-serif; color: @schwarz; background-color: #CED4DA; }
h1, h2, h3, h4 { font-family: 'PT Serif', serif; }

h1 { font-family: 'PT Serif', serif; font-size: 2em; }

h5 { font-family: 'PT Serif', serif; }
h6 { font-family: 'IBM Plex Sans', sans-serif; }

h2 { font-size: 1em; line-height: 160%; color: @schwarz; }
h3 { font-size: 1.3em; margin-top: 10px; margin-bottom: 10px; font-weight: @dick; text-transform: uppercase; letter-spacing: @kern; }
h4 { font-size: 1.2em; margin-top: 10px; margin-bottom: 10px; }
p { font-size: 1em; line-height: 1.6em; color: @schwarz; }
a { color: @purple; text-decoration: none; font-weight: @dick; }

/* NAV */
.nav-link { color: @schwarz; }
.nav-underline .nav-link.active, .nav-underline .show>.nav-link { color: @purple; }

.headliner { padding-top: 60px; padding-bottom: 60px; }
.stylenavi { padding-top: 60px; padding-bottom: 60px; }
.style { padding-top: 120px; padding-bottom: 120px; }

.hinterlegt { background-color: @hellgrau; }
.purplebg { background-color: @purple; }
.wettermediabg { background-color: @wettermedia; }
.mediengipfelbg { background-color: @mediengipfel; }
.medienmittelpunktbg { background-color: @medienmittelpunkt; }
.sportgipfelbg { background-color: @sportgipfel; }

.silverbg { background-color: @silver; }
.schwarzbg { background-color: @schwarz; }

.card { border: 0px solid @weiss; border-radius: @eckenkante; }
.card-body { color: @schwarz !important; }
.text-bg-secondary .card-text { color: @weiss; }
.text-bg-secondary .card-link { color: @mittelgrau; }

.alert { border-radius: @eckenkante;  }

/* BUTTON */
.btn { text-shadow: 0 1px 1px rgba(0,0,0,0.1); text-transform: uppercase; letter-spacing: @kern; font-weight: @dick; border-radius: @eckenkante; border: 1px solid transparent; }
.btn-bd { color: @weiss; background-color: @silver; }

/* BILDEFFEKT */
.img-gray { position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; mix-blend-mode: screen; background-image: url(/styleguide/media/bildeffekt/ohne-duplex.jpg); background-size: cover; filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); filter: gray; -webkit-filter: grayscale(100%); }
.img-purple { width: 100%; height: 100%; display: block; position: relative; background-color: @purple; z-index: 999; }
.img-blue { width: 100%; height: 100%; display: block; position: relative; background-color: @wettermedia; z-index: 999; }
.img-tuerkis { width: 100%; height: 100%; display: block; position: relative; background-color: @medienmittelpunkt; z-index: 999; }
.img-dunkelblau { width: 100%; height: 100%; display: block; position: relative; background-color: @sportgipfel; z-index: 999; }

/* TYPO */
.IBM { font-family: 'IBM Plex Sans', sans-serif; font-size: 1.4em; line-height: 1.1em; }
.IBM-Thin-100 { font-weight: 100; font-style: regular; }
.IBM-Thin-100-Italic { font-weight: 100; font-style: italic; }
.IBM-ExtraLight-200 { font-weight: 200; font-style: regular; }
.IBM-ExtraLight-200-Italic { font-weight: 200; font-style: italic; }
.IBM-Light-300 { font-weight: 300; font-style: regular; }
.IBM-Light-300-Italic { font-weight: 300; font-style: italic; }
.IBM-Regular-400 { font-weight: 400; font-style: regular; }
.IBM-Regular-400-Italic { font-weight: 400; font-style: italic; }
.IBM-Medium-500 { font-weight: 500; font-style: regular; }
.IBM-Medium-500-Italic { font-weight: 500; font-style: italic; }
.IBM-SemiBold-600 { font-weight: 600; font-style: regular; }
.IBM-SemiBold-600-Italic { font-weight: 600; font-style: italic; }
.IBM-Bold-700 { font-weight: 700; font-style: regular; }
.IBM-Bold-700-Italic { font-weight: 700; font-style: italic; }

.PTS { font-family: 'PT Serif', serif; font-size: 1.4em; line-height: 1.1em; }
.PTS-Regular-400 { font-weight: 400; font-style: regular; }
.PTS-Regular-400-Italic { font-weight: 400; font-style: italic; }
.PTS-Bold-700 { font-weight: 700 !important; font-style: regular; }
.PTS-Bold-700-Italic { font-weight: 700; font-style: italic; }