@charset "utf-8";
/* Heise Medienwerk / Maik Schwartz */


/* montserrat-500 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/montserrat-v24-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/montserrat-v24-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat-v24-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/montserrat-v24-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/montserrat-v24-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/montserrat-v24-latin-500.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-900 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/montserrat-v24-latin-900.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/montserrat-v24-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat-v24-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/montserrat-v24-latin-900.woff') format('woff'), /* Modern Browsers */
       url('../fonts/montserrat-v24-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/montserrat-v24-latin-900.svg#Montserrat') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/raleway-v27-latin-800.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/raleway-v27-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v27-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/raleway-v27-latin-800.woff') format('woff'), /* Modern Browsers */
       url('../fonts/raleway-v27-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/raleway-v27-latin-800.svg#Raleway') format('svg'); /* Legacy iOS */
}

/* roboto-condensed-regular - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-condensed-v25-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-condensed-v25-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-condensed-v25-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-condensed-v25-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-condensed-v25-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-condensed-v25-latin-regular.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}
/* roboto-condensed-700 - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-condensed-v25-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-condensed-v25-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-condensed-v25-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-condensed-v25-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-condensed-v25-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-condensed-v25-latin-700.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v30-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-v30-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v30-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v30-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v30-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v30-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v30-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
}


/* GLOBAL BASICS */

html {
  scroll-behavior: smooth;
}

body, html {font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;}
.navbar-brand {font-family: 'Raleway', sans-serif; text-transform: uppercase; letter-spacing: 2px; font-weight: 800;}
.navbar-nav {text-transform: uppercase; letter-spacing: 1px;}
.nav-item {font-weight: bold;}

.bg-dark {background-color: #000!important;}
#titel {height: 100vh; background: url(../img/cover.png) center center no-repeat #000;
    background-size: 75% auto; position: relative;}

#titel::after {content:"⇩"; display: block; color: #fff; text-align: center; position: absolute; font-size: 40px; left: 0; right: 0; bottom: 40px; border-radius: 120px; background: transparent; width: 65px; margin: 0 auto; border: 2px #fff solid;}

.small_text {text-transform: uppercase; font-size: 10px; letter-spacing: 1px;}

#footer {border-top: 1px dotted #ccc; padding-top: 15px;}
#footer * {text-transform: uppercase; font-size: 10px; text-align: center; letter-spacing: 1px;}

/* STARTSEITE */

#einleitung {min-height: 100vh; display: flex; align-items: center; padding: 150px 150px 80px 150px; flex-direction: column;}
#einleitung p {text-align: left; column-count: 2; column-gap: 150px; column-rule-style: dotted; column-rule-width: 1px; column-rule-color: #ccc; letter-spacing: 0.5px; font-size: 17px; line-height: 1.7;}
#einleitung h1, #einleitung h2 {font-weight: 800; font-family: 'Raleway', sans-serif; text-transform: uppercase; letter-spacing: 6px; margin-bottom: 50px;}
#einleitung .small_text {margin-top: 50px;}

#ausstellung_info h2 {text-align: center; margin-top: 20px; margin-bottom: 0;}
#ausstellung_info img {width: 720px;}
#ausstellung_info p  {text-align: center; column-count: 1; letter-spacing: 0.5px; font-size: 17px; line-height: 1.7;}

/* KÜNSTLERIN */

#kuenstlerin {min-height: 100vh; height: 100vh; background: #000; color: #fff;}
#kuenstlerin h1 {font-weight: 800; font-family: 'Raleway', sans-serif; text-transform: uppercase; letter-spacing: 6px; font-size: 50px;}
#kuenstlerin h1 span {
    font-size: 70%;
    margin-top: -5px;
    line-height: -29.25;
    display: block;
}
#kuenstlerin .row, #kuenstlerin .steckbrief { height: 100%;}
#kuenstlerin .steckbrief {padding: 50px 80px;}
#kuenstlerin .steckbrief div {display: flex; align-items: stretch; flex-direction: column; justify-content: space-between; height: 100%;}
#kuenstlerin ul {padding-left: 15px; font-family: 'Roboto Condensed', sans-serif; font-size: 18px; list-style: square;}
#kuenstlerin ul li {padding: 7px 0;}
#kuenstlerin .bild_dreyer {background: url("../img/christiane_dreyer.jpg") top center no-repeat; background-size: cover;}
#kuenstlerin .bild_meixner {background: url(../img/anke_meixner.jpg) top center no-repeat; background-size: cover;}
#kuenstlerin .bild_stenglin {background: url("../img/kat_von_stenglin.jpg") top center no-repeat; background-size: cover;}

#einleitung .bilderauswahl {width: 100%; margin-top: 60px; text-align: left; font-family: 'Montserrat', sans-serif; font-size: 14px; letter-spacing: -0.2px}
#einleitung .bilderauswahl img {margin-bottom: 15px; max-height: 360px;}

#einleitung .kontakt h3 {font-weight: 800; font-family: 'Raleway', sans-serif; text-transform: uppercase; letter-spacing: 6px; margin-bottom: 15px; margin-top: 80px; text-align: center;}

.kontakt a, .kontakt a:visited {color: #000; text-decoration: none;}
.kontakt a:hover, .kontakt a:focus {color: #666; text-decoration: none;}

/* IMPRESSUM */

#impressum {color: #fff; background: #000; padding: 140px 0 80px 0;}
#impressum h1, #impressum h2 {font-weight: 800; font-family: 'Raleway', sans-serif; text-transform: uppercase; font-size: 30px; letter-spacing: 1px;}
#impressum h2 {margin-top: 60px;}


/* DATENSCHUTZ */

#datenschutz {padding: 100px 0;}
#datenschutz p {font-size: 14px; line-height: 1.7;}
#datenschutz h2:first-child {font-weight: 800; font-family: 'Raleway', sans-serif; text-transform: uppercase; font-size: 30px; letter-spacing: 1px;}

.smallsubtitle {font-weight: 800; font-family: 'Raleway', sans-serif; text-transform: uppercase; font-size: 18px; letter-spacing: 1px;}

/* RESPONSIVE */

@media only screen and (max-width: 768px) {
.navbar {justify-content: center;}
.navbar-brand {font-size: 0.7rem; margin: 0 auto; font-family: 'Raleway', sans-serif; text-transform: uppercase; letter-spacing: 2px; font-weight: 800;}
.navbar-nav, .dropdown-item {text-align: center;}
.dropdown-menu {border-radius: 0;}

#titel {height: 60vh; background-size: 95% auto;}
#titel::after { font-size: 20px; width: 35px; }
	a + #einleitung {padding-top: 100px;}
#einleitung, #datenschutz {min-height: none; padding: 40px 15px;}
#impressum {min-height: none; padding: 90px 15px 40px 15px;}
	#impressum .container {padding: 0;}
#einleitung p {text-align: left; column-count: 1; letter-spacing: 0.5px; font-size: 17px; line-height: 1.7;}
#einleitung .small_text { margin-top: 10px; margin-bottom: 10px;}

	#kuenstlerin .bild_dreyer, #kuenstlerin .bild_stenglin, #kuenstlerin .bild_meixner {height: 75vh;}
	#kuenstlerin {min-height: auto; height: auto;}
	#kuenstlerin .steckbrief {padding: 15px;}
	#kuenstlerin .steckbrief h1 {font-size: 30px;}
	#kuenstlerin h1 span {margin-top: 0;}

	#einleitung .bilderauswahl img {margin-top: 50px;}
	#einleitung .bilderauswahl {letter-spacing: -0.6px;}
.kontakt * {text-align: center!important;}
}

@media only screen and (min-width: 769px) and (max-width: 1600px) {

.navbar-brand {font-size: 1rem; margin: 0 auto; font-family: 'Raleway', sans-serif; text-transform: uppercase; letter-spacing: 2px; font-weight: 800;}
.dropdown-menu {border-radius: 0;}
	
#titel {height: 90vh; background-size: 75% auto;}
#titel::after { font-size: 20px; width: 35px; }
	#ausstellung_info * {text-align: center!important;}
	a + #einleitung {padding-top: 80px;}
#einleitung, #datenschutz {min-height: none; padding: 40px 60px;}
	#einleitung p {max-width: 75%;}
	#einleitung .kontakt p, #einleitung #ausstellung_info p {max-width: 100%;}
    #impressum {min-height: none;}
	#impressum .container {padding: 0 60px;}
#einleitung p {text-align: left; column-count: 1; letter-spacing: 0.5px; font-size: 17px; line-height: 1.7;}
#einleitung .small_text { margin-top: 10px; margin-bottom: 10px;}

	#kuenstlerin .bild_dreyer, #kuenstlerin .bild_stenglin, #kuenstlerin .bild_meixner {min-height: 100vh;}
	#kuenstlerin {min-height: auto; height: auto;}
	#kuenstlerin .steckbrief {padding: 60px;}
	#kuenstlerin .steckbrief h1 {font-size: 30px;}
	#kuenstlerin h1 span {margin-top: 0;}
	#kuenstlerin + #einleitung {padding: 60px;}

	#einleitung .bilderauswahl img {margin-top: 10px;}
	#einleitung .bilderauswahl {letter-spacing: -0.6px;}
	#einleitung .kontakt h3 {margin-top: 20px;}
.kontakt * {text-align: center!important;}
}