@font-face {
    font-family: 'dejavu_sansextralight';
    src: url('../fonts/DejaVuSans-ExtraLight-webfont.eot');
    src: url('../fonts/DejaVuSans-ExtraLight-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/DejaVuSans-ExtraLight-webfont.woff2') format('woff2'),
         url('../fonts/DejaVuSans-ExtraLight-webfont.woff') format('woff'),
         url('../fonts/DejaVuSans-ExtraLight-webfont.ttf') format('truetype'),
         url('../fonts/DejaVuSans-ExtraLight-webfont.svg#dejavu_sansextralight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'dejavu_sansbook';
    src: url('../fonts/DejaVuSans-webfont.eot');
    src: url('../fonts/DejaVuSans-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/DejaVuSans-webfont.woff2') format('woff2'),
         url('../fonts/DejaVuSans-webfont.woff') format('woff'),
         url('../fonts/DejaVuSans-webfont.ttf') format('truetype'),
         url('../fonts/DejaVuSans-webfont.svg#dejavu_sansbook') format('svg');
    font-weight: normal;
    font-style: normal;

}
* {margin: 0;padding:0;}

body {

    font-family: 'dejavu_sansbook';
    font-size:18px;
    padding-top: 20px;
    padding-bottom: 20px;
    background: #f0f0f0;
    

}

header {background-image: url(start-blaetter.webp);
background-size: cover;
height: 420px;
}

footer {
  
    margin-top: 0em;
    font-size: 0.9em;

}


.container {max-width: 1600px;width: 100%;padding: 40px;background: #fff;}

.btn-primary {background: #c53029;border:none;font-weight:bold;}
.btn-primary:hover {background: #1a4111;}

 .navbar-custom {
    color: #fff;
    background-color: #c53029;
    padding: 12px 30px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  }

  .navbar-custom a {
    color: #fff;
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
  }

  .nav-grid {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.2fr) minmax(360px, 2fr);
    align-items: center;
    gap: 28px;
    width: 100%;
  }

  .nav-logo img {
    display: block;
    max-width: 220px;
    background-color: #fff;
    height: auto;
  }

  .nav-contact {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #fff;
    text-align: center;
  }

  .nav-contact a {
    font-weight: 600;

  }

  .nav-contact a:hover,
  .nav-contact a:focus {
    color: #fff;
    border-bottom-color: #fff;
  }

  .nav-menu {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .nav-menu .nav-link {
    display: inline-block;
    color: #fff;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 0.95rem;
    line-height: 1.2;
    white-space: nowrap;
  }

  .nav-menu .nav-link:hover,
  .nav-menu .nav-link:focus {
    color: #c53029;
    background-color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
  }

  @media (max-width: 991px) {
    .navbar-custom {
      padding: 10px 18px;
    }

    .nav-grid {
      grid-template-columns: 1fr;
      gap: 10px;
      text-align: center;
    }

    .nav-logo img {
      max-width: 175px;
      margin: 0 auto;
    }

    .nav-contact {
      font-size: 0.85rem;
      line-height: 1.4;
    }

    .nav-menu {
      justify-content: center;
      flex-wrap: wrap;
      gap: 4px 6px;
    }

    .nav-menu .nav-link {
      padding: 6px 9px;
      font-size: 0.82rem;
    }
  }

  @media (max-width: 480px) {
    .navbar-custom {
      padding: 8px 12px;
    }

    .nav-logo img {
      max-width: 145px;
    }

    .nav-contact {
      font-size: 0.78rem;
    }

    .nav-menu .nav-link {
      padding: 5px 7px;
      font-size: 0.76rem;
    }
  }



h1 {margin-left: -15px;margin-top:1px;font-family: 'dejavu_sansextralight';font-weight: normal;}
h2 {margin-top:1px;font-weight: bold;font-family: 'dejavu_sansextralight';font-weight: bold;}
h3 {margin-top:1px;font-weight: bold;font-family: 'dejavu_sansextralight';font-weight: bold;font-size: 1.3em;}
p, ul, ol {font-size: .9em;}

section a {    color: #c53029;}
section a:hover {color: #999;text-decoration: none;}
.project img, #ulrike-m-walter img {border: 1px solid #c53029;}

.project h2 {margin-top: -5px;color: #1a4111;font-weight: bold;}
.row ul, .project ul, ol {margin-left: 20px;}

nav a {color: #fff;font-weight: bold;}
footer a {color: #c53029;text-decoration: none;}
footer a:hover {color: #666;text-decoration: none;}

.kasten {
padding: 10px 20px;
width:100%;
font-size: 2em;
    margin-left:1px;
margin-bottom:25px;
    background: #77ba15;
    color: #fff;
}

.kasten a {color: #fff;}
.kasten a:hover {color: #fffff0;}
.kasten p {margin-bottom:0;text-align: center;}


.cta {
    width: 100%;
padding: 10px 20px;
font-size: 1.3em;
    margin-left:1px;

    background: #77ba15;
    color: #fff;
}

.cta a {color: #fff;}
.cta a:hover {color: #f0f0f0;}
.cta p {margin-bottom:0;text-align: center;}

blockquote {width:101%;margin-left:15px;}
blockquote p {font-size: 1em;}
blockquote small {font-size:0.5em;}

img {max-width: 100%;height: auto;}
.project {margin-bottom: 40px;}

.back-to-top {
    position: fixed;
    bottom: 2em;
    right: 2em;
    text-decoration: none;
    color: #c53029;
    background-color: rgba(235, 235, 235, 0.80);
    font-size: 1em;
    padding: 1em;
    display: none;
}

.back-to-top:hover {
    background-color: rgba(135, 135, 135, 0.50);
}

#client-testimonial-carousel {min-height:300px;}
p.mb-0 {font-size: 0.8em;}
/* Carousel base class */
.carousel {
  margin:.5rem;

}

/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: .5rem;
  z-index: 10;
}


.carousel footer.blockquote-footer {margin-top: 10px;font-style:italic;color: #f0f0f0;}



/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
    

  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
    
   
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }
}


@media (max-width: 40em) {

 h1, h2,h3,h4 {margin-top: 20px;hyphens: auto;}
    img {margin-bottom: 20px;}
        .carousel {width:99%;}
    .carousel {height: 680px;}    
    .carousel .blockquote {font-size: 16px;}
    .carousel-indicators {margin-top: 10px;}
    .kasten {font-size: 1.3em;}
    .navbar p {font-size: 1em;}
  
}



@media print {
    *,
    *:before,
    *:after,
    *:first-letter,
    *:first-line {
        background: transparent !important;
        color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}