@charset "utf-8";

/*
* CSS-Design
* Website PlanVerde
*/

/* Farbwerte
* orange #e19d56 rgba 225,157,86,1
* blaugrün #345d69 rgba 52,93,105,1
* hellgrün #96af85 rgba 150,175,133,1
* hellgrau #dad9d6 rgba 218,217,214,1 */

/* Schriften einbinden */

@font-face {
  font-family: 'GeneralSans-Extralight';
  src: url('../fonts/GeneralSans-Extralight.woff2') format('woff2'),
       url('../fonts/GeneralSans-Extralight.woff') format('woff'),
       url('../fonts/GeneralSans-Extralight.ttf') format('truetype');
  font-weight: 200;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'GeneralSans-ExtralightItalic';
  src: url('../fonts/GeneralSans-ExtralightItalic.woff2') format('woff2'),
       url('../fonts/GeneralSans-ExtralightItalic.woff') format('woff'),
       url('../fonts/GeneralSans-ExtralightItalic.ttf') format('truetype');
  font-weight: 200;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'GeneralSans-Light';
  src: url('fonts/GeneralSans-Light.woff2') format('woff2'),
       url('fonts/GeneralSans-Light.woff') format('woff'),
       url('fonts/GeneralSans-Light.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'GeneralSans-LightItalic';
  src: url('fonts/GeneralSans-LightItalic.woff2') format('woff2'),
       url('fonts/GeneralSans-LightItalic.woff') format('woff'),
       url('fonts/GeneralSans-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'GeneralSans-Regular';
  src: url('fonts/GeneralSans-Regular.woff2') format('woff2'),
       url('fonts/GeneralSans-Regular.woff') format('woff'),
       url('fonts/GeneralSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'GeneralSans-Italic';
  src: url('/fonts/GeneralSans-Italic.woff2') format('woff2'),
       url('/fonts/GeneralSans-Italic.woff') format('woff'),
       url('/fonts/GeneralSans-Italic.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'GeneralSans-Medium';
  src: url('/fonts/GeneralSans-Medium.woff2') format('woff2'),
       url('/fonts/GeneralSans-Medium.woff') format('woff'),
       url('/fonts/GeneralSans-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'GeneralSans-MediumItalic';
  src: url('../fonts/GeneralSans-MediumItalic.woff2') format('woff2'),
       url('../fonts/GeneralSans-MediumItalic.woff') format('woff'),
       url('../fonts/GeneralSans-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'GeneralSans-Semibold';
  src: url('../fonts/GeneralSans-Semibold.woff2') format('woff2'),
       url('../fonts/GeneralSans-Semibold.woff') format('woff'),
       url('../fonts/GeneralSans-Semibold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'GeneralSans-SemiboldItalic';
  src: url('../fonts/GeneralSans-SemiboldItalic.woff2') format('woff2'),
       url('../fonts/GeneralSans-SemiboldItalic.woff') format('woff'),
       url('../fonts/GeneralSans-SemiboldItalic.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'GeneralSans-Bold';
  src: url('../fonts/GeneralSans-Bold.woff2') format('woff2'),
       url('../fonts/GeneralSans-Bold.woff') format('woff'),
       url('../fonts/GeneralSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'GeneralSans-BoldItalic';
  src: url('../fonts/GeneralSans-BoldItalic.woff2') format('woff2'),
       url('../fonts/GeneralSans-BoldItalic.woff') format('woff'),
       url('../fonts/GeneralSans-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
  font-style: italic;
}

@font-face {
  font-family: 'vartek';
  src: url('fonts/Vartek.woff2') format('woff2'),
       url('fonts/Vartek.woff') format('woff');
  font-weight: normal;
}
 
/* Reset * * * * * * * * */

*{
  margin: 0;
  padding: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body{
  font: 400 1.25rem/1.45 'GeneralSans-Regular', Verdana, Geneva, Tahoma, sans-serif;
  color: #303030;
}

.wrapper{
  max-width: 1250px;
  padding: 0 25px;
  margin: 0 auto;
}

.column{
  float: left;
  margin: 25px 0 25px 3.33%;
  padding: 25px 0;
}

.column:first-child{
  margin-left: 0;
}

/* Clearfix */
 .row::before,
 .row::after {
 content: " ";
 display: table;
 }
  
 .row::after {
 clear: both;
 }

/* Raster */

.col_1{
  width: 100%;
}
   
.col_1_2{
  width: 48.3%;
}
     
.col_1_3{
  width: 31.1%;
}
   
.col_2_3{
  width: 65.5%;
}

.col_1_4{
  width: 22.5%;
}

.col_3_4{
  width: 74.16%;
}

/* Bilder */

img{
  max-width: 100%;

}

/* Typo */

h1, h2, h3, h4, h5, h6{
  font-family: 'vartek', sans-serif;
  margin-bottom: 30px;
  line-height:1.3;
  color: #303030;
  font-weight: 400;
}

h1{
  font-size: 2.75rem; /* 36px */
}

h2{
  font-size: 2rem; /* 32 px */
}

h3{
  font-size: 1.75rem; /* 28px */
}

h4{
  font-size: 1.5rem; /* 24px */
}

h5{
  font-size: 1.25rem; /* 20 px */
}

h6{
  font-size: 1.125rem; /* 18 */
}

a{
  text-decoration: none;
  color: #303030;
}

a:hover{
  color: #e19d56;
  text-decoration: underline;
}

p{
  margin: 0 0 20px;
}

.strong{
  font-weight: 600;
}

.link-im-text a{
  color:#e19d56;
}

/* Header */

#logo{
  max-height: 200px;
  margin-left: -27px;
}

.header .row{
  display: flex;
}

.header .column{
  margin-bottom: 0;
}



/* Navigation */

nav {
  display: none;
}

.nav-toggle { display:none; }

#navigation{
  float: right;
  margin-top: 97px;
}

#navigation ul{
  display: flex;
  justify-content: space-evenly;
}

#navigation li{
  position: relative;
  display: inline;
  list-style: none;
  margin-left: 30px;
  font-family: 'vartek', sans-serif;
  font-weight: 400;
}

#navigation li a{
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.125rem; /* 18px */
    padding: 20px 0;
}

#navigation li a:hover{
  color: rgba(150,175,133,1);
  text-decoration: none;
}

#navigation li a.active{
  color: rgba(150,175,133,1);
}


/* weitere übergreifende Styles */

.section-extra-large-margin{
  margin-bottom: 100px;
}

.section-large-margin {
  margin-bottom: 60px;
}

.section-medium-margin {
  margin-bottom: 40px;
}

.section-small-margin {
  margin-bottom: 20px;
}

.icon-link, .text-link{
  display: inline-flex;
  align-items: center;
  vertical-align:middle;
}

.icon-link img{
  margin-right: 5px;
  width: 25px;
  height: 25px; 
  flex-shrink: 0;
}

.icon-link-no-flex, .text-link-no-flex{
  display: inline-block;
  vertical-align: middle;
}

.zentrieren{
  text-align: center;
}

/* Hero */

.hero{
  position: relative;
}

.hero .wrapper{
 position: relative;
}

.hero-text {
  position: absolute;
  top: 40%; 
  left: 50%;
  transform: translate(-50%, -50%); 
  width: 100%; 
  background-color: white; 
  text-align: center; 
  padding: 50px 0;
} 

.hero-text p{
  font-size: 1.375rem;
}

.hero img{
  height: 600px;
  width: 100%;
  display: block;
  object-fit: cover;
}


/* Section Stimmungsbilder */

.stimmung span{
  text-align: center;
  font-size: 2rem;
  font-family: 'vartek', sans-serif;
  color: white;
  margin-bottom: 0;
}

.stimmung img{
  height: 300px;
  object-fit: cover;
}

.stimmung .row{
  display: flex;
}

.stimmung .column{
  display: flex;
  align-items: center;
  justify-content: center;

} 

.background-lightg{
  background-color: #96af85;
  /* height: 300px; */
}

.no-padding{
  padding: 0;
}

/* Section Unsere Philosophie */

.philosophie .row{
  display: flex;
  align-items: center;
  align-items: stretch;
}

.philosophie h2{
  color: white;
  text-align: center;
}

.background-blueg{
  background-color: #345d69;
  min-height: 300px; 
  display: flex;
  align-items: center;
  justify-content: center;
}

.philosophie .col_2_3{
  padding: 25px;
  border-bottom: #345d69 1px solid;
  border-top: #345d69 1px solid;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


/* Section Leistungen */

.leistungen .row{
  display: flex;
}

.leistungen .column{
  background-color: #345d69;
  padding: 50px 30px 30px 40px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.leistungen h2{
  color: white;
  text-transform: uppercase;
}

.leistungen p{
  color: white;
  margin-bottom: 30px;
}

.leistungen a{
  color: white;
} 

.leistungen a:hover{
  color: #e19d56;
}

.fixed-link{
  margin-top: auto;
  display: inline-flex;
  gap: 10px;
  flex-shrink: 0 !important;
  /* align-items: center; */
}


/* Section Garten-Projekte Teaser */

.no-margin{
  margin: 0;
}

.gartenprojekte .row{
  display: flex;
  justify-content: center;
}

.gartenprojekte .col_1{
  padding-bottom: 0;
  padding-left: 0;
}

.gartenprojekte h3{
  margin-bottom: 0;
}

.gartenprojekte .col_1_3 img{
  height: 250px;
  object-fit: cover;
}

.gartenprojekte a{
  font-family: 'vartek', sans-serif;
}


/* Section Freiraum-Projekte Teaser */

.freiraumprojekte .row{
  display: flex;
  justify-content: center;
}

.freiraumprojekte a{
  font-family: 'vartek', sans-serif;
}

.freiraumprojekte .col_1_3 img{
  height: 250px;
  object-fit: cover;
}

/* Section customer-quote */

.background-grey{
  background-color: rgba(218,217,214,0.5);
}
.background-orange{
  background-color: #e19d56;
}

.customer-quote .row{
  display: flex;
  justify-content: center;
}

.quote-slider{
  position: relative;
  height: 400px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.quote-slider blockquote{
  position: absolute;
  top: 0;
  left: 100%;
  opacity: 0;
  animation: slide-lr 24s infinite ease-in-out;
  width: 100%;
  height: 400px; 
}

@keyframes slide-lr {
  
  0% {
    left: 100%;
    opacity: 0;
  }
8.33% {
    left: 0;
    opacity: 1;
  }
25% {
    left: 0;
    opacity: 1;
  }
33.33% {
    left: -100%;
    opacity: 0;
  }
100% {
    left: -100%;
    opacity: 0;
  }
}

#quote-1{
  animation-delay: 0;
}

#quote-2{
  animation-delay: 6s;
}

#quote-3{
  animation-delay: 12s;
}

#quote-4{
  animation-delay: 18s;
}


/* Section News */

.news .row {
  display: flex;
  flex-wrap: wrap; 
  justify-content: space-between;
}

.news .column {
  background-color: rgba(218,217,214,0.5);
  padding: 25px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start; 
}


 .news .image-container {
  width: 100%;
  /* height: 200px; */
  display: flex;
  align-items: flex-start;
  justify-content: center;
} 

.image-news{
  max-height: 200px; 
  overflow: hidden;
  width: 100%; 
  object-fit: cover;
  display: block; 
}

.news a{
  padding: 10px 0 10px 0;
}

.news .icon-link img{
  width: 25px;
  height: 25px;
}

.news p{
  font-size: 1rem; 
  margin-top: 20px;
}


/* Section Kennenlernen */

.kennenlernen .row {
  display: flex; 
  align-items: center; 
}

.kennenlernen .column {
  padding: 20px; 
}

.kennenlernen img{
  float: right;
}


/* Footer */

footer{
  background-color: rgba(52,93,105,1);
  color: white;
}

footer h4{
  color: white;
}

footer .col_1 {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

footer h4 {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

footer p{
  font-size: 1.125rem;
  line-height: 1.7;
}

footer a{
  color: white;
  font-weight: 600;
}


#footer-end {
  display: flex;
  align-items: center;
  background-color: rgba(218,217,214,0.8);
  height: 60px;
  justify-content: center;
  color: #303030;
}

#footer-end a{
  color: #303030;
  font-size: 1.125rem;
  font-weight: 500;
}

.contact-icon{
  margin: 10px 0;
  display: flex;
  align-items: center;
  font-size: 1.125rem;
}

.contact-icon a{
  display: inline-flex;
}

.contact-icon img{
  margin-right: 7px;
}

/* Seite LEISTUNGEN GARTEN */

.garten-start h1{
  margin-top: 50px;
  margin-bottom: 50px;
  font-size: 2rem;
} 

.garten-start .column.col_3_4{
  margin-left: 0;
} 

.needs .row{
  display: flex;
  align-items: center;
} 

.needs h2{
  margin-bottom: 60px;
}

.needs h3{
  font-weight: 600; 
  color:#96af85;
  /* text-transform: uppercase; */
}

.needs .column.col_2_3{
  margin-left: 0;
}

.garten-angebot .column.col_1_3 { 
  padding: 20px;
  height: auto; 
}

.garten-angebot .column:first-child{
  padding-left: 0;
}

.garten-angebot h2{
  margin-top: 40px;
}

.garten-angebot h3{
  font-family: 'titillium web', Verdana, Geneva, Tahoma, sans-serif;
  font-size: 1.75rem;
  font-weight: 600;
  color:#7e946e;
} 

.linien-liste li{
  list-style: none;
  padding: 12px 0;
  border-bottom: 1px solid #ccc; 
  /* font-size: 1.125rem;  */ 
}

.linien-liste{
margin: 15px 0;
}

.moore-teaser .row{
  display: flex;
  align-items: center;
  align-items: stretch;
}

.moore-teaser .column:nth-child(2){
background: rgba(150,175,133,0.5);
}

/* Seite FREIRAUM */

.freiraum .row{
  display: flex;
  /* align-items: stretch; */
}

.freiraum .column{
  display: flex;
  flex-direction: column;
}


.freiraum .column.col_1_3{
  padding: 0; 
  display: flex;
  background-color:rgba(52,93,105,1);
  text-align: center;
  justify-content: center;
  min-height: 320px;
}

.textbox-2{
  padding: 30px; 
  box-shadow: 0px 10px 10px 0 rgba(0, 0, 0, 0.1);
  background-color: #fff;
  /* align-self: center; */
}

.freiraum h3{
  color:white;
  font-weight: 500;
  text-transform: uppercase;
  /* text-align: center; */
}

.freiraum ul {
  list-style-position: outside; 
  padding-left: 20px;
}

.freiraum li {
  text-indent: 0px; 
  padding-left: 10px; 
}

/* Seite PROJEKTE */

.filter-container{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.filter-btn {
  background-color: transparent;
  color: #303030;
  padding: 5px 10px;
  border-radius: 5px;
  border: none; 
  margin: 5px;
  cursor: pointer;
  font-size: 1rem;
  font-family: 'titillium web', Verdana, Geneva, Tahoma, sans-serif;
  transition: background-color 0.3s, color 0.3s;
}

.filter-btn:hover {
  background-color: #96af85;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
}

.filter-btn.active-filter {
  background-color: #96af85;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
}

.gallery {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap; 
  padding:25px 0;
}

.gallery-item {
  flex: 1 1 calc(25%-20px);
  flex-grow: 0;
  flex-shrink: 0;
  margin: 10px 10px 30px 10px;
  flex-basis: calc(25% - 20px);
  transition: transform 0.3s ease-in-out;
}

.gallery-item img {
  width: 100%;
  height: 200px;
  display: block;
  object-fit: cover;
  transition: transform 0.3s ease-in-out;
}


.gallery-item:hover {
  transform: scale(1.05); 
}

.caption {
  text-align: center;
  margin-top: 10px;
  color: #303030;
  text-decoration: none;
  font-size: 1rem;
  transition: color 0.3s;
}

a .caption:hover {
  color:#e19d56;
  text-decoration: none !important; 
}
a .caption{
  text-decoration: none !important;
}

a:hover .caption{
  text-decoration: none !important;
  color:#e19d56;
}

.caption-box .caption{
  text-decoration: none;
}

/* Unterseite EINZELPROJEKT */

.hero-einzelprojekt{
  position: relative;
}

.hero-einzelprojekt .wrapper{
  position: relative;
} 

.projekt-headline h1{
  color:#fff;
}

.projekt-headline{
  position: absolute;
  left: 25px; 
  top: 66%; 
  transform: translateY(-50%); 
  padding: 20px 30px 0 30px;
  background-color: rgba(150, 175, 133, 0.8);
}

.einzelprojekt-info .row{
  display: flex;
}

.einzelprojekt-info img{
  object-fit: cover;
  display: flex;
}

.einzelprojekt-info h2{
  margin-bottom: 50px;
  font-size: 1.75rem;
}

.info-box{
  background: rgba(218,217,214,0.5);
  margin-top: 0;
  margin-bottom: 0;
  padding: 20px;
}

.info-box p{
  margin-bottom: 10px;
  font-size: 1rem;
}

.info-box ul{
  font-size: 1rem;
  list-style-position: outside;
  padding-left: 20px;
}

.projektbilder .row{
  display: flex;
}

.projektbilder img{
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.projektbilder-3 .row{
  display: flex;
}

.projektbilder-3 img{
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.single-link{
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'vartek', sans-serif;
}

#walter{
  font-size: 0.875rem;
}

/* Seite ÜBER UNS */

.grid-portrait {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
}

.portrait-box{
  background-color:#96af85;
  padding: 20px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  font-family: 'vartek', sans-serif;
  font-size: 1.25rem;
}

.portrait-foto{
  border-radius: 50%;
  object-fit: cover;
  width: 180px;
  height: 180px;
}

.quote-content{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.portrait-quotemark{
  width: 30px;
  height:30px;
  display: block;
  margin-bottom: 15px;
}

/* Seite NEWS & WISSEN  */

.news-headline .row{
  display:flex;
  flex-direction: column;
  align-items: center; 
}

.news-headline h2{
margin-bottom: 0;
color: #fff;
}

.news-headline .column{
  margin: 0;
  padding-top: 0;
}

.news-headline .col_1_4{
  background: #96af85;
  text-align: center;
  border-radius: 50%;
  width: 170px;
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 25px;
  margin-bottom: 50px;
  margin-top: 50px;
}

.news-headline .col_3_4{
  align-self: flex-start;
  margin-left: 0;
}

.news-headline p{
  text-align: left ;
}

.news-headline a{
  text-decoration: underline;
} 

.long-news .row{
  display: flex;
  align-items: center;
  align-items: stretch;
}

.long-news .col_1_4 img{
  object-fit: cover;
  width: 100%;
  height: auto;
  max-height: 250px;
}

.long-news img.icon-link {
  width: 25px; 
  height: 25px; 
}

.inner-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  margin-bottom: 20px;
}
.inner-grid-item img{
  width:100%;
  height: 250px;
  object-fit: cover;
}

.long-news h2{
  font-family: 'titillium web', Helvetica, Sans-Serif;
  color: #345d69;
  font-weight: 600;
  margin-bottom: 0;
}

.long-news hr{
  border: 0.8px solid #96af85;
}

.long-news p{
  font-size: 1rem;
}
.long-news a{
  font-size: 1rem;
}

.read-more-label {
  display: block;
  color: #e19d56;
  cursor: pointer;
  font-weight:500;
  margin-top: 10px;
  font-size: 1rem;
}

.read-more-toggle{
  display: none;
}

.read-more-content {
  display: none;
  margin-top: 10px;
}

.read-more-toggle:checked + .read-more-label + .read-more-content {
  display: block;
}

.read-more-icon {
  margin-right: 5px;
  transition: transform 0.2s ease;
  display: inline-block;
}

.read-more-toggle:checked + .read-more-label .read-more-icon {
  transform: rotate(90deg); 
}

.read-more-content ul {
  padding-left: 0; 
  list-style-position: inside; 
  margin: 0; 
}

.read-more-content ul li {
  margin-left: 0; 
  padding-left: 20px; 
  text-indent: -20px;
  font-size: 1rem; 
}

.read-more-content ul li::marker {
  margin-left: -20px; 
}

#dachgruen-news ul{
  margin-bottom: 20px;
}

/* Seite KONTAKT */

.contact a{
  font-weight: 600;
}
.contact .row{
  display: flex;
  align-items: stretch;
}

.contact .column{
  display: flex;
  flex-direction: column;
}

.back-cat{
  background-image: url('../img/img_projekte/Sambugastrasse-Bogenhausen/CNW_8758-2_Stubentiger_high_res.webp'); 
  background-size: cover;
  background-position: center; 
  background-repeat: no-repeat; 
  height:auto;
  min-height: 300px;
  flex-grow: 1; 
} 

.textbox{
  padding: 25px; 
  /* border-radius: 8px; */
  box-shadow: 0px 10px 10px 0 rgba(0, 0, 0, 0.1);
}

.contact .column.col_1{
  margin-top: 0;
}


/* Seite Styleguide */

.breadcrumb a{
  font-size: 1rem;
  font-family:'vartek', sans-serif;
}

.breadcrumb .column{
  margin: 10px 0;
}

.breadcrumb{
  background:#f5f5f5;
}

#subnavigation{
  list-style: none;
  border-top: 1px solid #96af85;
}

#subnavigation li a{
  text-decoration: none;
  font-weight: 300;
  font-size: 18px;
  display: block;
  padding: 15px 0 15px 0px;
  border-bottom: 1px solid #96af85;
  font-family: 'vartek', sans-serif;
  font-size: 1rem;
}

#subnavigation li a.active{
  color: #96af85;
  font-weight: 600;
}

.abstandshalter{
  height: 50px;
}

blockquote{
  font-weight: 300;
  font-size: 1.25rem;
  border-top: #345d69 0.5px solid;
  border-bottom: #345d69 0.5px solid;
  padding: 25px;
}


.kundenname{
  font-family: 'vartek', sans-serif;
  font-size: 1.125rem;
  font-weight: 400;
  margin-bottom: 10px;
  color: rgba(52,93,105,1);
}

.kundenauftrag{
  font-size: 0.9rem !important;
  font-weight: 300;
}

.styleguide ul, ol{
  margin: 0 0 15px 20px;
}

.styleguide .column.col_1_2{
  margin-left: 0;
}

/* Tabelle */ 
 
table{
  border-collapse: collapse;
  margin: 30px 0;
  }
   
  thead{
  background:#345d69;
  color: #fff;
  }
   
  th{
  padding: 10px 0;
  font-size: 1.25rem;
  font-weight: 600;
  }
   
  td{
  border-top: 5px solid #fff;
  padding: 5px 12px;
  border-right: 1px solid #fff;
  }
   
  tbody tr:nth-child(even) {
  background-color: #f5f5f5;
  }
       
  tbody tr:nth-child(odd) {
  background-color: rgba(218,217,214,0.5);
  }

  .linien-liste h3{
  font-family: 'titillium web', sans-serif;
  color: #96af85;
  font-weight: 600;
  }

  #alternative-tabelle li{
  font-size: 1rem;
  }

  #alternative-tabelle .column:first-child ul{
  margin-left: 0;
  }



/* CSS-Anweisung TABLETS Hochformat */

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

  body{
    font-size: 1.125rem;
  }

  h1 {
    font-size: calc(2.25rem * 0.8); 
  }

  h2 {
    font-size: calc(2rem * 0.8); 
  }

  h3 {
    font-size: calc(1.625rem * 0.8);
  }

  #logo{
    margin-left: 0;
  }

  #navigation {
    float: none;
    margin-top: 0;
  }

  #navigation li {
    margin-left: 15px;
  }

  #navigation li a{
    font-size: 1.0rem;
  }

  .header {
    display: flex;
    flex-direction: column; 
    align-items: center; 
  } 

  .header .row {
    width: 100%; 
    justify-content: center;
    display: flex;
    flex-direction: column; 
    align-items: center; 
  } 

  .header .column {
    width: 100%;
    display: flex; 
    align-items: center;
    justify-content: center;
    float: none;
    margin: 0;
    padding-top: 0;
  } 

  .header{
    margin-bottom: 10px;
  }

  #logo{
    max-height: 150px;
  }

  /* Startseite TABLET */

  .hero img{
    max-height: 400px;
    object-fit: cover;
  }

  .hero .hero-text {
    padding: 25px;
  }

  .hero .hero-text p{
    margin: 0;
  }

  .stimmung span {
    font-size: 1.5rem;
  }

  #zusammen {
    padding: 25px;
  }

  .philosophie .col_2_3{
    align-items: center;
  }


  .leistungen .row{
    display: flex;
    flex-direction: row;
    
  }
  
  .text-link{
    white-space: normal;
  }

  .icon-link img{
    margin-right: 5px;
  }

  .leistungen h3{
    margin-bottom: 0;
  }

  .gartenprojekte .column{
  margin-top: 0;
  margin-bottom: 0;
  }

  .freiraumprojekte .column{
    margin-top: 0;
    margin-bottom: 0;
  }

  .quote-slider{
    height: 500px;
  }

  .quote-slider blockquote{
    height: 500px;
  } 

  .news .column.col_1_3{
    width: 48.3%;
  }
  
  .news .column:last-child{
    width: 100%;
    margin-left: 0;
    margin-top: 0;
  }

  .news .section-large-margin{
    margin-bottom: 0;
  }

  /* GARTEN-Seite TABLET */

  .garten-start{
    margin-bottom: 0;
  }

  .garten-start .col_1{
    padding-right: 25px;
    margin-left: 20px;
  }

  .garten-start h1{
    font-size: 1.8rem;
    margin-top: 0;
    margin-bottom: 20px;
  }

  .garten-start .column.col_3_4{
    margin-left: 20px;
  }

  .needs .column{
    float: none;
    width: 100%;
    margin-left: 10px;
  }

  .needs h2{margin-left: 20px;}

  .garten-angebot, .moore-teaser .column{
    width: 100%;
    float: none;
  }

  .garten-angebot .column:first-child{
    margin-left: 20px;
  }

  .garten-angebot h2{
    margin-left: 20px;
  }

  .garten-angebot img{
    display: none;
  }

  .garten-angebot .icon-link .text-link{
    margin-left: 20px;
  }

  .garten-angebot .col_1{
    margin-left: 20px;
  }

  .moore-teaser .column:nth-child(2){
    display: none;
  } 


  /* FREIRAUM-Seite TABLET */

  .freiraum h1{
    margin-bottom: 0;
  }

  /* PROJEKT-Seite TABLET */

  .gallery-item {
    flex: 1 1 calc(50% - 20px);
    flex-grow: 0;
    flex-shrink: 0;
  }

  .filter-btn {
    flex: 1 1 calc(33.33% - 10px);
    padding: 15px;
  }

  /* EINZELSEITE Projekt TABLET */

  .hero-einzelprojekt {
    margin-bottom: 30px;
  }

  .einzelprojekt-info .col_2_3{
    display: flex;
    width: 50%;
  }

  .einzelprojekt-info .col_1_3{
    display: flex;
    flex-direction: column;
    width: 50%;
  }

  .einzelprojekt-info .column{
    margin-bottom: 0;
  }

  .projektbilder .column{
    margin-bottom: 0;
  }

  .projektbilder-3 .row{
    flex-direction: column;
  }
  
  .projektbilder-3 .column{
    width: 100%;
  }

  .projektbilder-3 .column.col_1_3{
    margin: 0;
  }

  /* ÜBER UNS-Seite TABLET */

  .portrait .column.column.col_1_2{
    width: 100%;
  }
  .portrait .column:first-child{
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .portrait .column:last-child{
    margin: 0;
  }

  /* WISSEN & NEWS TABLET */

  .long-news .col_1_4 {
    width: 40%;
  }
  .long-news .col_3_4 {
    width: 60%;
  }
  
  .news-headline h3{
    margin-bottom: 0;
  }

  .news-headline p{
    margin-bottom: 0;
  }
 
  .long-news .inner-grid-item:nth-child(1){
    display: none;
  }

  .long-news .inner-grid{
    grid-template-columns: 1fr 1fr;
  }
  
  /* KONTAKT-Seite TABLET */

  .contact h1{
    text-align: center;
  }

}


/* CSS-Anweisung SMARTPHONE Hochformat */

@media only screen and (max-width: 767px){
  
  body{
    font-size: 1.125rem; 
  }

  .col_1, .col_1_2, .col_1_3, .col_2_3, .col_1_4, .col_3_4, .col_1_2{
    width: 100%; 
    padding: 5px;
  }

  .column{
    padding: 10px;
    margin: 10px 0 10px 0; 
  }

  .section-large-margin{
    margin-bottom: 30px;
  }

  /* Mobiles Menü */

  .header .column.col_3_4{
    display: flex;
    flex-direction: column; 
    justify-content: space-between;
  }  

  nav{
    display: none; 
  }

  .nav-toggle,
  nav {
    display: none !important;
  }

  .nav-toggle { 
    display:block; 
  }

  #nav-open:target nav {
    display: block;
  }

  #nav-open:target .nav-closed { 
  display:block; 
  } 

  .nav-closed, #nav-closed:target .nav-closed, #nav-open:target .nav-open { 
  display:none; 
  } 
  
  .nav-toggle img {
    width: 35px; 
    height: 35px;
  }

  #navigation {
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-between; 
    padding: 0;
    margin: 0; 
  }

  #navigation li {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 48%; 
      margin: 5px 0px 5px 0px; 
      border: 0.5px solid rgba(150, 175, 133, 1);
      border-radius: 5px; 
    }
  
  #navigation li a{
    margin-left: 0;
    display: block;
    font-size: 0.875rem;
    padding: 15px;
    width: 100%;
    text-align: center;
  } 

  #navigation li:nth-child(5) a {
    white-space: no-wrap;
    font-size: 0.8125rem;
  }

 #logo{
    max-height: 120px;
  } 

  h1, h2{
    font-size: 1.5rem;
    margin-bottom: 15px; 
  }

  h3, h4{
    font-size: 1.2rem; 
  }

  h5, h6{
    font-size: 1.0rem;
  }
  
  /* Startseite SMARTPHONE */

  .hero img{
    max-height: 250px;
  } 

  .hero .hero-text{ 
    margin: 0; 
  } 

  .hero .hero-text h1{
    font-size: 1.4rem;
  }

  .hero .hero-text p{
    font-size: 1rem !important;
    margin: 0;
  }
  .hero{
    margin-bottom: 10px;
  }

  .stimmung .column{
    padding: 0;
  }

 .background-lightg{
    height: 200px; 
    order: -1;
  }

  .stimmung .row{
    flex-direction: column;
  }

  .stimmung img{
    height: 200px;
    object-fit: cover;
  }

  #muenster-mobile{
    display: none;
  } 

  .philosophie{
    margin-bottom: 0;
  }

  .philosophie p{
    font-size: 1.0rem;
  }

  .philosophie .row{
    flex-direction: column;
  }

  .philosophie .col_2_3{
    border-bottom: none;
    border-top: none;
    padding-left: 0;
  }

  .background-blueg{
    min-height:200px !important;
  } 
  
  .leistungen .row{
    flex-direction: column;
    align-items: stretch;
  }

  .leistungen .column{ 
    padding: 40px 30px 30px 30px;
  }

  .leistungen h3{
    margin-bottom: 20px;
  }

  .gartenprojekte .row{
    flex-direction: column;
  }

  .gartenprojekte .column{
    margin: 0;
    width: 100%;
  }

  .gartenprojekte .column.col_1_3{
    padding-left: 0;
  }

  .gartenprojekte h3{
    margin-bottom: 20px;
  }

  .freiraumprojekte .row{
    flex-direction: column;
  }

  .freiraumprojekte .column{
    margin: 0;
    width: 100%;
  }

  .freiraumprojekte .column.col_1_3{
    padding-left: 0;
  }

  .customer-quote{
    margin-bottom: 0;
  }

  blockquote p{
    font-size: 1rem;
  }
  
  blockquote{
    font-size:1.125rem;
  }

  .quote-slider{
    min-height: 530px;
  }

  .news p{
    font-size: 0.9rem;
    margin-bottom: 10px;
  }

  .news h5{
    margin-bottom: 20px;
  }

  .news .row {
    display: flex;
    flex-direction: column;
  }

  .news .column.col_1_3{
    padding: 30px 30px 15px 30px;
    width: 100%;
  }

  .news .column.col_1_3:last-child{
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .news-tablet{
    display: none;
  }

  .kennenlernen .row {
    display: flex;         
    flex-direction: column; 
    align-items: center;   
  }

  .kennenlernen .column{
    width: 100%; 
    padding: 10px;
  }

  .kennenlernen img{
    width: 150px;
    height: auto;
    margin: 0 auto;
    display: block;
    float: none;
  }

  .kennenlernen p{
    margin: 0;
  }

  footer .column{
    margin-top: 30px;
  }

  footer a{
    font-size: 1.0rem;
  }
  

  /* GARTEN-Seite SMARTPHONE */

  .garten-start .col_1{
    margin-left: 0;
  }
  .garten-start .col_3_4{
    margin-left: 0 !important;
  }

  .garten-start h1{
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.5rem;
    margin-left: 0;
  }  

  .needs .row{
    flex-direction: column;
    align-items: center;
  }

  .needs .column{
    float: none;
  }

  .needs h2{
    margin-left: 0;
    padding: 10px;
  } 

  .needs h3{
    font-size: 1.25rem;
  }

  .needs .col_1_3{
    order: -1;
    display: flex;
    justify-content: center;
  }

  .garten-angebot .row{
    flex-direction: column;
  }

  .garten-angebot .column.col_1_3{
    padding-left: 0;
  }

  .garten-angebot .column:first-child{
    margin-left: 0;
  }

  .garten-angebot h2{
    margin-left: 0;
    margin-top: 20px;
    margin-bottom: 20px;
  } 

  .garten-angebot h3{
    font-size: 1.25rem;
    margin-bottom: 15px;
  }

  .garten-angebot .icon-link .text-link{
    margin-left: 0;
  }

  .garten-angebot ul{
  margin-left: 0;
  }

  .linien-liste li{
    font-size: 0.9rem;
  }

  .moore-teaser .row{
    flex-direction: column;
  }

  .contact-icon{
    font-size: 0.9rem;
  }

   /* FREIRAUM-Seite SMARTPHONE */

  .freiraum .row{
    flex-direction: column;
  }
  
  .freiraum .col_1_3{
    order: -1;
    display: flex;
    justify-content: center;
  } 

  .freiraum h3{
    font-size: 1.375rem;
  }
  

  /* PROJEKT-Seite SMARTPHONE */

  .gallery-item {
    flex: 1 1 100%;
  }

  .filter-container {
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-between;
  }

  .filter-btn {
    width: 100%;
    text-align: center;
    padding: 10px;
    flex: 1 1 calc(50% - 10px); 
    border: 0.5px solid #96af85;
    margin: 10px 10px 10px 0;
    font-size: 0.875rem;
  }

  /* EINZELSEITE Projekt SMARTPHONE */

  .hero-einzelprojekt h1{
    margin-bottom: 0;
    font-size: 1.25rem;
  }
  .projekt-headline{
    padding: 10px;
  }

  .einzelprojekt-info{
    margin-bottom: 10px;
  }

  .einzelprojekt-info .row{
    flex-direction: column;
  }

  .einzelprojekt-info .col_2_3{
    width: 100%;
    padding: 0;
    margin-bottom: 10px;
  }

  .einzelprojekt-info .col_1_3{
    width: 100%;
  }

  .einzelprojekt-info h2{
    font-size: 1.125rem;
    margin-bottom: 30px;
  }

  .info-box{
    padding-left: 20px;
  }

  .projektbilder .row{
    flex-direction: column;
  }

  .projektbilder .column{
    width: 100%;
    padding: 0;
  }

  .projektbilder-3 .row{
    flex-direction: column;
  }
  .projektbilder-3 .column{
    width: 100%;
    padding: 0;
  }

  #lounge-smart{
    margin-bottom: 30px;
  }

  /* WISSEN & NEWS Seite SMARTPHONE */

  .long-news .row{
    flex-direction: column;
  }

  .long-news .column{
    width: 100%;
  }

  .long-news .column.col_1_4{
    margin-top: 30px;
  }

  .long-news .inner-grid {
    grid-template-columns: 1fr;
  }

  .news-headline p{
    margin-top: 30px;
  }

  /* ÜBER UNS-Seite SMARTPHONE */

  .grid-portrait{
    grid-template-columns: 1fr;
  }

  .portrait-box:nth-child(4){
    grid-row: 3;
  }

  /* WISSEN & NEWS SMARTPHONE */

  .long-news .inner-grid-item:nth-child(1){
    display: contents;
  }

  /* KONTAKT-Seite SMARTPHONE  */

  .contact .row{
    flex-direction: column;
  }

  /* STYLEGUIDE Smartphone */

  .styleguide ul{
    margin-left: 0;
  }

  footer p{
    font-size: 1rem;
  }
}