:root {
      --vh: 100vh; /* hilft bei mobilen Browsern */
      --slides-per-view: 5;        /* Desktop */
      --gap: 10px;
      --sticky-top: 0px;           /* wird per JS = Header-Höhe gesetzt */
      --edge-fade: 40px;
      --card-w: 320px;
      --card-h: 220px;
      --shadow: 0 8px 24px rgba(0,0,0,.12);
      --speed: .6s;
    }

section.header-onepic .header-onepic_img  {
    position: relative;
}



section.header-onepic .header-onepic_img::before {
  display: flex;
    content:"";
    width:230px;
    height: 230px;
    border-radius:100%;
    padding:20px;
    position: absolute;
    right:-15px;
    bottom:5px;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
  background: linear-gradient(21deg, rgba(88,42,130,1), rgba(168,98,144,1) 80.71%);
}


section.header-onepic .header-onepic_img::after  {
    display: flex;
    content:"";
    width:200px;
    height: 200px;
    background-image: url(/images/30implantology.svg);
    background-size:90%;
    background-position: center;
    background-color:#fff;
    border-radius:100%;
    padding:0;
    position: absolute;
    right:0px;
    bottom:20px;
}



h1, h2, section:not(.anschluss) h3 {
  color: #003c6f;
  font-weight: 400;
}



h1 {
  font-size: 35px;
  color: #003c6f;
  font-weight: 400;
}

h2 {
  font-size: 28px;
  color: #003c6f;
  font-weight: 400;
}

p, li {
  font-size: 18px;
  font-weight: 500 !important;
}



h4 {
  font-size: 21px;
}

.hometop::before {
  content: "\f015";
  display: block;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}


#content {
overflow: visible;
}


.implantat, .bohrer, .konus_plattform {
  padding: 0;
}


.table-resp {
  margin: 40px 0;
}

.bohrer_tab table {
  width:100% !important;
  border-collapse:collapse;
}

.bohrer_tab  th, .bohrer_tab td {
  padding: 10px;
  border: 1px solid #000;
}

.bohrer_tab table thead  {
  background:#069;
  color:#fff;
}




.eigenschaften .xcol-pic-box {
  border-radius: 1000px;
  overflow: hidden;
  border: 5px solid #ffbd08;
  max-width: 250px;
  max-height: 250px;
  aspect-ratio: 1/1;
  margin: auto;
}

.eigenschaften .x-columns {
align-items:start !important;
}

.eigenschaften .more_btn   {
  display: none;
}


.future {
  padding: 20px 0 100px
}

.future .media_image {
  border-radius: 1000px;
  aspect-ratio: 1/1;
  overflow: hidden;
  border: 5px solid #ffbd08;
}


.video .pic-box.ga-video_vid_bohrer_lowspeed {
  border-radius: 1000px;
  overflow: hidden;
  border: 5px solid #ffbd08;
}

.lp-videokachel .pic-box {
   border-radius: 10px;
  overflow: hidden;
  border: 1px solid #f3f3f3;
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

.lp-videokachel .video .pic-box::before, .videoitem .video .pic-box::before {
  color: rgba(0,0,0,0.5);
}


.lp-videokachel .video .pic-box:hover::before, .videoitem .video .pic-box:hover::before {
  color: rgba(0,0,0,0.7);
}





.shortvideoitem {
  aspect-ratio: 1/1;
  max-height:450px;
  max-width:450px;
min-width: 300px;
    padding:0px;
  border-radius: 100%;
  border: 5px solid #ffbd08;
  overflow:hidden;
/*pointer-events:none;*/
  margin: auto;
}

.shortvideoitem_inner {
   position: relative;
  aspect-ratio: 1/1;
  max-height:500px;
  max-width:500px;
  border-radius: 100%;
  border: 0px solid #ccc;
  overflow:hidden;
}

.shortvideoitem_inner .videobox_content > div  {
  position: absolute;
  top:-170px;
  left:-150px;
  /*! transform: translate(-50%, 0); */
  width: 900px;
  height: 900px;
}


.shortvideoitem_inner video {
  min-height:500px;
  width:100%;
  top: -40px;
  left: -50px;
}


.shortvideoitem_inner::after {
  content: "";
  display:block;
  border-radius: 100px;
background: linear-gradient(180deg,
  rgba(194, 0, 0, 1) 0%,
 rgba(245, 158, 0, 1) 25%,
rgba(226, 221, 0, 1) 50%,
rgba(0, 157, 61, 1) 67%,
rgba(0, 105, 180, 1) 80%,
rgba(0, 37, 66, 1) 100%);
  width: 30px;
  height: 180px;
  position: absolute;
  z-index: 9;
  top:50%;
  right: 50px;
  transform: translateY(-50%);
}



.reel:has(.card-inner) { perspective: 1200px; }
 

    .card-inner {
      position: relative;
      width: 100%;
      height: calc(100vh);
      transform-style: preserve-3d;
      transition: transform var(--speed) ease;
      /*box-shadow: var(--shadow);*/
      aspect-ratio: 9/16;
      max-height: 57vh;
    }



    .card.is-flipped .card-inner { transform: rotateY(180deg); }

    @media (hover: hover) and (pointer: fine) {
      .card:not(.no-hover):hover .card-inner { transform: rotateY(180deg); }
    }

    .side {
      position: absolute;
      inset: 0;
      backface-visibility: hidden;
    }


.card article {

}

    .card-front {
      background-image: url(https://wWW.dentaurum.de/images/schmuckbg_tiologictwinfit_2.webp);
      background-repeat: no-repeat;
      background-size: 160%;
      background-position: 0 -150px;
      background-color: #fff;
      }

    .card-back { display:flex; flex-direction: column; align-items: center; background: #fff; color: #fff; transform: rotateY(180deg);}

 

    a.flip {
      display: inline-flex;
      align-self: center;
      justify-self: center;
      text-align: center;
      padding: .6rem 1rem;
      border: 1px solid #003c6f;
      border-radius: 10px;
      background: #fff;
      color: #003c6f;
      font-weight: 600;
      cursor: pointer;
      transition: background .2s;
      margin: auto;
      position: absolute;
      left: 50%;
      bottom: 0px;
      transform: translateX(-50%);
    }
    a.flip:hover,
    a.flip:focus-visible { background: #003c6f; color:#fff;}


/****3D-Model****/

/**/
   #viewer {
      position: relative;
      width: 600px;
      height: 600px;
      margin: 20px auto;
      border: 0px solid #d2901c;
      border-radius: 8px;
      overflow: hidden;
    }

 /*   .tooltip {
      position: absolute;
      padding: 6px 12px;
      background: rgba(255,255,255,0.95);
      color: #222;
      border-radius: 5px;
      font-size: 14px;
      pointer-events: none;
      display: none;
      transform: translate(-50%, -120%);
      max-width: 250px;
      z-index:9;
    }
    .tooltip h3 {
      margin: 0 0 4px 0;
      font-size: 16px;
      color: #d2901c;
    }
    .hotspot-indicator {
      position: absolute;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 2px solid #d2901c;
      background: rgba(255,255,255,0.3);
      transform: translate(-50%, -50%);
      pointer-events: auto;
      cursor: pointer;
    }
*/


    * { box-sizing: border-box; }


.spacer {
  height: 80vh;
  display: grid;
  place-items: center;
  color: #666;
}

.animation-section {
  position: relative;
  width: 100%;
}

.sticky-wrap {
  position: sticky;
  top: 200px;
  width: 100%;
  height: calc(100vh - 200px);
  overflow: hidden;
  background: url(https://www.dentaurum.de/images/schmuckbanner_twinfit_bg.webp);
  background-repeat: no-repeat;
  background-size: cover;
}


canvas.scrolly-canvas {
  width: auto;
  height: calc(var(--vh) - 200px);
  /*! height: calc(100vh - 200px); */
  display: block;
  margin: auto;
}


#bohrer canvas.scrolly-canvas {
  width: auto;
  height: calc(100vh - 150px);
  display: block;
  margin: 0;
}





.text-container {
  position: absolute;
  top: 0;
  width: 100vw;
  height: 100%;
  z-index: 9999999 !important;
}

.text-container-inner {
  position: relative;
}

.text-div {
  position: absolute;
  opacity: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px;
  font-size: 18px;
  max-width: 550px;
  transition: opacity 0.5s ease-in-out;
  margin: 10px 0;
  color: #fff;
  border-radius: 10px;
  padding: 10px;
  /*! background: rgba(255,255,255,0.6); */
  border: 0px solid #fff;
  /*! backdrop-filter: blur(5px); */
}

.text-div > img {
  display: block;
  width:100%;
  object-fit: cover;
  aspect-ratio: 1/1;
}

.scrolly_detail_pic {
  display: block;
  width:100%;
  object-fit: cover;
  background: #fff;
  min-width:250px;
  max-width: 250px;
  border-radius: 1000px;
  margin-right: 20px;
  margin-left: 30px;
  aspect-ratio: 1/1;
  border: 5px solid #ebbe00;
  overflow: hidden;
}

.detail-left .scrolly_detail_pic {
  order:2;
}

.detail-right .scrolly_detail_pic {
  order:1;
}

.scrolly_detail_pic > img {
  display: block;
  width:100%;
  object-fit: cover;
  aspect-ratio: 1/1;
}

.scrolly_logo {
 
}


.scrolly_logo img {
  width:300px;
}


.detail-left .scrolly_detail_txt {
  order:1;
  margin-right: 10px;
}

.detail-right .scrolly_detail_txt {
  order:2;
  margin-left: 10px;
}




.text-div.active {
  opacity: 1;
}

.text-div span.txt-line {
  position: absolute;
  display: block;
  width: 230px;
  height: 50px;
  background: url(https://www.dentaurum.de/images/verbindung.svg);
  background-size:cover;
  background-repeat: no-repeat;
  z-index: -1;
}

/* Pfeil-Linie + Punkt (Punkt bleibt, Linie als gebogene SVG-Grafik im Background) */
.text-div .txt-line,
.text-div .txt-tip{
  position:absolute;
  left:50%;
  top:50%;
  transform-origin:0 50%;
  pointer-events:none;
}

/* Punkt am Ende (du kannst ihn auch ausblenden, falls unnötig) */
.text-div .txt-tip{
  width:10px;
  height:10px;
  border-radius:50%;
  transform: translateX(0);
}

.text-div span.txt-line::before,
.text-div span.txt-line::after {
  content: "";
  display: none;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid #fff;
  border-radius: 100px;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
}

.text-div span.txt-line::before {
  left: -20px;
}

.text-div span.txt-line::after {
  right: -20px;
}

#text-sec3-2 .scrolly_detail_txt {
  margin-bottom: 30px;
}



/* Text Positionen */

#text1 {
  top: 40vh;
  right: 20vw;
}
#text1 span.txt-line {
  transform: rotate(5deg);
}
#text1 span.txt-line::after {
  display: none;
}

#text2 {
  top: 20vh;
  right: 20vw;
}
#text2 span.txt-line {
  transform: rotate(15deg);
}
#text2 span.txt-line::after {
  display: none;
}

#text3 {
  top: 25vh;
  left: 20vw;
}
#text3 span.txt-line {
  transform: rotate(-15deg);
}
#text3 span.txt-line::before {
  display: none;
}

#text4 {
  top: 25vh;
  left: 22vw;
}
#text4 span.txt-line {
  transform: rotate(-45deg);
}
#text4 span.txt-line::before {
  display: none;
}

#text5 {
  top: 15vh;
  right: 15vw;
}
#text5 span.txt-line {
  transform: rotate(-10deg);
}

#text5 span.txt-line::after {
  display: none;
}

#text6 {
  top: 15vh;
  right: 20vw;
}
#text6 span.txt-line {
  transform: rotate(-10deg);
}

#text6 span.txt-line::after {
  display: none;
}


#text-sec2-1 {
  top: 30vh;
  left: 17vw;
}
#text-sec2-1 span.txt-line {
  transform: rotate(5deg);
}
#text-sec2-1 span.txt-line::before {
  display: none;
}

#text-sec2-2 {
  top: 45vh;
  right: 21vw;
}
#text-sec2-2 span.txt-line {
  transform: rotate(20deg);
}
#text-sec2-2 span.txt-line::after {
  display: none;
}

#text-sec2-3 {
  top: 20vh;
  right: 15vw;
}
#text-sec2-3 span.txt-line {
  transform: rotate(-10deg);
}
#text-sec2-3 span.txt-line::after {
  display: none;
}


#text-sec2-4 {
  top: 33vh;
  left: 25vw;
  border: 0;
  font-size: 20px;
}
#text-sec2-4 span.txt-line {
  transform: rotate(5deg);
}

#text-sec2-5 {
  top: 33vh;
  right: 25vw;
  border: 0;
  font-size: 20px;
}
#text-sec2-5 span.txt-line {
  transform: rotate(-10deg);
}


#text-sec3-1 {
  top: 35vh;
  right: 12vw;
}
#text-sec3-1 span.txt-line {
  transform: rotate(-5deg);
}
#text-sec3-1 span.txt-line::before {
  display: none;
}

#text-sec3-2 {
  top: 35vh;
  right: 20vw;
}
#text-sec3-2 span.txt-line {
  transform: rotate(-45deg);
}
#text-sec3-2 span.txt-line::after {
  display: none;
}

#text-sec3-3 {
  top: 40vh;
  left: 18vw;
}
#text-sec3-3 span.txt-line {
  transform: rotate(-15deg);
}
#text-sec3-3 span.txt-line::before {
  display: none;
}

#text-sec3-4 {
  top: 45vh;
  left: 18vw;
}
#text-sec3-4 span.txt-line {
  transform: rotate(-40deg);
}
#text-sec3-4 span.txt-line::before {
  display: none;
}

#text-sec3-5 {
  top: 13vh;
  right: 35vw;
}
#text-sec3-5 span.txt-line {
  transform: rotate(-20deg);
}
#text-sec3-5 span.txt-line::after {
  display: none;
}

#text-sec3-6 {
  top: 35vh;
  left: 14vw;
}
#text-sec3-6 span.txt-line {
  transform: rotate(-25deg);
}
#text-sec3-6 span.txt-line::before {
  display: none;
}

#text-sec3-7 {
  top: 8vh;
  right: 43vw;
}
#text-sec3-7 span.txt-line {
  transform: rotate(-15deg);
}
#text-sec3-7 span.txt-line::before {
  display: none;
}

/* Slider */

.slider-container-wrapper {
  position: relative;
}
.hint {
  position: absolute;
  background: #fff;
  border: 5px solid #069;
  left:50%;
  bottom: 10px;
  border-radius: 10px;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(-50%);
  padding: 0 10px;
}


section.slider {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100vh;
  /*! padding: 100px 0; */
  background: url(https://www.dentaurum.de/images/schmuckbanner_twinfit_bg.webp);
  background-repeat: no-repeat;
  background-size: cover;
}

.slider-container {
  position: relative;
  width: 100%;
  /*! max-width: 1200px; */
  max-height: 83vh;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 10px;
  margin: auto;
  /*! background: #fff; */
  -ms-user-select: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}

.slider-image {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /*! background: #fff; */
  background: url(https://www.dentaurum.de/images/schmuckbanner_twinfit_bg.webp);
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  z-index: ;
}

.slider-image > img {
  width: auto;
  height: 100%;
  object-fit: cover;
  padding-top: 100px;
}

.slider-before {
   z-index: 1;
}

.slider-before img {
  z-index: 1;
}

.slider-before::before {
  content:"";
  display:block;
  width: 100%;
  height:100%;
  background: url(https://www.dentaurum.de/images/bg_plattformswitch_plattform_de.svg);
  background-position: center 30px;
  background-size: 90% 90%;
  background-repeat: no-repeat;
  z-index: 1;
  position: absolute;
}

.slider-after {
  z-index: 2;
  clip-path: inset(0 50% 0% 0);
  transition: clip-path 0.1s ease;
}


.slider-after img {
  z-index: 1;
}

.slider-after::before {
  content:"";
  display:block;
  width: 100%;
  height:100%;
  background: url(https://www.dentaurum.de/images/bg_plattformswitch_konus_de.svg);
  background-position: center 30px;
  background-size: 90% 90%;
  background-repeat: no-repeat;
  z-index: 1;
  position: absolute;
}

html[lang="EN"] .slider-before::before {
  background-image: url(https://www.dentaurum.de/images/bg_plattformswitchplattform_en.svg);
  background-position: center 30px;
}

html[lang="EN"] .slider-after::before {
  background-image: url(https://www.dentaurum.de/images/bg_plattformswitchkonus_en.svg);
  background-position: center 32px;
}

.slider-handle {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: 3px;
  background: #006699;
  border: 0;
  cursor: ew-resize;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  transform: translateX(-50%) ;
}


.slider-handle::before {
  position: absolute;
  content: "BEWEG MICH!";
  font-weight: 400;
  background: #fff;
  font-size: 20px;
  margin-top: 210px;
  border-radius: 100px;
  width: 150px;
  color: #006699;
  padding: 4px 8px;
  margin-left: -3px;
  transform: rotate(-90deg);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

html[lang="EN"] .slider-handle::before {
  content: "MOVE ME!";
}

html[lang="FR"] .slider-handle::before {
  content: "DÉPLACEZ-MOI";
}


html[lang="ES"] .slider-handle::before {
  content: "MUÉVEME!";
}


html[lang="IT"] .slider-handle::before {
  content: "MUOVAMI!";
}


html[lang="AR"] .slider-handle::before {
  content: "حركني";
}

html[lang="CN"] .slider-handle::before {
  content: "让我动起来!";
}


.slider-handle::after {
  content: "\f337";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  background: #fff;
  font-size: 30px;
  border-radius: 100px;
  width: auto;
  color: #006699;
  padding: 2px 8px;
  margin-left: -3px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}


/*.slider-handle {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: 3px;
  background: #006699;
  border: 0;
  cursor: ew-resize;
  z-index: 3;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  transform: translateX(-50%);
}


.slider-handle::after {
  content: "\f337";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  background: #fff;
  font-size: 20px;
  border-radius: 100px;
  width: 60px;
  color: #006699;
  padding: 4px 8px;
  margin-left: -3px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}*/

.slider-text {
  position: absolute;
  padding: 10px 20px;
  max-width: 400px;
  color: #fff;
}
 
.slider-text > img {
  height: 50px;
}

.slider-image:nth-of-type(2) .slider-text {
  left: 5vw;
}

.slider-image:nth-of-type(1) .slider-text {
  right: 5vw;
}

/********/

.testimonials {
padding:100px 0 0;
}

    *{ box-sizing: border-box; }
    html,body{ margin:0; font-family: system-ui, sans-serif; }


    .sticky-section{ position:relative; min-height: 2600px !important;}
    .pinner{ position:sticky; top:0; z-index:10; background: color-mix(in oklab, canvas, black 3%); padding-bottom:1rem; }

    .h-gallery{
      display:flex; gap:var(--gap);
      overflow-x:scroll; overflow-y:scroll;
      scroll-snap-type:x mandatory; scroll-behavior:smooth; scroll-padding-inline:50%;
      -webkit-overflow-scrolling:touch;
      border-radius:1rem; box-shadow:0 8px 24px rgba(0,0,0,.12);
      background: color-mix(in oklab, canvas, black 3%);
      scrollbar-width:none; -ms-overflow-style:none;
      -webkit-mask-image: linear-gradient(to right, transparent 0, black var(--edge-fade), black calc(100% - var(--edge-fade)), transparent 100%);
              mask-image: linear-gradient(to right, transparent 0, black var(--edge-fade), black calc(100% - var(--edge-fade)), transparent 100%);
    }
    .h-gallery::-webkit-scrollbar{ display:none; }

.sticky-section,
.sticky-section > * { overflow: visible !important; }

    .spacer{
      pointer-events:none;
      flex:0 0 calc(50% - ((100% - (var(--gap) * (var(--slides-per-view) - 1))) / var(--slides-per-view)) / 2);
    }

  /*  .slide{
      position:relative;
      flex:0 0 calc((100% - (var(--gap) * (var(--slides-per-view) - 1))) / var(--slides-per-view));
      scroll-snap-align:center; scroll-snap-stop:always;
      display:grid; place-items:center;
      min-height:min(92vh, 900px);
      max-width: 500px;
      padding: clamp(5px, 2vw, 5px);
      background:transparent;
      transform: scale(.96); opacity: 1;
      transition: transform .25s ease, opacity .25s ease;
    }
*/

    .slide{
      position:relative;
      flex:0 0 calc((100% - (var(--gap) * (var(--slides-per-view) - 1))) / var(--slides-per-view) );
      scroll-snap-align:center; scroll-snap-stop:always;
      display:grid; place-items:center;
      min-height:850px;
      max-width: 450px;
      padding: clamp(8px, 2vw, 16px);
      background:transparent;
      transform: scale(.96); opacity: 1;
      transition: transform .25s ease, opacity .25s ease;
    }
    .slide.is-near{ transform:scale(.98); opacity:1.0; }
    .slide.is-center{ transform:scale(1); opacity:1; z-index:1; }

    .reel{
      aspect-ratio:9/16; width:100%; height:auto; max-height:86vh;
      position:relative; overflow:hidden; border-radius:24px;
      box-shadow:0 12px 40px rgba(0,0,0,.25);
      background-color:#fff;
      background-image: url(https://wWW.dentaurum.de/images/schmuckbg_tiologictwinfit_2.webp);
      background-repeat: no-repeat;
      background-size: 150%;
      background-position: 0 -150px;
    }

    .reel:has(.card-inner){
      background-color:#fff;
      background-image: none;
      background-repeat: no-repeat;
    }
    .reel > video, .reel > iframe{ width:100%; height:100%; display:block; border:0; object-fit:cover; }
    .clappr-mount{ width:100%; height:100%; }


  .slide-imgbox {
    position: relative;
    margin-bottom: 0px;
  }

    .slide-picbox {
      position: relative;
      top: 20px;
      width: 200px;
      height: 200px;
      background:#fff;
      overflow: hidden;
      border-radius: 1000px;
      margin: 0 auto 30px;
      aspect-ratio: 1/1;
      border: 5px solid #ebbe00;
    }

    .slide-picbox img{ width:100%; display:block; }
    .slide-txtbox{
     position: relative;
     top: 10px;
     width:100%;
     /*height:100%;*/
     padding: clamp(10px,1vw,20px);
     /*! background:#ccc; */
     font-size: clamp(12px,2vw,18px);
}

    .slide-txtbox p {
      font-size: clamp(12px, 2vw, 16px) !important;
      line-height: 150%;
      color: #003c6f;
    }

.exp_header {
color:#ebbe00 !important;
}



   .dots{
      display:flex;
      justify-content:center; align-items:center;
      gap:.5rem; margin-top:.75rem;
      user-select:none; position: absolute;
      bottom: 10%;z-index: 9999;
      transform: translateX(-50%);left: 50%;
      padding: 10px 10px;
      background: rgba(255,255,255,0.6);
      border-radius: 10px;
     }

    .dots .dot{
      appearance:none; border:0; width:15px; height:15px; border-radius:999px;
      background: #666; opacity:.45; cursor:pointer;
      transition: width .18s ease, opacity .18s ease, background-color .18s ease;
    }
    .dots .dot:is(:hover,:focus-visible){ opacity:.85; outline:none; }
    .dots .dot.is-active{ opacity:1; background: #069; }

/*
*/
 @media (max-width: 1920px){

    .card-inner {
      max-height: 56vh;
    }

.slide-txtbox p {
  font-size: clamp(12px, 2vw, 15px) !important;
  line-height: 140%;
}


#text1 {
  top: 40vh; right: 11vw;
}


#text2 {
  top: 20vh;right: 13vw;
}

#text3 {
  top: 20vh;left: 11vw;
}

#text4 {
  top: 25vh;left: 18vw;
}

#text5 {
  top: 15vh;right: 10vw;
}


#text6 {
  top: 15vh;right: 12vw;
}

#text-sec2-1 {
  top: 25vh;left: 8vw;
}

#text-sec2-2 {
  top: 40vh;right: 11vw;
}

#text-sec2-3 {
  top: 20vh;right: 5vw;
}


#text-sec2-4 {
  top: 33vh;
  left: 25vw;
  border: 0;
  font-size: 20px;
}

#text-sec2-5 {
  top: 33vh;right: 25vw;
}

#text-sec3-1 {
  top: 21vh;right: 12vw;
}

#text-sec3-2 {
  top: 30vh;right: 10vw;
}

#text-sec3-3 {
  top: 35vh;left: 11vw;
}

#text-sec3-4 {
  top: 43vh;left: 12vw;
}

#text-sec3-5 {
  top: 7vh;right: 25vw;
}

#text-sec3-6 {
  top: 32vh;left: 7vw;
}

#text-sec3-7 {
  top: 5vh;right: 33vw;
}

}


 @media (min-width: 1920px){
:root{ --slides-per-view: 5; }
}



 @media (max-width: 1900px){
:root{ --slides-per-view: 4; }
}


 @media (max-width: 1600px){
:root{ --slides-per-view: 3; }


@media (max-height: 900px) and (max-width:1600px){
  
    :root{ --slides-per-view: 4; }

    .slide {
       min-height: 700px;
     }

    a.flip {
       bottom: 10px;
    }

}

 .slider-text {
  padding: 10px 10px;
  max-width: 300px;
}
 
   .card-inner {
     max-height: 75vh;
   }
 
}

 @media (max-width: 1400px){
 
   p, li, td {
     font-size:16px;
   }

   section.header-onepic .header-onepic_img::before {
    width:180px;
    height: 180px;
}


section.header-onepic .header-onepic_img::after  {
    width:150px;
    height: 150px;
}

       .card-inner {
    max-height: 65vh;
  }

 .scrolly_detail_pic {
  min-width:200px;
  max-width: 200px;
  margin-right: 20px;
  margin-left: 30px;
}
 
     .scrolly_detail_txt {
 backdrop-filter: blur(10px);
 border-radius: 10px;
}

   #text-sec2-4 {
  top: 55vh;
  left: 21vw;
}

#text-sec2-5 {
  top: 55vh;right: 18vw;
}



     #text-sec3-1 {
    top: 47vh;
    left:18vw;
  }

 #text-sec3-2 {
    top: 50vh;
    left: 20vw;
  }

#text-sec3-7 {
  top: 5vh;right: 13vw;
}

#text-sec3-5 {
  top: 35vh;left: 10vw;
}



 .slider-text {
  padding: 10px 0px;
  max-width: 200px;
  bottom: 20px;
}
 
 
  .slider-image:nth-of-type(1) .slider-text {
  right: 2vw;
}
 
 .slider-image:nth-of-type(2) .slider-text {
  left: 2vw;
}
 
}

 @media (max-width: 1180px){
 
   .slider-text {
     bottom:20px
}
 
 .slider-text ul {
 
}
 
.freiheit {
  background-position: left -300px bottom 36%, right -300px bottom 36% !important;
  background-size: auto 200%, auto 200% !important;
  padding: 100px 0 !important;
}

       .card-inner {
    max-height: 55vh;
  }
 
}


 @media (max-width: 992px){
 
      p, li, td {
     font-size:15px;
   }


.freiheit {
  background-position: left -300px bottom 36%, right -300px bottom 36% !important;
  background-size: auto 200%, auto 200% !important;
  padding: 100px 0 !important;
}
 
  .freiheit .one-column {
     max-width: 500px;
     margin:auto;
   }
 
 
  .table-resp table  {
    margin: auto;
  }
 
     .table-resp td > img {
    width: 200px !important;
    min-width: 200px !important;
  }

}


 @media (max-width: 950px){
:root{ --slides-per-view: 2; }
 
 
.slider-text {
    max-width: 20vw;
  }
 
}

@media (max-width: 850px){

   section.header-onepic .header-onepic_img::before {
    width:130px;
    height: 130px;
}


section.header-onepic .header-onepic_img::after  {
    width:100px;
    height: 100px;
}

.slider-text {
    max-width: 20vw;
  }
 
      p, li, td {
     font-size:15px;
   }

.freiheit {
  background-position: left -300px bottom 36%, right -300px bottom 36% !important;
  background-size: auto 200%, auto 200% !important;
  padding: 50px 0 !important;
}

 .slider-text li {
    font-size: 2vw;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
 
}

 @media (max-width: 768px){

   p, li, td {
     font-size:14px;
     line-height: 130% !important;
   }

.animation-section {
  padding:0;
}

.sticky-wrap {
  top: 150px;
  width: 100%;
  height: calc(100vh - 150px);
}

  .table-resp {
    max-width: 650px;
    overflow-x:scroll;
  }

 
      .card-inner {
     max-height: 55vh;
   }

canvas.scrolly-canvas {
  max-width: 100%;
  height: calc(var(--vh) - 200px);
}

   .scrolly_logo img {
     width: 100%;
     max-width: 300px;
     min-width: 130px;
}
 
.scrolly_detail_pic {
  min-width:150px;
  max-width: 150px;
  margin-right: 20px;
  margin-left: 30px;
}

.future {
padding: 50px 20px;
}

 
   .freiheit {
  background-position: left -250px bottom 36%, right -250px bottom 36% !important;
  background-size: auto 180%, auto 180% !important;
  padding: 50px 0 !important;
}


 .slider-text  {
   top: unset;
   transform: translate(0,0);
   bottom: 0px;
  }
 
   .slider-text h3 {
    font-size: 18px;
  }
 

 
 #text1 {
  top: 40vh; right: 11vw;
}


#text2 {
  top: 20vh;right: 13vw;
}

#text3 {
  top: 20vh;left: 11vw;
}

#text4 {
  top: 25vh;left: 18vw;
}

#text5 {
  top: 15vh;right: 10vw;
}


#text6 {
  top: 15vh;right: 12vw;
}

#text-sec2-1 {
  top: 25vh;left: 8vw;
}

#text-sec2-2 {
  top: 40vh;right: 11vw;
}

#text-sec2-3 {
  top: 20vh;right: 5vw;
}


#text-sec2-4 {
  top: 20vh;
  left: 20vw;
}

#text-sec2-5 {
  top: 20vh;right: 20vw;
}

#text-sec3-1 {
  top: 11vh;left: 52vw;
}

#text-sec3-2 {
  top: 15vh;left: 52vw;
}

#text-sec3-3 {
  top: 15vh;left: 52vw;
}

#text-sec3-4 {
  top: 11vh;left: 55vw;
}

#text-sec3-5 {
  top: 5vh;left: 55vw;
}

#text-sec3-6 {
  top: 12vh;left: 55vw;
}

#text-sec3-7 {
  top: 5vh;left: 55vw;
}



}


@media (orientation:portrait) and (max-width: 800px) {
 
 
  .scrolly_detail_txt {
 backdrop-filter: blur(10px);
 border-radius: 10px;
}
 
   #text1 {
  top: 40vh; right: 11vw;
}


#text2 {
  top: 20vh;right: 13vw;
}

#text3 {
  top: 20vh;left: 11vw;
}

#text4 {
  top: 25vh;left: 18vw;
}

#text5 {
  top: 15vh;right: 10vw;
}


#text6 {
  top: 15vh;right: 12vw;
}

#text-sec2-1 {
  top: 25vh;left: 8vw;
}

#text-sec2-2 {
  top: 40vh;right: 11vw;
}

#text-sec2-3 {
  top: 20vh;right: 5vw;
}


#text-sec2-4 {
  top: 20vh;
  left: 25vw;
}

#text-sec2-5 {
  top: 50vh;right: 25vw;
}

#text-sec3-1 {
  top: 55vh;right: 2vw;
}

#text-sec3-2 {
  top: 55vh;right: 10vw;
}

#text-sec3-3 {
  top: 55vh;left: 11vw;
}

#text-sec3-4 {
  top: 55vh;left: 12vw;
}

#text-sec3-5 {
  top: 55vh;right: 25vw;
}

#text-sec3-6 {
  top: 55vh;left: 7vw;
}

#text-sec3-7 {
  top: 55vh;right: 33vw;
}

 
}


@media (orientation: landscape) and (max-width: 812px) {

    .scrolly_detail_txt {
 backdrop-filter: blur(10px);
 border-radius: 10px;
}
 
  .detail-right .txt-line {margin-top: -30px;}
 
 
  .animation-section {
    position: relative;
    z-index: 9999999999999;
  }
 
 .sticky-wrap {
  top: 0px;
  width: 100vw;
  height: calc(100vh - 0px);
}

canvas.scrolly-canvas {
  max-width: 100vw;
  height: calc(var(--vh) - 0px);
}
 
 .text-div {
  flex-direction: column;
  max-width: 200px;
}
 
  .scrolly_detail_pic {
  min-width:120px;
  max-width: 120px;
  margin-right: 0px;
  margin-left: 0px;
}
 
 
.text-div .scrolly_detail_pic {
  order: 1;
}
 
  .text-div .scrolly_detail_txt {
    text-align: center;
    order: 2;
}

#text-sec3-1 {
  top: 11vh;left: 65vw;
}

#text-sec3-2 {
  top: 15vh;left: 65vw;
}

#text-sec3-3 {
  top: 15vh;left: 65vw;
}

#text-sec3-4 {
  top: 11vh;left: 65vw;
}

#text-sec3-5 {
  top: 5vh;left: 65vw;
}

#text-sec3-6 {
  top: 12vh;left: 65vw;
}

#text-sec3-7 {
  top: 5vh;left: 65vw;
}
 
}



@media (max-width:650px) {

  #text-sec3-1 {
  top: 55vh;left: 10vw;
}
 
  .slider-handle::before {
  font-weight: 600;
  background: #fff;
  font-size: 16px !important;
  margin-top: 200px;
  width: 120px;
}
 
.slider-handle::after {
  font-size: 25px;
  border-radius: 100px;
}

 
}

 @media (max-width: 600px) {
:root{ --slides-per-view: 1; }

   .freiheit {
     background: none !important;
   }

   .card-inner {
    max-height: 60vh;
  }
 
  .reel p {
   font-size: 16px !important;
    line-height: 120%;
    padding: 0 10px;
  }
     .slider-handle::before {
  font-size: 14px !important;
  margin-top: 160px;
  width: 110px;
}
 
 
 
}


 @media (max-width: 480px) {

      :root { --card-h: 260px; }
      button.flip { align-self: center; }


      .sticky-wrap {
  top: 50px;
  height: calc(100vh - 0px);
}

canvas.scrolly-canvas {
  max-width: 100%;
  height: calc(var(--vh) - 0px);
}

   #text-sec2-4 {
  top: 30vh;
  left: 25vw;
}

#text-sec2-5 {
  top: 60vh;right: 25vw;
}

   .slider-text h3 {
    font-size: 14px;
    margin: 0 0 10px;
  }
 
   .slider-text h3 img {
    min-width: 90px;
  }
 
     .slider-image:nth-of-type(1) .slider-text {
  right: 6vw;
}
 
 .slider-image:nth-of-type(2) .slider-text {
  left: 1vw;
}
 
   .slider-handle::before {
     display: none;
   }
 
 
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

 @media (max-width: 400px) {
:root{ --slides-per-view: 1; }

   .freiheit {
     background: none !important;
   }

   .card-inner {
    max-height: 51vh;
  }
 

 
   #text-sec3-5 {
    top: 55vh;
    left: 15vw;
  }
 
 
}


 @media (max-width: 380px) {
:root{ --slides-per-view: 1; }

   .card-inner {
    max-height: 60vh;
  }
 
}