@font-face { font-family: 'Montserrat'; src: url('font/Montserrat-Regular.ttf');
             font-family: 'sophia'; src: url('fonts/Sophia Bella DEMO.ttf');
             font-family: 'syncop'; src: url('fonts/Syncopate-Bold.ttf'); }
* { padding: 0; margin: 0; text-decoration:none; box-sizing: border-box; border:0; }

img { width:100%; height:auto; }

body { background: #f7f7f7; font-family: 'Montserrat',Verdana, sans-serif; font-weight:400; }


@media screen and (min-width: 768px) {

.box           { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; }
     .boxli    { order: 1; flex-basis: 25%; flex-grow:1; }
     .boxre    { order: 2; flex-basis: 60%; flex-grow:1; }


header        { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; }
     .titel    { order: 1; flex-basis: 50%; flex-grow:1; }
     .titelbild    { order: 2; flex-basis: 50%; flex-grow:1; }

.fotos {
  display: flex;
  gap: 16px;
}

.fo  {
  flex: 1 1 0;
  width: 0;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.fotosklein { display: flex; gap: 16px; margin-bottom:16px; }

.fotosklein img  {
  flex: 1 1 0;
  width: 0;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

}

main { margin: 0 auto; }


header { background:#e3e3e1; }

.box    { margin:40px 0 10px 0; }
.boxli  { margin-top:25px; }
.boxre  { margin-left:10px; padding:10px; }



.ha4    { background-image: url("img/marta_doehler_behzadi4.jpg"); background-position: center; background-repeat: no-repeat;
  background-size: cover; min-height:400px; position: relative; }
.ha5    { background-image: url("img/marta_doehler_behzadi5.jpg"); background-position: center; background-repeat: no-repeat;
  background-size: cover; min-height:400px; position: relative; }
.ha6    { background-image: url("img/marta_doehler_behzadi6.jpg"); background-position: center; background-repeat: no-repeat;
  background-size: cover; min-height:400px; position: relative; }
.ha7    { background-image: url("img/marta_doehler_behzadi7.jpg"); background-position: center; background-repeat: no-repeat;
  background-size: cover; min-height:400px; position: relative; }

p    {font-size:17px; color:#000; font-weight:400; line-height:30px; padding:10px 5px 15px 0px; }
h1  { font-family: 'syncop'; font-size:65px; color:#b3b3b3; font-weight:400; line-height:70px; padding:170px 0 10px 90px; }
h2  { font-family: 'Montserrat'; font-size:42px; color:#b3b3b3; font-weight:400; padding-left:90px }


h3 { font-family: 'syncop'; color:#fff; font-size:32px; font-weight:400; line-height:42px; background:#a9a9a9; padding:20px; text-align:right; }

.c  { text-align: center; }
.r  { text-align: right; }

ol { font-size:1em; color:#F4EEEF; font-weight:500; line-height:1.4em; padding-left: 40px;}
ul { font-size:18px; color:#000; font-weight:400; line-height:28px; padding-left: 40px; list-style-image: url('img/but.png'); }


.oben    { text-align: right; padding-right:20px; }
.oben a   { font-size:1.8em; color:#a4bb9d; line-height:0.6em; }
.oben a:hover   { color:#3ead48; transition: 0.4s; }

.icon1  {  border-radius:50%; max-width:16px; padding:1px; margin-right:2px; border:1px solid #fff; }
.icon  {  border-radius:50%; max-width:16px; padding:1px; margin-right:2px; background:#3ead48; }

a.stil1:link    {font-size:17px; color:#686363; line-height:30px; font-weight:600; }
a.stil1:visited {color:#686363; }
a.stil1:hover   {color:#000; }
a.stil1:active  {color:#686363; }

@media screen and (max-width:550px) {

     h1  { font-size:34px; text-align:center; padding: 10px 5px 0px 5px; }
     h2 { font-size:24px; text-align:center; padding: 0 5px 20px 5px; line-height:24px; }
     h3  { font-size:24px; text-align:left; padding: 7px 5px 3px 5px; }
     p    {font-size:16px; color:#000; font-weight:400; line-height:25px; padding:0px 5px 10px 5px; }
     .boxre img { width:90%; height:auto; padding:0px 5px 10px 5px; }

}