/* Die styles hier sind speziell für die template Seite. Nicht ungefiltert in neue Projekte kopieren! */
* {
    box-sizing: border-box;
}
.ext-container {
  min-height: 200px; /* Sicherstellen, dass genügend Platz vorhanden ist */
}
@font-face {
    font-family: noto;
    font-display: swap;
    src: url(/fileadmin/webfonts/NotoSans-Regular.ttf) format("truetype");
}
@font-face {
    font-family: noto;
    font-display: swap;
    src: url(/fileadmin/webfonts/NotoSans-Regular.ttf) format("truetype");
}
body {
    margin: 0;
    font-family: noto;
    line-height: 1.5;
    overflow-x: hidden;
}

sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    top: -0.5em;
}

a,
a:hover,
a:focus {
    color: #ff6600;
}

img,
video {
    max-width: 100%;
    height: auto;
    display: block;
  border-radius: 12px;
}
@media (min-width: 768px) {
    img:not(.headerbild),
    video:not(.headerbild) {
        max-width: 400px;
      max-width: 100%;
        margin: 0 auto;
    }
}
@media (min-width: 1024px) {
    img:not(.headerbild),
    video:not(.headerbild) {
        
    }
}


p {
    margin: 0;
    line-height: 1.5em;
}
p ~ p,
p p ~ ul,
p p ~ ol,
p h1 ~ p,
p h2 ~ p,
p h3 ~ p,
p h4 ~ p,
p h5 ~ p {
    margin-top: 20px;
}

ul,
ol {
    line-height: 1.5em;
    padding-left: 20px;
    margin: 0;
    margin-top: 1rem;
}

table {
    border-collapse: collapse;
}
table tr {
    background: #eee;
}
table tr:not(:last-child) {
    border-bottom: 1px solid #595959;
}
table tr:nth-child(even) {
    background: #ccc;
}
table tr td {
    padding: 5px;
}
table tr td:not(:last-child) {
    border-right: 1px solid #595959;
}

main {
    
      margin-top: 75px;

}
@media (min-width: 1280px) {
    main {
         margin-top: 75px;
       
    }
}



main > .gridelement,
main > .color > .gridelement,
main > .bidler {
    padding: 20px;
}
main > .text {
  padding:20px 0;
}
@media (min-width: 768px) {
   
    main > .gridelement,
    main > .color > .gridelement,
    main > .bidler {
        padding: 20px 40px;
    }
}
@media (min-width: 1024px) {
  
    main > .gridelement,
    main > .color > .gridelement,
    main > .bidler {
        padding: 20px 60px;
    }
}
@media (min-width: 1280px) {
   
    main > .gridelement,
    main > .color > .gridelement,
    main > .bidler {
        padding: 40px 0;
        width: 1100px;
        margin: 0 auto;
    }
}

#page-1 main {
    margin-top: 0 !important;
}

@media (min-width: 1024px) {
    #page-2,
    #page-3,
    #page-4,
    #page-5,
    #page-11,
    #page-13,
    #page-26,
    #page-27 {
        margin-top: 0px;
    }
}
@media (min-width: 1280px) {
    #page-2,
    #page-3,
    #page-4,
    #page-5,
    #page-11,
    #page-13,
    #page-26,
    #page-27 {
        margin-top: 0px;
    }
}

@media (max-width: 768px) {
    .hide_on_mobile {
        display: none;
    }
    .topnav {
        width: 100%;
        justify-content: space-around;
    }
}


.button,
.btn {
    position: relative;
    padding: 10px 15px;
    display: inline-block;
    color: #ff6600;
    text-decoration: none;
    transition: all 0.3s ease;
    z-index: 10;
    background: transparent;
    border: 0;
    font: inherit;
    cursor: pointer;
}
.button:before,
.btn:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    z-index: 1;
    transform: skew(10deg);
    border: 3px solid;
}
.button:after,
.btn:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    z-index: -1;
    transform: skew(10deg);
    transition: all 0.3s ease;
}
.button:hover,
.btn:hover {
    color: white;
}
.button:hover:after,
.btn:hover:after {
    background: #ff6600;
}
.button:focus,
.btn:focus {
    outline: none;
}





html, * {
  scroll-behavior: smooth;
}
body {
  /* color: #a2a2a2; */
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
 
  color: #7e7e7e;
  line-height: 1.6em;
  letter-spacing: .5px;
 
  color: #666;


    background: linear-gradient(0deg, rgb(247 241 241 / 45%) 0%, rgb(255 239 239 / 0%) 26%, rgb(250 239 236 / 5%) 31%);
    background: linear-gradient(0deg, rgb(247 241 241 / 10%) 0%, rgba(255, 239, 239, 0) 26%, rgba(250, 239, 236, 0.05) 31%);
  
}
main{
  // overflow: hidden;
}


.gift{
  background: #fff;
  // background: #fff;
  //   min-height: 95%;
  //   padding: 16px;
  //   border-radius: 10px;
}



:root {
  /* ---- Accent and Action Colors ---- */
  --main-color: #ff6600;
  --main-border-radius:24px;
  --secondary-color: #000;
  --title-color: #444;
  
  /* Dark gray for titles and headings */
  --text-color: #6b7280;
  --text-color: #2c3e50;
  /* Medium gray for main body text */
  --silver: #bfbfbfff;
  /* Soft gray for secondary text or muted content / border*/
  --teal:#008080;
  --green: #225357;
  --green: #f5ab96;
  --gold:#daa520;
  --blue:#2c3e50;


 --primary-color: #444; /* Winkelmann Blau */
            --secondary-color: #e30613; /* Winkelmann Rot */
            --light-color: #f8f9fa;
            --dark-color: #343a40;
            --winkelmann-light-blue: #3498db;
            --winkelmann-light-red: #e74c3c;

  /* ---- Background Colors ---- */
  --section-background: #f9f9ff; 
  /* --section-background:  #e3e2dc4f;  */
  --section-background: #22535712;
  --section-background:  #f8e8daff; 
  --section-background:  #f9f9ff; 
  /* Main background for sections (same as Ghost White) */
  --almond: #f8e8daff;
  /* Very light, neutral background */
  --misty-rose: #ffe4e1ff;
  /* Light pink for highlighted sections or backgrounds */
  --pale-dogwood: #e0c6bbff;
  /* Muted brownish-pink for secondary backgrounds */
  --pale-dogwood: #e0c6bb59;

  --main-transition: 0.3s linear;
  --main-padding-top: 60px;
  --main-padding-bottom: 60px;
  --text-color: #777;
  --mobileWidth: 479px;
  --tabletWidth: 767px;
  --desktopWidth: 991px;

    --accent-color: #6053488f;

}




p {
  margin-bottom: 1em;
  margin-bottom: 10px;
}
b, strong {
  font-weight: 600;
  // color: var(--main-color);
}

a {
  color: var(--main-color);
  color: inherit;
  text-decoration: none;

}

ul {

  list-style: none;
  padding-left: 20px;
  margin-bottom: 0;
}

ul li {
  position: relative;
}
.liste ul , .liste2 ul
{
  margin-top: 15px;
  line-height: 1.9;
}
 ul li:before {
  position: absolute;
  content: '■';
  content: '\2714';
  position: absolute;
  left: -18px;
  top: -2px;
  color: var(--main-color1);
  font-size: 100%;
  line-height: 1.8;

}
nav li:before , .footer  li:before  {
display:none;
}
.liste2 ul li:before {
  position: absolute;
  content: '\2714';
  position: absolute;
  left: -18px;
  top: -2px;
  color: var(--main-color1);
  font-size: 100%;


}









@keyframes left-move {
  50% {
    left: 0;
    width: 12px;
    height: 12px
  }

  100% {
    left: 0;
    border-radius: 0;
    width: 50%;
    height: 100%
  }
}

@keyframes right-move {
  50% {
    right: 0;
    width: 12px;
    height: 12px
  }

  100% {
    right: 0;
    border-radius: 0;
    width: 50%;
    height: 100%
  }
}

.main-title {
  text-align: center;
  margin-bottom: 70px
}

.image-hinter {
  position: relative;
}

.image-hinter::before {
  width: 30%;
  content: "";
  position: absolute;
  top: -25px;

  background: #424242;
  height: calc(100% + 50px);
  z-index: 0;
  right: 0;
}

.image-hinter img {
  position: relative;
  z-index: 2;
  width: 93% !important;
  display: block;
  margin: auto;
}

.main-title h2 {
  position: relative;
  padding: 5px;
  width: fit-content;
  margin: auto;
  cursor: pointer;
  font-weight: 400;
  text-transform: uppercase;
  margin: 0 auto 10px;
  font-weight: 400;
  max-width: 85%;
  color: var(--secondary-color)
}

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

  .main-title h2,
  .main-title p {
    max-width: 85%;
    margin: auto
  }
}

.main-title h2::before,
.main-title h2::after {
  content: "";
  width: 12px;
  height: 12px;
  background-color: var(--main-color);
  position: absolute;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%)
}

.main-title h2::before {
  left: -30px
}

.main-title h2::after {
  right: -30px
}

.main-title:hover h2::before {
  z-index: -1;
  animation: left-move 0.5s linear forwards
}

.main-title:hover h2::after {
  z-index: -1;
  animation: right-move 0.5s linear forwards
}

.main-title:hover h2 {
  color: #fff;
  background-color: var(--main-color);
  transition-delay: 0.5s;
  z-index: 2
}


// .dce-uebersicht.fixed-sidebar {
//   position: relative !important; /* Try changing from fixed to relative */
//   top: 0;
// }




.dp--revoke.cc-top-right, .dp--revoke.cc-bottom-right {
  right: unset;
  left: auto
}

@media (min-width: 600px) {
   .new-hero.sca .image img  {
    transform: scale(1.34);
  }
  
}
.image-full {
    position: relative;
    height: 100%;
}
.image-full img {
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    height: 90%;
    max-width: 100%;
}