/* 35363a   1d3557   #0785aa*/



:root {
    --dv-color-copper: #b87333;
    --dv-color-copper-light: #ca8444;
    --dv-color-copper-dark: #8c4e1b;
    --dv-color-copper-glow: rgba(184, 115, 51, 0.22);


    --dv-color-main: #f1f5f9;
    --dv-color-background: #0b1329;
    --dv-border-color: #1e2f5b;
    --dv-color-muted: #94a3b8;
    --dv-color-card-background: #111d3d;
    --dv-color-card-background-hover: #172650;
    --dv-color-card-subtle: #070d1c;

}

body.anders {

    --dv-color-main: #1c2738;
    --dv-color-background: #fcf9f3;
    --dv-border-color: #e2d7c3;
    --dv-color-muted: #64748b;
    --dv-color-card-background: #ffffff;
    --dv-color-card-background-hover: #f6efe2;
    --dv-color-card-subtle: #f4eee2;  
}



html {
  scroll-behavior: smooth;
}

a {

  color: var(--dv-color-copper);

}

@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-display: swap;
  src: url(/package/external/googlefonts/Karla-VariableFont_wght.ttf) format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



body {
  font-family: 'Karla';
  color: var(--dv-color-main);
  background-color: var(--dv-color-background);
  transition: background-color 0.4s ease, color 0.4s ease;
  
  
}

.dv-hero {
    
    position: relative;
    overflow: hidden;
}

.dv-text-copper {
  
  color: var(--dv-color-copper);
  
}

.navbar.scrolled {
  background-color: var(--dv-color-background);
  
}

.dv-text-justify {

  text-align: justify !important;
  text-justify: inter-word;
   
}

.dv-menu-nofocus {
  outline: 0 !important;
  box-shadow: none !important;
}

.dv-text-muted-custom { 
  color: var(--dv-color-muted) !important; 
}


.dv-navbar-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(78,26,13, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

/* .dv-navbar-toggler {
  margin-right: 25%;
  margin-left: auto;
} */

.dv-container-75 {

   margin-right: 25%;
  margin-left: auto;

}

.dv-navbar-toggler.navbar-toggler {
  border: 0;
  color: var(--dv-color-main);
}


.dv-img-portrait-navbar {

  width: 60px;
  height: auto;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  visibility: visible;
  opacity: 1;

}

.dv-img-portrait-navbar.is-hidden {

  width: 60px;
  height: auto;
  visibility: hidden;
  opacity: 0;

}

.dv-img-portrait-dark {

  filter: brightness(0.8);

}


.dv-btn-theme-toggle {
    background-color: var(--dv-color-copper-glow);
    border: 1px solid var(--dv-color-copper);
    color: var(--dv-color-copper);
    border-radius: 50rem;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.dv-btn-theme-toggle:hover {
    background-color: var(--dv-color-copper);
    color: #ffffff;
    box-shadow: 0 4px 15px var(--dv-color-copper-glow);
}

.dv-text-silbentrennung {
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto; 
}
        
@media (max-width: 768px) {


  .dv-navbar-toggler {
    margin-right: auto;
    margin-left: auto;
  }

  .dv-container-75 {

   margin-right: auto;
  margin-left: auto;

}

  .dv-hero {

    margin-top: 72px;

  }

  .dv-center {

    text-align: center;
  }


  .dv-img-portrait {
    width: 90%;
    height: auto;
    object-fit: contain; 
  }

 
  
}


#faq, #leistungen, #kontakt {

  scroll-margin-top: 90px;

}




.dv-badge-copper {
    background-color: var(--dv-color-copper-glow);
    color: var(--dv-color-copper);
    border: 1px solid var(--dv-color-copper);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.4rem 0.9rem;
    border-radius: 50rem;
}


.dv-btn-copper {
    background-color: var(--dv-color-copper);
    color: #ffffff !important;
    font-weight: 700;
    border: none;
    border-radius: 0.65rem;
    padding: 0.8rem 1.85rem;
    transition: all 0.3s ease;
}

.dv-btn-copper:hover {
    background-color: var(--dv-color-copper-light);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px var(--dv-color-copper-glow);
}

.dv-btn-outline-custom {
    border: 1px solid var(--dv-border-color);
    color: var(--dv-color-main);
    font-weight: 600;
    border-radius: 0.65rem;
    padding: 0.8rem 1.85rem;
    transition: all 0.3s ease;
}

.dv-btn-outline-custom:hover {
    border-color: var(--dv-color-copper);
    color: var(--dv-color-copper);
    background-color: var(--dv-color-copper-glow);
}


.dv-service-card {
    background-color: var(--dv-color-card-background);
    border: 1px solid var(--dv-border-color);
    border-radius: 1.25rem;
    padding: 2.25rem 2rem;
    height: 100%;
    transition: all 0.35s ease;
}

.dv-service-card:hover {
    border-color: var(--dv-color-copper);
    transform: translateY(-6px);
    background-color: var(--dv-color-card-background-hover);
    box-shadow: 0 15px 35px rgba(0,0,0,0.12);
}

.dv-service-icon {
    width: 60px;
    height: 60px;
    border-radius: 1rem;
    background-color: var(--dv-color-copper-glow);
    border: 1px solid var(--dv-color-copper);
    color: var(--dv-color-copper);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.65rem;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

.dv-service-card:hover .service-icon {
    background-color: var(--dv-color-copper);
    color: #ffffff;
    transform: scale(1.05);
}








.accordion-item {
    background-color: var(--dv-color-card-background);
    border: 1px solid var(--dv-border-color);
    border-radius: 1rem !important;
    margin-bottom: 1rem;
    overflow: hidden;
    transition: border-color 0.3s ease, background-color 0.4s ease;
}

.accordion-button {
    background-color: var(--dv-color-card-background);
    color: var(--dv-color-main);
    font-weight: 600;
    font-size: 1.1rem;
    padding: 1.25rem 1.5rem;
    box-shadow: none !important;
    transition: background-color 0.4s ease, color 0.3s ease;
}

.accordion-button:not(.collapsed) {
    color: var(--dv-color-copper);
    background-color: var(--dv-color-card-background-hover);
}

.accordion-button::after {
    filter: invert(50%) sepia(80%) saturate(600%) hue-rotate(350deg);
    transition: transform 0.3s ease;
}

  .accordion-body {
    background-color: var(--dv-color-card-background);
    color: var(--dv-color-muted);
    font-size: 1rem;
    line-height: 1.7;
    padding: 0 1.5rem 1.5rem 1.5rem;
    transition: background-color 0.4s ease, color 0.4s ease;
}