@media only screen and (max-width: 400px) {
body { font-size: 10pt;}
p, li {font-size:10pt;}
h1, {font-size:12pt;}
h2, summary.ref {font-size:11pt;}
h3 {font-size:10pt;}
img {width: 100%; height:auto;}
.logo {width: 100px; height: auto;}
.box  { min-width: 180px;}
.item  { min-width: 180px; }
 }

@media only screen and (min-width: 400px){
body, p, li { font-size: 12pt;}
h1, {font-size:12pt;} 
h2, summary.ref {font-size:11pt;}
h3 {font-size:10pt;}
img {width: 100%; height:auto;}
.logo {width: 140px; height: auto;}
.box  { min-width: 180px;}
   .item  { min-width: 180px;}

}

@media only screen and (min-width: 786px){ 
	body, p, li { font-size: 12pt;}
    h1 {font-size:15pt;}
    h2,summary.ref {font-size:14pt;}
    h3 {font-size:13pt;}
   img {width: 100%; height:auto;}
   .logo {width: 160px; height: auto;}
   .box  { min-width: 300px;}
   .item  { min-width: 300px;}
}	
	

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

	body, p, li { font-size: 12pt;}
    h1 {font-size:15pt;}
    h2,summary.ref {font-size:14pt;}
    h3 {font-size:13pt;}
   img {width: 100%; height:auto;}
   .logo {width: 180px; height: auto;}
   .box  { min-width: 350px;}
   .item  { min-width: 350px;}
}
	
@media only screen and  (min-width: 1200px) { 
	body, p, li { font-size: 12pt;}
    h1 {font-size:15pt;}
    h2,summary.ref {font-size:14pt;}
    h3 {font-size:13pt;}
   img {width: 100%; height:auto;}
.logo {width: 200px; height: auto;}
.box  { min-width: 350px; }
.item  { min-width: 400px; }

}

p   {font-family: arial, helvetica, sans-serif; margin-top: 0px; text-wrap: balance;} 
ul  {font-family: arial, helvetica, sans-serif; color: black;text-wrap: balance; }
li  {font-family: arial, helvetica, sans-serif; color: black; text-wrap: balance;list-style:'- '; padding-top:5px; }

a          { text-decoration: none; color: blue;  }
a:hover    { text-decoration: underline }
a:active   { text-decoration: underline }
    
h1         { color: black; }
h2         { color: black; }
h3         { color: black; }
h4         { color: black; }



/* Hintergrund */
body {font-family: arial, helvetica, sans-serif; background-color: whitesmoke;text-wrap: balance;}

/* Inhalte */
.content {font-family: arial, helvetica, sans-serif; align:center; background-color: white; margin:auto; padding: 5px 15px 5px 15px; max-width: 1200px;}

/* Hintergrund Überschriften */
.headline {
font-family: arial, helvetica, sans-serif; 
background-color: whitesmoke; 
padding:0px 5px 0px 5px; 
margin:15px 0px 15px 0px; 
border-width: 1px 0px 1px 0px;
border-style: solid;
}

/* Details für Referenzprojekte */

details.ref > summary.ref {
  cursor: pointer;
  margin-bottom: 10px;
}

details.ref > p {
  margin: 0;
}

summary.ref {
font-family:arial, helvetica, sans-serif;
font-size: bold;
font-weight: bold;
}

/* Flexbox für Referenzprojekte */

.wrapper {
  border: none;
  width: 100%;
  margin: 20 0 20 0
}
div.box {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
   
}

div.box > * {
  flex: 1 1;
  border: none;
  background-color: whitesmoke;
  padding: 10px 10px 5px 10px;
}
/* Formatierung der Einträge aus Referenzliste */

p.box:nth-child(1) {
   font-weight: bold;
}
p.box:nth-child(4)::before{
   content: "Auftraggeber: ";
   font-weight: bold;
}
p.box:nth-child(5)::before{ 
    content: "Zeitraum: ";
	font-weight: bold;
}

/* Flexbox für Themenbereiche */

.container {
  display: flex;
  flex-wrap: wrap;
  border: none;
  width: 100%;
  gap: 10px;

}

.item {
  flex: 1 1;
  border: none;
 /* background-color: whitesmoke;*/
  padding: 0px 15px 0px 15px;
  }

.item > * {
  flex: 1 1;
  flex-wrap: wrap;
  border: none;
  /* background-color: whitesmoke; */
 }


/* -------------------------------------------------- */
/* Styles for text box with more / less button */
        .limited {
           /* max-height: 400px;*/
            overflow: hidden;
            position: relative;
			margin-bottom: 0px;
        }
        .limited.l-100 {
            max-height: 100px;
			 max-height: 0px;

        }

        .limited .bottom {
            position: absolute;
            bottom: 0;
           /* background: linear-gradient(to bottom, rgba(245,245,245,0), rgba(245,245,245,1) 80%); */
            width: 100%;
           /* height: 40px; */
			height: 00px;
            opacity: 1;
            transition: .3s; 
		
        }
        .read-more-checker {
            opacity: 0;
            position: absolute;
			
        }
        .read-more-checker:checked ~ .limited {
            max-height: none;
        }
        .read-more-checker:checked ~ .limited .bottom {
            opacity: 0;
            transition: .3s;
        }
        .read-more-checker ~ .read-more-button:before {
            content: 'Mehr »';
		
			font-style: italic; 
        }
        .read-more-checker:checked ~ .read-more-button:before {
            content: 'Weniger «';
			
			font-style: italic; 
        }
        .read-more-button {
            cursor: pointer;
            display: inline-block;
            
        }